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 , , <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 ... 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 ..., 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 ... 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