HTML Phrase Tags
I phrase tags sono dei tag che vengono utilizzati per scopi specifici, anche se vengono mostrati in modo simile ad alcuni tag basiliari che abbiamo analizzato precedentemente come <b>, <i>, <pre>, e <tt>. In questo capitolo verranno analizzati tutti i più importanti phrase tags, dopo questa premessa possiamo iniziare ad analizzarli uno ad uno.
Testo Enfatizzato
Tutto ciò che è contenuto all' interno dell' elemento <em>...</em> verrà enfatizzato.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
<p>The following word uses a <em>emphasized</em> typeface.</p>
</body>
</html>
Produrrà il seguente risultato:
The following word uses a emphasized typeface.
Testo Evidenziato
Tutto ciò che è contenuto all' interno dell' elemento <mark>...</mark>, verrà evidenziato di colore 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>
Produrrà il seguente risultato:
The following word has been marked with yellow.
Testo Strong
Tutto ciò che è contenuto all' interno dell' elemento <strong>...</strong> verrà mostrato come un 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>
Produrrà il seguente risultato:
The following word uses a strong typeface.
Testo Abbreviato
È possibile abbreviare il testo inserendo fra i tag di apertura <abbr> e di chiusura </abbr>. Se presente, l' attributo title conterrà solo la 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>
Produrrà il seguente risultato:
My best friend's name is Abhy.
Elemento Acronimo
L' elemento <acronym> permette di indicare che il testo fra i tag <acronym> e </acronym> è un acronimo.
Allo stato attuale, i principali browser non cambiano 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>
Produrrà il seguente risultato:
This chapter covers marking up text in XHTML.
Orientamento Testo
L' elemento <bdo>...</bdo> sta per Bi-Directional Override ed è usato per sovrascrivere l' attuale orientamento del testo.
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>
Produrrà il seguente risultato:
This text will go left to right.
This text will go right to left.
Termini Speciali
L' elemento <dfn>...</dfn> (o HTML Definition Element) consente di indicare che si sta inserendo un termine speciale. L' utilizzo è simile all 'inserimento del testo in corsivo all' interno un paragrafo.
Generalmente si dovrebbe usare l' elemento <dfn> la prima volta che si utilizza una parola chiave. I browser recenti mostrano il contenuto dell' elemento <dfn> con 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>
Produrrà il seguente risultato:
The following word is a special term.
Citazioni
Quando vuoi inserire pezzi di testo da una fonte esterna, puoi utilizzare i tag <blockquote>...</blockquote>.
Il testo all' interno dell' elemetno <blockquote> è generalmente indentato da sinistra a destra e in alcuni browser viene mostrato 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>
Produrrà il seguente risultato:
The following description of XHTML is taken from the W3C Web site:
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.
Citazioni Brevi
L'elemento <q>...</q> viene utilizzato quando si desidera inserire una frase fra doppi apici.
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>
Produrrà il seguente risultato:
Amit is in Spain, I think I am wrong
.
Citazioni
Se stai citando un testo, puoi indicare la fonte inserendolo tra i tag <cite> e </cite> tag
Così come accade nei libri, il contenuto dell'elemento <cite> sarà mostrato in corsivo.
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>
Produrrà il seguente risultato:
This HTML tutorial is derived from W3 Standard for HTML.
Codici Programmazione
Ogni codice di programmazione che viene inserito in una pagina web dovrebbe essere inserito fra i tag <code>...</code>. Generalmente il contenuto dell' elemento <code> viene mostrato con un carattere monospazio, esattamente come nei 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>
Produrrà il seguente risultato:
Regular text. This is code. Regular text.
Keyboard Text
Quando si parla di computer, se vuoi indicare all' utente di inserire un testo, puoi usare l' elemento <kbd>...</kbd> per indicare cosa dovrebbe esserci scritto, come nell' 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>
Produrrà il seguente risultato:
Regular text. This is inside kbd element Regular text.
Variabili di Programmazione
Questo elemento è spesso usato in combinazione con gli elementi <pre> e <code> per indicare che il contenuto è 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>
Produrrà il seguente risultato:
document.write("user-name")
Output di un Programma
L' elemento <samp>...</samp> indica il semplice output di un programma, script ecc.
Inoltre è principalmente utilizzato durante la documentazione o il concept di un programma.
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>
Produrrà il seguente risultato:
Result produced by the program is Hello World!
Indirizzi
L' elemento <address>...</address> è usato per indicare un indirizzo.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Address Example</title>
</head>
<body>
<address>388A, Road No 22, Jubilee Hills - Hyderabad</address>
</body>
</html>
Produrrà il seguente risultato:
388A, Road No 22, Jubilee Hills - Hyderabad
