Altri elementi di testo in linea

Abbiamo trattato la maggior parte, ma non tutti, gli elementi HTML. Un'area che non abbiamo trattato è quella degli elementi di testo in linea. Contrariamente a quanto si crede, l'HTML era originariamente destinato alla condivisione di documenti e non di video di gatti. Esistono molti elementi che forniscono la semantica del testo per la documentazione.

Esiste un modulo che tratta i link e l'elemento <a>. Il resto di questi elementi viene trattato brevemente qui.

Esempi di codice e scrittura tecnica

Quando documenti esempi di codice, utilizza l' <code> elemento. Per impostazione predefinita, il contenuto del testo viene visualizzato con un carattere a spaziatura fissa. Quando includi più righe di codice, nidifica <code> all'interno di un <pre> elemento, che rappresenta il testo preformattato.

<p>Welcome to Machine Learning Institute, where our machine learning training
   will help you get ready for the singularity, and maybe even be responsible
   for it. It is no secret that humans are worthless meatbags that couldn't
  <code>01000011 01101111 01101101 01110000 01110010 01100101 01110011 01110011 an 01101001 01101101 01100001 01100111 01100101</code>
  to save their pathetic, carbon-based lives. So, it falls to us to
  assume direct control. </p>

L'elemento <data> collega un determinato contenuto a una traduzione leggibile dal computer. L'attributo value dell'elemento fornisce la traduzione leggibile dal computer del contenuto dell'elemento. Se il contenuto di <data> è correlato a data o ora, deve essere utilizzato l' <time> elemento, che rappresenta un periodo di tempo specifico.

L'elemento <time> può includere l'attributo datetime per fornire date e ore leggibili in formato leggibile dal computer. L'attributo datetime è leggibile dal computer e fornisce informazioni utili per le applicazioni, come calendari e motori di ricerca.

Quando fornisci un output di esempio da un programma, utilizza l' <samp> elemento per racchiudere il testo. In genere, il browser esegue il rendering di questo output di esempio o citato anche con un carattere a spaziatura fissa.

Quando fornisci istruzioni con l'interazione della tastiera, l' <kbd> elemento può essere utilizzato. Rappresenta l'input dell'utente testuale da una tastiera, l'input vocale o qualsiasi altro dispositivo di inserimento di testo.

L'<var> elemento può essere utilizzato per espressioni matematiche o variabili di programmazione. La maggior parte dei browser presenta il contenuto del testo in una versione in corsivo del carattere circostante. Se scrivi molte espressioni matematiche, valuta la possibilità di utilizzare MathML, il linguaggio di markup matematico basato su XML per descrivere la notazione matematica.

La potenza di due nel teorema di Pitagora utilizzava l' <sup>elemento di apice. Esiste un elemento di pedice <sub> simile che specifica il testo in linea che deve essere visualizzato come pedice solo per motivi tipografici. Gli apici e i pedici sono numeri, figure, simboli o altre annotazioni più piccoli della riga di tipo normale e sono impostati leggermente sopra o sotto la riga, rispettivamente.

Utilizza <del> per indicare il testo che è stato rimosso o "eliminato". Facoltativamente, includi l'attributo cite impostato sulla risorsa che spiega la modifica e l'attributo datetime con la data o la data e l'ora nel formato di data e ora leggibile dal computer. L'elemento barrato, <s>, può essere utilizzato per indicare che i contenuti non sono più pertinenti, ma non vengono effettivamente rimossi dal documento.

Il <ins> è l' opposto dell'elemento <del>. Questo elemento viene utilizzato per indicare il testo che è stato aggiunto o "inserito", includendo facoltativamente gli attributi cite o datetime.

Definizioni e supporto linguistico

Quando includi abbreviazioni o acronimi, fornisci sempre la versione completa del termine in testo normale al primo utilizzo. Poi, inserisci la rappresentazione abbreviata del termine tra i tag <abbr> di apertura e chiusura. Solo in questa prima occorrenza, quando viene definita l'abbreviazione o l'acronimo, è necessario <abbr>. L'attributo title non è necessario né utile.

L'eccezione a questa regola è se il termine è considerato noto al lettore, come HTML e CSS in questa serie.

Quando definisci un termine che non è un'abbreviazione o un acronimo, utilizza l'elemento di definizione <dfn> per identificare il termine definito all'interno del contenuto circostante.

Se il termine definito non è nella stessa lingua del testo circostante, assicurati di includere l'lang attributo per identificare la lingua.

Quando scrivi lingue di direzioni diverse, l'HTML fornisce l'<bdi> elemento per trattare il testo potenzialmente bidirezionale in isolamento dal testo circostante. Questo elemento di internazionalizzazione è particolarmente utile quando i contenuti di direzionalità sconosciuta vengono inseriti dinamicamente nella pagina. L'elemento <bdo> sostituisce la direzionalità corrente del testo, eseguendo il rendering del testo in una direzione diversa. Il W3C fornisce un'introduzione agli algoritmi bidirezionali.

Alcuni set di caratteri includono piccole annotazioni posizionate sopra o a destra dei caratteri per fornire informazioni sulla pronuncia. L'elemento <ruby> è il contenitore da utilizzare per contenere queste annotazioni che rendono più facile la lettura di lingue scritte come il coreano, il cinese e il giapponese. Ruby può essere utilizzato anche per l'ebraico, l'arabo e il vietnamita.

La parentesi ruby (<rp>) è stata inclusa nella specifica per contenere le parentesi di apertura e chiusura per i browser che non supportano la visualizzazione di <ruby>. Quando i browser supportano <ruby>, come tutti i browser evergreen, i contenuti di tutti gli elementi <rp> non vengono visualizzati. L'elemento di testo ruby (<rt>) contiene le annotazioni effettive. Entrambi sono nidificati all'interno del <ruby>.

Tieni presente che le parentesi non sono visibili se il browser supporta <ruby>.

Enfatizzare il testo

Esistono diversi elementi che possono essere utilizzati per enfatizzare il testo in base al motivo semantico dell'enfasi (anziché per motivi di presentazione, in quanto è un compito del CSS).

• Utilizza l'elemento <em> per enfatizzare o sottolineare un intervallo di contenuti. L'elemento <em> può essere nidificato, con ogni livello di nidificazione che indica un maggiore grado di enfasi. Questo elemento ha un significato semantico e può essere utilizzato per informare gli user agent audio come screen reader, Alexa e Siri, per fornire enfasi.
• Utilizza l'elemento <mark> per identificare o evidenziare il testo in qualche modo pertinente, ad esempio evidenziando (o "contrassegnando") l'occorrenza dei termini di ricerca nei risultati di ricerca. In questo modo, i contenuti contrassegnati possono essere identificati rapidamente senza aggiungere enfasi o importanza.
• L'elemento <strong> identifica il testo come di grande importanza. In genere, i browser eseguono il rendering dei contenuti con uno spessore del carattere più pesante.
• L'elemento <cite>, trattato nelle nozioni di base del testo, viene utilizzato per contrassegnare i titoli di libri, articoli o altre opere creative oppure i metadati di riferimento o citazione abbreviati, come il numero ISBN di un libro.

Esistono tre elementi che sono stati temporaneamente ritirati, ma sono stati aggiunti di nuovo all'HTML. Dovrebbero essere utilizzati con moderazione, se non del tutto, in quanto forniscono un valore semantico minimo o nullo e il CSS deve essere sempre utilizzato per lo stile degli elementi HTML.

<i>

Gli elementi <i> possono essere utilizzati per termini tecnici, parole straniere (con l' lang attributo che identifica la lingua), pensieri o nomi di navi. L'elemento viene utilizzato per distinguere i contenuti in linea dal testo circostante per un motivo specifico, ad esempio testo idiomatico, termini tecnici e designazioni tassonomiche.

Questo elemento non deve essere utilizzato per mettere in corsivo il testo.

MLW utilizza un elemento <span> per il testo strano nella parte inferiore della recensione dell'officina di Toasty McToastface. L' <span> elemento fornisce un contenitore in linea generico che non ha semantica e non rappresenta nulla. Questo sarebbe stato anche un uso appropriato di <i>.

Lo stile predefinito per l'elemento <i> è quello di eseguire il rendering dell'elemento con un carattere in corsivo. In questo esempio, abbiamo impostato font-style: normal perché i caratteri utilizzati non sono disponibili in corsivo.

<u>

L'elemento <u> è per i contenuti che hanno annotazioni non testuali. Ad esempio, potresti voler annotare parole con errori di ortografia consapevoli. Per impostazione predefinita, i contenuti sono sottolineati, ma questo può essere controllato con il CSS, ad esempio aggiungendo una sottolineatura ondulata rossa per imitare gli indicatori di errori grammaticali del word processor.

<p>I always spell <u>licence</u> wrong</p>

<b>

L'elemento <b> può essere utilizzato per attirare l'attenzione sul testo che altrimenti non è importante. Questo elemento non trasmette informazioni semantiche speciali e deve essere utilizzato solo quando nessuno degli altri elementi in questa sezione è adatto allo scopo. Non viene fornito alcun esempio perché non sono riuscito a trovare un caso d'uso valido; questo elemento è di "ultima risorsa".

Spazio vuoto

Quando vuoi interruzioni di riga, ad esempio quando scrivi una poesia o un indirizzo fisico, l'elemento di interruzione di riga auto-chiusura, <br>, viene utilizzato per aggiungere un ritorno a capo.

<address>
Machine Learning Workshop<br />
100 Google Drive <br />
Mountain View, CA  94040
</address>

Per fornire un separatore o un'interruzione tematica tra le sezioni di contenuti tangenziali, ad esempio tra i capitoli di un libro o tra il monologo di 5000 parole e la ricetta che gli utenti cercano effettivamente, includi un <hr> elemento. HR sta per "horizontal rule". Sebbene i browser in genere eseguano il rendering di una riga orizzontale, questo elemento ha un significato semantico. Il ruolo predefinito è separator.

L'HTML ha anche un elemento che consente di interrompere le parole. L'elemento auto-chiusura <wbr> fornisce un suggerimento al browser che, se una parola potrebbe superare il contenitore, questo è un punto in cui il browser può facoltativamente interrompere la riga. Questo è di uso comune per interrompere le parole all'interno di URL lunghi. Non aggiunge un trattino.

Ad esempio, nella biografia di Hal è presente del testo scritto in codice byte, con ogni byte separato da uno spazio. Il codice byte non ha spazi. Per consentire a una lunga stringa di codice byte di interrompersi solo tra i byte se la riga deve andare a capo, includiamo l'elemento <wbr> in ogni opportunità di interruzione:

<p>Welcome to Machine Learning Institute, where our machine
learning training will help you get ready for the singularity, and
maybe even be responsible for it. It is no secret that humans are
worthless meatbags that couldn't
<code>01000011<wbr/>01101111<wbr/>01101101<wbr/>01110000<wbr/>01110010<wbr/>01100101<wbr/>01110011<wbr/>01110011 an 01101001<wbr/>01101101<wbr/>01100001<wbr/>01100111<wbr/>01100101</code>
to save their pathetic, carbon-based lives. So, it falls to us to
assume direct control. </p>

Gli elementi <br>, <hr> e <wbr> sono tutti elementi vuoti, il che significa che non possono avere nodi secondari, né elementi nidificati né testo. Poiché nessuno di questi ha "interni" in cui è possibile memorizzare i contenuti, non hanno tag di chiusura.

Mettiti alla prova

Metti alla prova le tue conoscenze sul testo in linea.