Nozioni di base sul testo

Analogamente a come l'editor di testo fornisce le intestazioni da <h1> a <h6>, oltre a una miriade di modi per formattare le sezioni di testo in modo significativo e visivo, HTML fornisce un insieme molto simile di elementi semantici e non semantici per dare un significato alla prosa.

Questa sezione illustra i modi principali per contrassegnare il testo o le nozioni di base del testo. Dopodiché parleremo degli attributi, prima di esplorare altri modi per contrassegnare il testo, come elenchi, tabelle e moduli.

Intestazioni, rivisitate

Esistono sei elementi di intestazione di sezione: <h1>, <h2>, <h3>, <h4>, <h5> e <h6>, dove <h1> è il più importante e <h6> il meno importante. Per molti anni, agli sviluppatori è stato detto che le intestazioni venivano utilizzate dai browser per delineare i documenti. In origine era un obiettivo, ma i browser non hanno mai implementato le funzionalità di delineazione dei documenti e l'algoritmo di delineazione proposto è stato ufficialmente rimosso dalla specifica HTML. Tuttavia, gli utenti di screen reader si affidano molto alle intestazioni come strategia di esplorazione per conoscere i contenuti di una pagina, navigando tra le intestazioni con il tasto h. Assicurarsi che i livelli di intestazione siano implementati in modo logico, come se si stesse delineando un documento, rende i contenuti accessibili ed è fortemente consigliato.

Per impostazione predefinita, i browser applicano lo stile <h1> come il più grande, <h2> leggermente più piccolo, con ogni livello di intestazione successivo più piccolo per impostazione predefinita. Storicamente, i fogli di stile dell'user agent diminuivano anche la dimensione del carattere degli elementi <h1> nidificati all'interno di elementi di sezionamento come <article>, <aside>, <nav> o <section>.

Alcuni fogli di stile dell'user agent includevano i seguenti selettori (o simili) per applicare lo stile agli elementi <h1> nidificati come se fossero livelli di intestazione inferiori:

/* Legacy UA stylesheet behavior (now removed from browsers and the HTML spec) */
h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}

Tuttavia, l'Accessibility Object Model (AOM) e gli screen reader non hanno mai modificato i livelli di intestazione in base alla nidificazione; un elemento <h1> nidificato veniva sempre segnalato come "intestazione, livello 1". Ciò ha creato una mancata corrispondenza in cui le intestazioni nidificate apparivano visivamente più piccole pur rimanendo intestazioni di primo livello per le tecnologie assistive.

Poiché la specifica HTML ha rimosso l'algoritmo di delineazione dei documenti, i browser hanno rimosso queste regole dei fogli di stile dell'user agent legacy. Di conseguenza, gli elementi <h1> nidificati mantengono la dimensione del carattere <h1> standard anziché ridursi automaticamente.

Non fare affidamento sulla nidificazione degli elementi <h1> all'interno degli elementi di sezionamento per lo stile visivo o la gerarchia strutturale. Contrassegna sempre i contenuti utilizzando elementi di intestazione sequenziali (<h1> fino a <h6>) in base alla struttura del documento. In questo modo, i contenuti sono chiari e accessibili ai motori di ricerca, agli screen reader e ai futuri manutentori.

Al di fuori delle intestazioni, la maggior parte del testo strutturato è costituita da una serie di paragrafi. In HTML, i paragrafi sono contrassegnati con il <p> tag; il tag di chiusura è facoltativo, ma è sempre consigliabile.

La sezione #about ha un'intestazione e alcuni paragrafi:

Questa sezione non è un punto di riferimento perché non ha un nome accessibile. Per trasformarla in una region, che è un ruolo di punto di riferimento, puoi utilizzare aria-labelledby per fornire il nome accessibile:

<section id="about"  aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>

Crea punti di riferimento solo quando e se necessario. Avere troppi punti di riferimento può diventare rapidamente disorientante per gli utenti di screen reader.

Citazioni e riferimenti

Quando contrassegni un articolo o un post del blog, potresti voler includere una citazione o una citazione in evidenza, con o senza un riferimento visibile. Esistono elementi per questi tre componenti: <blockquote>, <q> e <cite> per un riferimento visibile oppure l'attributo cite per fornire ulteriori informazioni per la ricerca.

La sezione #feedback contiene un'intestazione e tre recensioni; queste recensioni sono citazioni in blocco, alcune delle quali contengono citazioni, seguite da un paragrafo contenente il riferimento della citazione. Omettendo la terza recensione per risparmiare spazio, il markup è:

Le informazioni sull'autore della citazione o sul riferimento non fanno parte della citazione e quindi non sono incluse in <blockquote>, ma vengono dopo la citazione. Sebbene si tratti di riferimenti nel senso comune del termine, in realtà non fanno riferimento a una risorsa specifica, quindi sono racchiusi in un elemento paragrafo <p>.

Il riferimento viene visualizzato su tre righe, inclusi il nome dell'autore, il ruolo precedente e l'aspirazione professionale. L'interruzione di riga <br> crea un'interruzione di riga in un blocco di testo. Può essere utilizzato negli indirizzi fisici, nella poesia e nei blocchi di firma. Le interruzioni di riga non devono essere utilizzate come ritorno a capo per separare i paragrafi. Chiudi invece il paragrafo precedente e aprine uno nuovo. L'utilizzo di paragrafi per i paragrafi non è solo utile per l'accessibilità, ma consente anche di applicare lo stile. L'elemento <br> è solo un'interruzione di riga; è influenzato da pochissime proprietà CSS.

Sebbene abbiamo fornito informazioni sui riferimenti in un paragrafo dopo ogni citazione in blocco, le citazioni mostrate in precedenza sono codificate in questo modo perché non provengono da una fonte esterna. Se lo fossero, la fonte può (deve?) essere citata.

Se la recensione è stata estratta da un sito web di recensioni, da un libro o da un'altra opera, l'elemento <cite> può essere utilizzato per il titolo di una fonte. Il contenuto di <cite> può essere il titolo di un libro, il nome di un sito web o di un programma TV o persino il nome di un programma per computer. L'<cite> incapsulamento può essere utilizzato sia se la fonte viene menzionata di passaggio sia se la fonte viene citata o a cui si fa riferimento. Il contenuto di <cite> è l'opera, non l'autore.

Se la citazione di Blendan Smooth è stata tratta dalla sua rivista offline, scriveresti la citazione in blocco nel seguente modo:

L'elemento di riferimento <cite> non ha un ruolo implicito e deve ottenere il suo nome accessibile dai suoi contenuti; non includere un aria-label.

Per fornire il credito dovuto quando non puoi rendere visibili i contenuti, esiste l'attributo cite, il cui valore è l'URL del documento o del messaggio di origine per le informazioni citate. Questo attributo è valido sia per <q> che per <blockquote>. Sebbene sia un URL, è leggibile dalla macchina ma non visibile al lettore:

Sebbene il tag di chiusura </p> sia facoltativo (e sempre consigliato), il tag di chiusura </blockquote> è sempre obbligatorio.

La maggior parte dei browser aggiunge un riempimento a entrambe le direzioni in linea <blockquote> e applica il corsivo al contenuto <cite>; questa impostazione può essere controllata con CSS. L'elemento <blockquote> non aggiunge virgolette, ma queste possono essere aggiunte con contenuti generati da CSS. L'elemento <q> aggiunge le virgolette per impostazione predefinita, utilizzando virgolette appropriate per la lingua.

Nella sezione #teachers, HAL viene citato come se dicesse: "I'm sorry , but I'm afraid I can't do that, ." Il codice per questa citazione, in inglese e francese, è:

L'elemento di citazione in linea, <q>, aggiunge virgolette appropriate per la lingua. Gli stili predefiniti dell'user agent includono contenuti generati da open-quote e close-quote:

q::before {content: open-quote;}
q::after {content: close-quote;}

L'attributo lang è incluso per comunicare al browser che, sebbene la lingua di base della pagina sia stata definita come inglese nel tag di apertura <html lang="en-US">, questo paragrafo di testo è in una lingua diversa. In questo modo, i controlli vocali come Siri, Alexa e VoiceOver utilizzano la pronuncia francese. Informa inoltre il browser sul tipo di virgolette da eseguire il rendering.

Come <blockquote>, l'elemento <q> supporta l'attributo cite.

Entità HTML

Potresti aver notato la sequenza di escape o "entità". Poiché < viene utilizzato in HTML, devi eseguirne l'escape utilizzando < o una codifica meno facile da ricordare <. Esistono quattro entità riservate in HTML: <, >, & e ". I relativi riferimenti ai caratteri sono <, >, & e " rispettivamente.

Alcune altre entità che utilizzerai spesso sono © per il copyright (©), ™ per il marchio (™) e   per lo spazio unificatore. Gli spazi unificatori sono utili quando vuoi includere uno spazio tra due caratteri o parole impedendo che si verifichi un'interruzione di riga. Esistono oltre 2000 riferimenti ai caratteri denominati. Tuttavia, se necessario, ogni singolo carattere, inclusi gli emoji, ha un equivalente codificato che inizia con &#.

Se dai un'occhiata alla recensione del workshop di ToastyMcToastface (non inclusa nell'esempio di codice riportato sopra), noterai alcuni caratteri di testo insoliti:

<blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇</blockquote>

L'ultima frase di questa citazione in blocco può essere scritta anche come:

This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙
͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟
̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱
͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳
̯̮͇

In questo codice sono presenti alcuni caratteri senza escape e alcuni riferimenti ai caratteri denominati. Poiché il set di caratteri è UTF-8, gli ultimi caratteri della citazione in blocco non devono essere sottoposti a escape, come in questo esempio. Solo i caratteri non supportati dal set di caratteri devono essere sottoposti a escape. Se necessario, esistono molti strumenti per abilitare l'escape di vari caratteri, oppure puoi semplicemente assicurarti di includere <meta charset="UTF-8"> in <head>.

Anche quando specifichi il set di caratteri come UTF-8, devi comunque eseguire l'escape di < quando vuoi stampare quel carattere sullo schermo. In genere, non è necessario includere i riferimenti ai caratteri denominati per >, ", o &; tuttavia, se vuoi scrivere un tutorial sulle entità HTML, devi scrivere < quando insegni a qualcuno come codificare un <. 😀

Ah, e l'emoji del sorriso è 😀, ma questo documento è dichiarato come UTF-8, quindi non viene sottoposto a escape.

Mettiti alla prova

Metti alla prova le tue conoscenze sul testo in HTML.