HTML - Tag frase
I tag frase sono stati progettati per scopi specifici, sebbene vengano visualizzati in modo simile agli altri tag di base <b>, <i>, <pre>, e <tt>, hai visto nel capitolo precedente. Questo capitolo ti guiderà attraverso tutti i tag delle frasi importanti, quindi iniziamo a vederli uno per uno.
Testo enfatizzato
Tutto ciò che appare all'interno <em>...</em> l'elemento viene visualizzato come testo enfatizzato.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
<p>The following word uses an <em>emphasized</em> typeface.</p>
</body>
</html>Questo produrrà il seguente risultato:
Testo contrassegnato
Tutto ciò che appare con dentro <mark>...</mark> elemento, viene visualizzato come contrassegnato con inchiostro giallo.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Marked Text Example</title>
</head>
<body>
<p>The following word has been <mark>marked</mark> with yellow</p>
</body>
</html>Questo produrrà il seguente risultato:
Testo forte
Tutto ciò che appare all'interno <strong>...</strong> l'elemento viene visualizzato come testo importante.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
<p>The following word uses a <strong>strong</strong> typeface.</p>
</body>
</html>Questo produrrà il seguente risultato:
Abbreviazione del testo
Puoi abbreviare un testo inserendolo nei tag di apertura <abbr> e di chiusura </abbr>. Se presente, l'attributo title deve contenere questa descrizione completa e nient'altro.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Text Abbreviation</title>
</head>
<body>
<p>My best friend's name is <abbr title = "Abhishek">Abhy</abbr>.</p>
</body>
</html>Questo produrrà il seguente risultato:
Elemento Acronimo
Il <acronym> L'elemento ti permette di indicare che il testo tra i tag <acronym> e </acronym> è un acronimo.
Al momento, i principali browser non modificano l'aspetto del contenuto dell'elemento <acronym>.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Acronym Example</title>
</head>
<body>
<p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
</body>
</html>Questo produrrà il seguente risultato:
Direzione del testo
Il <bdo>...</bdo> element sta per Bi-Directional Override e viene utilizzato per sovrascrivere la direzione del testo corrente.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Text Direction Example</title>
</head>
<body>
<p>This text will go left to right.</p>
<p><bdo dir = "rtl">This text will go right to left.</bdo></p>
</body>
</html>Questo produrrà il seguente risultato:
Termini speciali
Il <dfn>...</dfn>element (o HTML Definition Element) ti consente di specificare che stai introducendo un termine speciale. Il suo utilizzo è simile alle parole in corsivo nel mezzo di un paragrafo.
In genere, si utilizza l'elemento <dfn> la prima volta che si introduce un termine chiave. I browser più recenti visualizzano il contenuto di un elemento <dfn> in un carattere corsivo.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Special Terms Example</title>
</head>
<body>
<p>The following word is a <dfn>special</dfn> term.</p>
</body>
</html>Questo produrrà il seguente risultato:
Citando il testo
Quando vuoi citare un passaggio da un'altra fonte, dovresti metterlo in mezzo <blockquote>...</blockquote> tag.
Il testo all'interno di un elemento <blockquote> è solitamente rientrato dai bordi sinistro e destro del testo circostante e talvolta utilizza un carattere in corsivo.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Blockquote Example</title>
</head>
<body>
<p>The following description of XHTML is taken from the W3C Web site:</p>
<blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML,following on
from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
</body>
</html>Questo produrrà il seguente risultato:
Citazioni brevi
Il <q>...</q> elemento viene utilizzato quando si desidera aggiungere una virgoletta doppia all'interno di una frase.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Double Quote Example</title>
</head>
<body>
<p>Amit is in Spain, <q>I think I am wrong</q>.</p>
</body>
</html>Questo produrrà il seguente risultato:
Citazioni testuali
Se stai citando un testo, puoi indicare la fonte inserendolo tra un'apertura <cite> tag e chiusura </cite> etichetta
Come ci si aspetterebbe da una pubblicazione stampata, il contenuto dell'elemento <cite> viene visualizzato in corsivo per impostazione predefinita.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Citations Example</title>
</head>
<body>
<p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
</body>
</html>Questo produrrà il seguente risultato:
Codice del computer
Qualsiasi codice di programmazione da visualizzare su una pagina Web deve essere inserito all'interno <code>...</code>tag. Di solito il contenuto dell'elemento <code> è presentato in un carattere a spaziatura fissa, proprio come il codice nella maggior parte dei libri di programmazione.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Computer Code Example</title>
</head>
<body>
<p>Regular text. <code>This is code.</code> Regular text.</p>
</body>
</html>Questo produrrà il seguente risultato:
Testo della tastiera
Quando parli di computer, se vuoi dire a un lettore di inserire del testo, puoi usare il <kbd>...</kbd> elemento per indicare cosa dovrebbe essere digitato, come in questo esempio.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Keyboard Text Example</title>
</head>
<body>
<p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
</body>
</html>Questo produrrà il seguente risultato:
Variabili di programmazione
Questo elemento viene solitamente utilizzato insieme a <pre> e <code> elementi per indicare che il contenuto di quell'elemento è una variabile.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Variable Text Example</title>
</head>
<body>
<p><code>document.write("<var>user-name</var>")</code></p>
</body>
</html>Questo produrrà il seguente risultato:
Output del programma
Il <samp>...</samp> elemento indica l'output di esempio da un programma, script, ecc. Ancora una volta, viene utilizzato principalmente quando si documentano concetti di programmazione o codifica.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Program Output Example</title>
</head>
<body>
<p>Result produced by the program is <samp>Hello World!</samp></p>
</body>
</html>Questo produrrà il seguente risultato:
Testo indirizzo
Il <address>...</address> elemento viene utilizzato per contenere qualsiasi indirizzo.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Address Example</title>
</head>
<body>
<address>388A, Road No 22, Jubilee Hills - Hyderabad</address>
</body>
</html>Questo produrrà il seguente risultato: