Abbiamo trattato la maggior parte degli elementi HTML, ma non tutti. Un'area non trattata riguarda gli elementi di testo in linea.
Contrariamente a quanto si crede, in origine il codice HTML era stato ideato per la condivisione di documenti e non per i video di gatti. Ci sono molti elementi che forniscono
la semantica del testo per la documentazione. C'è un modulo che copre i link e l'elemento <a>. Gli altri elementi
verranno discussi brevemente qui.
Esempi di codice e scrittura tecnica
Quando documenti esempi di codice, usa l'elemento <code>. Per impostazione predefinita, i contenuti del testo vengono visualizzati in carattere monospazio. Se includi più righe di codice, nidifica <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 automaticamente; l'attributo value dell'elemento fornisce la traduzione leggibile automaticamente dei contenuti
dell'elemento. Se i contenuti <data> sono correlati all'ora o alla data, deve essere utilizzato l'elemento <time>, che rappresenta un periodo di tempo specifico.
L'elemento <time> può includere l'attributo datetime per fornire ore e date in un formato leggibile dal computer.
Poiché è leggibile dalle macchine, l'attributo datetime fornisce informazioni utili per applicazioni come calendari e motori di ricerca.
Quando fornisci un output di esempio da un programma, utilizza l'elemento <samp> per racchiudere il testo. In genere il browser esegue il rendering dell'output di esempio o tra virgolette in un carattere monospaziato.
Quando fornisci istruzioni per l'interazione da tastiera, è possibile utilizzare l'elemento <kbd>. Rappresenta l'input testuale dell'utente da una tastiera, un input vocale o qualsiasi altro dispositivo di inserimento testo.
L'elemento <var> può essere utilizzato per espressioni matematiche o
variabili di programmazione. La maggior parte dei browser presenta i contenuti testuali in una versione in corsivo del carattere circostante.
Se devi scrivere molte righe matematiche, potresti usare MathML, il Mathematical Markup Language basato su XML per descrivere la notazione matematica.
La potenza di due nel teorema di Pitagora ha usato l'elemento apice <sup>. Esiste un elemento pedice <sub> simile che specifica
il testo in linea che deve essere visualizzato come pedice unicamente per motivi tipografici. Gli apici e i pedice sono numeri, figure, simboli o altre annotazioni più piccole rispetto alla normale riga di tipo e, rispettivamente, leggermente al di sopra o al di sotto della riga.
Utilizza <del> per indicare il testo che è stato rimosso o "eliminato".
Se vuoi, includi l'elemento cite impostato sulla risorsa che spiega
la modifica e l'attributo datetime con
data o data e ora in formato data e ora leggibile dalla macchina. L'elemento barrato, <s>,
può essere utilizzato per indicare che i contenuti non sono più pertinenti, ma non sono effettivamente rimossi dal documento.
<ins> è l'opposto dell'elemento <del>; viene utilizzato
per indicare il testo che è stato aggiunto, o "inserito", includendo facoltativamente anche gli attributi cite o datetime.
Definizioni e supporto linguistico
Quando includi abbreviazioni o acronimi, fornisci sempre la versione estesa completa del termine in testo normale al primo utilizzo, man mano che introduci la rappresentazione abbreviata del termine tra i tag <abbr> di apertura e chiusura, a meno che il termine sia noto al lettore, ad esempio "HTML" e "CSS" in questa serie. È necessario <abbr> solo per questa prima occorrenza,
quando si definiscono l'abbreviazione o l'acronimo. L'attributo title non è necessario né utile.
Quando definisci un termine che non è un'abbreviazione o un acronimo, utilizza l'elemento di definizione <dfn> per identificare il termine definito all'interno dei contenuti circostanti.
Se il termine definito non è nella stessa lingua del testo circostante, assicurati di includere l'attributo lang per identificare la lingua.
Quando si scrivono linguaggi in direzioni diverse, HTML fornisce l'elemento <bdi>
per trattare un testo potenzialmente bidirezionale separatamente dal testo circostante. Questo elemento di internazionalizzazione è particolarmente utile quando contenuti con direzionalità sconosciuta vengono inseriti dinamicamente nella pagina. L'elemento
<bdo> sostituisce l'attuale direzione del testo,
visualizzando il 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 semplificano la lettura di lingue scritte come il coreano, il cinese e il giapponese. Il rubino
può essere usato anche per l'ebraico, l'arabo e il vietnamita.
La parentesi rubino (<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>, cosa che tutti i browser evergreen supportano, i contenuti degli elementi <rp> non vengono visualizzati. L'elemento di testo rubino (<rt>) contiene
le annotazioni effettive. Entrambi sono nidificati all'interno di <ruby>.
Tieni presente che le parentesi non sono visibili se il tuo browser supporta <ruby>.
Enfasi sul testo
Esistono diversi elementi che possono essere utilizzati per enfatizzare un testo in base al motivo semantico per enfatizzare il testo (anziché per motivi di presentazione, poiché questo è un compito per CSS).
- Utilizza l'elemento
<em>per mettere in evidenza o sottolineare una serie di contenuti. L'elemento<em>può essere nidificato e ogni livello di nidificazione indica un maggior 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, in modo da dare enfasi. - Utilizza l'elemento
<mark>per identificare o evidenziare il testo in qualche modo pertinente, ad esempio per evidenziare (o "contrassegnare") l'occorrenza dei termini di ricerca nei risultati di ricerca. Ciò consente di identificare rapidamente i contenuti contrassegnati senza aggiungere enfasi o importanza. - L'elemento
<strong>indica che il testo ha un'elevata importanza. In genere i browser eseguono il rendering dei contenuti con caratteri dallo spessore maggiore. - L'elemento
<cite>, trattato nelle nozioni di base del testo, viene utilizzato per contrassegnare i titoli di libri, articoli o altre opere creative oppure per contrassegnare i riferimenti abbreviati o i metadati delle citazioni, ad esempio il codice ISBN di un libro.
Esistono tre elementi che sono stati temporaneamente ritirati, ma che sono stati aggiunti di nuovo in HTML. Esse devono essere usate con parsimonia, perché offrono poco o nessun valore semantico e CSS dovrebbe essere sempre impiegato per applicare stili agli elementi HTML.
<i>
Gli elementi <i> possono essere utilizzati per termini tecnici, parole straniere
(di nuovo, con l'attributo lang che identifica la
lingua), pensieri o nomi di navi. L'elemento viene utilizzato per differenziare 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 semplicemente per mettere il testo in corsivo.
MLW utilizza un elemento <span> per il testo strano in fondo alla recensione del workshop di Toasty McToastface. L'elemento <span>
fornisce un contenitore in linea generico che non ha semantica e non rappresenta nulla. Anche questo sarebbe stato un uso 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 usati non sono disponibili in corsivo.
<u>
L'elemento <u> è destinato ai contenuti con annotazioni non testuali. Ad esempio, potresti voler annotare parole con errori ortografici. Per impostazione predefinita, i contenuti sono sottolineati, ma ciò può essere controllato con CSS, ad esempio aggiungendo una sottolineatura rossa ondulata per simulare gli indicatori di errore grammaticale dell'elaboratore di testi.
<p>I always spell <u>licence</u> wrong</p>
<b>
L'elemento <b> può essere utilizzato per attirare l'attenzione su testi non
altrimenti importanti. Questo elemento non trasmette informazioni semantiche speciali e deve essere utilizzato solo quando nessuno degli altri elementi in questa sezione è adatto allo scopo. Non mi è stato fornito alcun esempio perché non ho potuto trovare un caso d'uso valido; ecco perché questo elemento è "ultima risorsa".
Spazi vuoti
Quando vuoi inserire interruzioni a righe, ad esempio quando scrivi poesie o un indirizzo fisico, viene utilizzato l'elemento di interruzione di riga <br> per aggiungere un ritorno a capo.
<address>
Machine Learning Workshop<br />
100 Google Drive <br />
Mountain View, CA 94040
</address>
Per creare un separatore, o 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 stanno effettivamente cercando, includi un elemento <hr>. La HR è l'acronimo di "Horizontal righe" (regola orizzontale). Sebbene i browser generalmente mostrino una linea orizzontale, questo elemento ha un significato semantico. Il ruolo predefinito è separator.
Anche nel codice HTML è presente un elemento che consente di interrompere le parole. L'elemento <wbr> che si chiude automaticamente fornisce un suggerimento al browser secondo cui, se una parola potrebbe superare il contenitore, è in questo punto che il browser può facoltativamente interrompere la riga. Viene comunemente utilizzata per separare le parole
all'interno di URL lunghi. Non aggiunge un trattino.
Ad esempio, nella biografia Hal c'è testo scritto in codice in byte, con ogni byte separato da uno spazio. Il codice byte non contiene spazi. Per fare in modo che una lunga stringa di codice di byte si interrompa solo tra i byte quando è necessario un wrapping della riga, 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 void, ovvero non possono avere nodi figlio, né elementi
nidificati né testo. Poiché nessuno di questi ha un "interno" in cui è possibile archiviare i contenuti, non ha un tag finale.
Verifica le tue conoscenze
Verifica la tua conoscenza del testo in linea.
Quale elemento deve essere usato per visualizzare un esempio di codice?
<code><data><kbd>A cosa serve l'elemento <ruby>?