Abbiamo trattato la maggior parte degli elementi HTML, ma non tutti. Un'area che non abbiamo trattato sono gli 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 discusso brevemente qui.
Esempi di codice e scrittura tecnica
Quando documenti esempi di codice, utilizza l'elemento
<code>. Per
impostazione predefinita, i contenuti di testo vengono visualizzati con un carattere monospazio. Quando includi
più righe di codice, annida <code> all'interno di un
elemento <pre>,
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 dalla macchina del
contenuto dell'elemento. Se i contenuti <data> sono correlati a un periodo di tempo o a una data, deve essere utilizzato l'elemento
<time>, che rappresenta un periodo di tempo specifico.
L'elemento <time> può includere l'attributo datetime per fornire
date e ore comprensibili in formato leggibile dalla macchina. L'attributo datetime
è leggibile dal computer e fornisce informazioni utili per
applicazioni come calendari e motori di ricerca.
Quando fornisci un output di esempio di un programma, utilizza l'elemento
<samp>
per racchiudere il testo. Il browser in genere esegue il rendering di questo esempio o
dell'output tra virgolette anche con un carattere monospazio.
Quando fornisci istruzioni con l'interazione da tastiera, puoi utilizzare l'elemento
<kbd>. Rappresenta l'input di testo dell'utente da una tastiera, dall'input vocale o
da qualsiasi altro dispositivo di inserimento di testo.
L'elemento <var>
può essere utilizzato per espressioni matematiche o variabili di programmazione. La maggior parte dei browser
presenta i contenuti di testo in una versione in corsivo del carattere circostante.
Se scrivi molte espressioni matematiche, valuta l'utilizzo di
MathML, il linguaggio di markup
matematico basato su XML per descrivere la notazione matematica.
La potenza di due nel teorema di Pitagora utilizzava l'elemento
<sup> in apice. Esiste un elemento
<sub> in pedice
simile che specifica il testo in linea da visualizzare come pedice per
motivi puramente tipografici. Apici e pedici sono numeri, cifre,
simboli o altre annotazioni più piccole della normale riga di testo e
sono impostati leggermente sopra o sotto la riga, rispettivamente.
Utilizza <del> per indicare il testo che è stato rimosso o "eliminato".
(Facoltativo) Includi cite impostato sulla risorsa che spiega
la modifica e l'attributo datetime con la
data o la data e l'ora in formato leggibile automaticamente. L'elemento sbarrato, <s>,
può essere utilizzato per indicare che i contenuti non sono più pertinenti, ma non vengono effettivamente rimossi dal documento.
L'elemento <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 delle lingue
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 l'abbreviazione o l'acronimo viene
definito, è necessario <abbr>. L'attributo title non è necessario né utile.
L'eccezione a questa regola si verifica se il termine è noto al lettore, ad esempio HTML e CSS in questa serie.
Quando definisci un termine che non è un'abbreviazione o un acronimo, utilizza l'elemento
<dfn>
per identificare il termine che viene definito all'interno del contenuto circostante.
Se il termine da definire non è nella stessa lingua del testo circostante,
assicurati di includere l'attributo lang
per identificare la lingua.
Quando si scrivono lingue con direzioni diverse, HTML fornisce l'elemento <bdi> per trattare il testo potenzialmente bidirezionale in isolamento dal testo circostante. Questo elemento di internazionalizzazione
è particolarmente utile quando i contenuti con direzionalità sconosciuta vengono inseriti dinamicamente nella pagina. L'elemento
<bdo> sostituisce la direzionalità corrente del testo,
visualizzandolo 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 includere queste annotazioni che rendono più facile la lettura delle lingue scritte come il coreano, il cinese e il giapponese. Ruby
può essere utilizzato anche per ebraico, arabo e 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 di <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 questo è un compito per CSS).
- Utilizza l'elemento
<em>per enfatizzare o mettere in evidenza un intervallo di contenuti. L'elemento<em>può essere nidificato e ogni livello di nidificazione indica un maggiore grado di enfasi. Questo elemento ha un significato semantico e può essere utilizzato per informare gli user agent uditivi come screen reader, Alexa e Siri, per fornire enfasi. - Utilizza l'elemento
<mark>per identificare o evidenziare il testo che è 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. I browser di solito visualizzano i contenuti con uno spessore del carattere più pesante. - L'elemento
<cite>, trattato in Nozioni di base sul testo, viene utilizzato per contrassegnare i titoli di libri, articoli o altre opere creative oppure i metadati di un riferimento o di una citazione abbreviati per questi elementi, come il codice ISBN di un libro.
Tre elementi sono stati ritirati temporaneamente, ma sono stati nuovamente aggiunti a HTML. Devono essere utilizzati con parsimonia, se non del tutto, in quanto forniscono un valore semantico minimo o nullo e il CSS deve sempre essere utilizzato per lo stile degli elementi HTML.
<i>
Gli elementi <i> possono
essere utilizzati per termini tecnici, parole straniere (con l'attributo lang
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 il testo in corsivo.
MLW utilizza un elemento <span> per il testo strano nella parte inferiore della recensione dell'officina di Toasty
McToastface. L'elemento
<span>
fornisce un contenitore in linea generico che non ha semantica e
non rappresenta nulla. Questo sarebbe stato anche un utilizzo appropriato di <i>.
Lo stile predefinito per l'elemento <i> prevede il rendering dell'elemento 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 con annotazioni non testuali. Ad esempio, potresti voler
annotare parole scritte in modo errato intenzionalmente. Per impostazione predefinita, i contenuti sono sottolineati, ma
questo può essere controllato con CSS, ad esempio aggiungendo una sottolineatura rossa ondulata per
imitare gli indicatori di errore grammaticale dei programmi di elaborazione di testi.
<p>I always spell <u>licence</u> wrong</p>
<b>
L'elemento <b> può essere utilizzato per attirare l'attenzione su un testo che altrimenti non sarebbe importante. Questo elemento non trasmette informazioni semantiche speciali e deve essere utilizzato solo quando nessuno degli altri elementi di questa sezione è adatto allo scopo. Non viene fornito alcun esempio perché non sono riuscito a trovare un caso d'uso valido. Questo elemento è davvero "l'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 autochiudente,
<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 una pausa 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 stanno effettivamente cercando, includi un elemento <hr>. HR sta per "horizontal rule" (regola orizzontale). Sebbene i browser in genere eseguano il rendering di una linea 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 <wbr>
autochiusura fornisce al browser un suggerimento: se una parola potrebbe superare il contenitore, questo è un punto in cui il browser
può interrompere facoltativamente la riga. Viene comunemente utilizzato per separare le parole all'interno di
URL lunghi. Non aggiunge un trattino.
Ad esempio, nella biografia di Hal c'è un testo scritto in byte code, con ogni byte separato da uno spazio. Il codice byte
non contiene spazi. Per consentire a una lunga stringa di byte code di interrompersi solo tra i byte se la riga deve andare a capo, includiamo
l'elemento <wbr> in ogni punto 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 un "interno" in cui è possibile archiviare i contenuti, non hanno un tag di chiusura.
Verifica la tua comprensione
Metti alla prova le tue conoscenze sul testo incorporato.
Quale elemento deve essere utilizzato per visualizzare un esempio di codice?
<kbd><code><data>A cosa serve l'elemento <ruby>?