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: