Nozioni di base sul testo

In modo simile a come il tuo editor di testo fornisce intestazioni da <h1> a <h6>, oltre a tantissimi modi per formattare sezioni di testo in modo significativo e visivo, HTML fornisce un insieme molto simile di elementi semantici e non semantici per dare significato alla prosa.

Questa sezione illustra i modi principali per eseguire il markup di testi o nozioni di base sul testo. Parleremo degli attributi prima di scoprire altri modi per eseguire il markup del testo, come elenchi, tabelle e moduli.

Titoli rivisitati

Esistono sei elementi di intestazione di sezione, <h1>, <h2>, <h3>, <h4>, <h5> e <h6>; <h1> è il più importante e <h6> il meno. Per molti anni, agli sviluppatori è stato detto che i browser utilizzavano le intestazioni per delineare i documenti. In origine questo era un obiettivo, ma i browser non hanno implementato le funzionalità di presentazione. Tuttavia, gli utenti di screen reader utilizzano le intestazioni come strategia di esplorazione per conoscere i contenuti della pagina, esplorando le intestazioni con la chiave h. Pertanto, assicurati che i livelli di intestazione siano implementati come faresti con un documento rende i tuoi contenuti accessibili ed è comunque molto incoraggiato.

Per impostazione predefinita, lo stile dei browser è <h1> il più grande e <h2> leggermente più piccolo, con ogni livello di intestazione successivo più piccolo per impostazione predefinita. È interessante notare che per impostazione predefinita i browser riducono anche le dimensioni del carattere <h1> in base al numero di elementi <article>, <aside>, <nav> o <section> in cui sono nidificati.

Alcuni fogli di stile dello user agent includono i seguenti selettori o simili per definire gli elementi <h1> nidificati come se fossero di livello meno importante:

h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}

Tuttavia, il modello a oggetti di accessibilità, o AOM, riporta comunque correttamente il livello dell'elemento; in questo caso, "intestazione, livello 1". Tieni presente che il browser non esegue questa operazione per altri livelli di intestazione. Detto questo, non utilizzare stili del browser basati sul livello di intestazioni. Anche se i browser non supportano la creazione di schemi, fai finta che lo sia. Esegui il markup delle intestazioni dei contenuti come se fosse il caso. In questo modo i tuoi contenuti avranno senso per motori di ricerca, screen reader e gestori futuri (che potresti essere tu stesso).

Oltre ai titoli, la maggior parte del testo strutturato è costituito da una serie di paragrafi. Nel codice HTML, i paragrafi vengono sottoposti a markup con il tag <p>. Il tag di chiusura è facoltativo, ma sempre consigliato.

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

Questa sezione non è un punto di riferimento perché non ha un nome accessibile. Per trasformarlo in un region, che è un ruolo di riferimento, puoi usare 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 se e quando opportuno. Un numero eccessivo di punti di riferimento può disorientare rapidamente gli utenti di screen reader.

Citazioni e citazioni

Quando esegui il markup di un articolo o di un post di un blog, puoi includere una citazione o una citazione, con o senza una citazione visibile. Esistono elementi per questi tre componenti: <blockquote>, <q> e <cite> per una citazione visibile oppure l'attributo cite per fornire ulteriori informazioni per la ricerca.

La sezione #feedback contiene un'intestazione e tre recensioni; si tratta di recensioni citate, alcune delle quali contengono citazioni, seguite da un paragrafo contenente la citazione della citazione. Omettendo la terza revisione per risparmiare spazio, il markup è:

Le informazioni sull'autore della citazione o sulla citazione non fanno parte della citazione e, pertanto, non rientrano nel <blockquote>, ma vengono dopo la citazione. Sebbene si tratti di citazioni nel senso laico del termine, in realtà non citano una risorsa specifica, quindi vengono racchiuse in un elemento paragrafo <p>.

La citazione appare su tre righe, tra cui 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, nelle poesie e nei blocchi di firme. Le interruzioni di riga non devono essere utilizzate come ritorno a capo per paragrafi separati. Puoi invece chiudere il paragrafo precedente e aprirne uno nuovo. L'uso dei paragrafi per i paragrafi non è utile solo per l'accessibilità, ma consente anche di applicare uno stile. L'elemento <br> è solo un'interruzione di riga; è influenzato da pochissime proprietà CSS.

Anche se abbiamo fornito informazioni sulle citazioni in un paragrafo che segue ogni citazione lunga, le citazioni mostrate in precedenza sono codificate in questo modo perché non provengono da una fonte esterna. Se lo fossero, la fonte può (dovrebbe?) essere citata.

Se la recensione è stata estratta da un sito web di recensioni, un libro o un'altra opera, l'elemento <cite> potrebbe essere utilizzato per il titolo di una fonte. I contenuti del <cite> possono 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'incapsulamento <cite> può essere utilizzato indipendentemente dal fatto che l'origine venga menzionata in passaggio o se la fonte viene citata o vi si fa riferimento. I contenuti del <cite> sono l'opera, non l'autore.

Se la citazione di Blendan smooth è stata tratta dalla sua rivista offline, scriveresti l'citazione in questo modo:

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

Per accreditare i crediti quando non puoi rendere visibili i contenuti, esiste l'attributo cite che prende come valore l'URL del documento o del messaggio di origine per le informazioni citate. Questo attributo è valido sia su <q> sia su <blockquote>. Pur essendo un URL, è leggibile dal computer ma non è visibile al lettore:

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

La maggior parte dei browser aggiunge una spaziatura interna sia alle direzioni in linea di <blockquote> che ai contenuti <cite> in corsivo. Questa operazione può essere controllata con CSS. <blockquote> non aggiunge virgolette, ma è possibile aggiungerle ai contenuti generati da CSS. L'elemento <q> aggiunge le virgolette per impostazione predefinita, utilizzando le virgolette appropriate per la lingua.

Nella sezione #teachers, si dice che HAL dice: "Mi dispiace, ma temo di non poterlo fare". Il codice, in inglese e francese, è:

L'elemento delle virgolette incorporate, <q>, aggiunge le virgolette appropriate alla lingua. Gli stili predefiniti dello user agent includono contenuti generati con virgolette aperte e virgolette:

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

L'attributo lang viene incluso per indicare al browser che, sebbene la lingua di base della pagina sia stata definita come l'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, possono utilizzare la pronuncia francese. Comunica inoltre al browser il tipo di virgolette da visualizzare.

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

Entità HTML

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

Alcune altre entità che utilizzerai spesso sono © per il copyright (©), ™ per il marchio (TM) e   per lo spazio informativo. Gli spazi unificatori sono utili quando vuoi includere uno spazio tra due caratteri o parole e impedire che si verifichi un'interruzione di riga in quel punto. Esistono oltre 2000 riferimenti a caratteri con nome. Tuttavia, se necessario, ogni singolo carattere, incluse le 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 che sono presenti 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 può anche essere scritta come segue:

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

In questo disordine del codice ci sono alcuni caratteri non di escape e alcuni riferimenti a caratteri denominati. Poiché il set di caratteri è UTF-8, non è necessario eseguire l'escape degli ultimi caratteri della citazione in questione, come in questo esempio. Solo i caratteri non supportati dal set di caratteri devono essere preceduti da una sequenza di escape. Se necessario, sono disponibili numerosi strumenti per l'escape dei vari caratteri. In alternativa, puoi semplicemente includere <meta charset="UTF-8"> in <head>.

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

Ah, questa emoji è 😀, ma questo documento è dichiarato come UTF-8, quindi non contiene caratteri di escape.

Verifica la tua comprensione

Verifica la tua conoscenza del testo in HTML.