Formattare il testo con HTML

Quando si tratta di pagine web, la cosa principale alla quale dedicare maggior attenzione è il contenuto. Un contesto formattato in maniera approssimativa per quanto interessante potrebbe ottenere un effetto completamente inverso.

In questa lezione vediamo come si formatta un testo con i tag HTML, ne abbiamo parecchi a disposizione. Quindi rimbocchiamoci le maniche.

Paragrafi in HTML

Per creare un paragrafo in HTML si usa il tag <p> (paragraph). L’elemento in sé accoglie una vastissima quantità di tag, la maggior parte la vedremo proprio durante questa lezione.

Paragrafi HTML e accessibilità

Spezzare il contenuto in paragrafi aiuta a rendere le pagine più accessibili perché gli screen-reader e altri dispositivi di tecnologia assistiva forniscono scorciatoie per saltare da un paragrafo all’altro.

Usare paragrafi vuoti per creare spazio tra gli elementi è una pratica sconsigliata proprio per questo motivo. Ci sono tag più indicati per fare queste cose, come ad esempio <br />.

Esempi di paragrafi HTML

1<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae consequatur necessitatibus repellat maiores est dignissimos ipsa officiis cum, tenetur fugiat! Omnis, aliquam! Maxime explicabo a, eos molestias facilis quo incidunt?</p>

Pro tip: In Visual Studio Code puoi avvalerti di emmet per scrivere più velocemente i paragrafi (o i tag in generale).

Per creare il paragrafo dell’esempio puoi scrivere:

• p>lorem
• p*3>lorem (genera tre paragrafi con il testo segnaposto all’interno)

Intestazioni H1-H6

Gli heading sono sei: h1, h2, h3, h4, h5 e h6.

Ogni elemento rappresenta un livello differente del contenuto del documento. <h1> è l’intestazione principale, <h2>, rappresenta le sotto intestazioni, <h3> le sotto sotto intestazioni e così via.

Intestazioni HTML e accessibilità

I titoli vengono usati per navigare il contenuto saltando solo alle parti che più interessano. Usare heading non ordinati (es. h1, h3, h5) può creare confusione.

Bisogna quindi seguire una struttura ordinata (es. h1, h2, h3, h3, h2, ecc.).

Un esempio di ottima struttura degli heading la puoi trovare su Wikipedia, il modo in cui il contenuto è organizzato è perfetto per comprendere a pieno come usare in maniera corretta questi tag.

Esempi di heading HTML

1<h1>Lorem ipsum</h1>
2<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti optio similique sapiente, recusandae, necessitatibus vel est mollitia quis ipsam sit distinctio deserunt incidunt! Corrupti minima ea deserunt neque reiciendis sapiente.</p>
3<h2>Dolor sit amet</h2>
4<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae consequatur necessitatibus repellat maiores est dignissimos ipsa officiis cum, tenetur fugiat! Omnis, aliquam! Maxime explicabo a, eos molestias facilis quo incidunt?</p>
5<p>Magnam debitis asperiores atque laudantium ducimus eius repellendus molestias soluta. Expedita eaque voluptatibus alias placeat recusandae nemo laborum, maiores vitae voluptate fugiat praesentium sit quos consequatur repudiandae omnis esse quod?</p>
6<h3>consector elit</h3>
7<p>Error, dolorum debitis? Quibusdam dolor vero saepe quisquam, voluptatem dicta eos. Voluptas dolorum eius, beatae soluta recusandae molestiae vitae praesentium rerum ab iste nostrum quasi suscipit iure ea enim! Ipsam.</p>

Alcuni screen reader possono anche generare una lista di tutti gli heading della pagina creando un indice di facile consultazione.

I tag <hn> vengono usati anche per etichettare le sezioni. Possiamo usare l’attributo aria-labelledby per indicare il nome della sezione, affinché gli screen reader possano distinguere meglio le suddivisioni.

Creare un contenuto ben organizzato

Quando strutturiamo un documento, dobbiamo tenere a mente quindi giusto qualche regolina:

• Un solo <h1> per pagina
• I tag <h2-6> devono seguire una specifica gerarchia e non usati a casaccio perché ci serve un testo più grande o più piccolo
• Per quanto siano disponibili, un contenuto che hai bisogno di tutti gli heading diventa comunque difficile da navigare, quindi in questi casi è preferibile spezzare il contenuto in più pagine.
• Strutturare un contenuto con paragrafi e tag rende più facile per l’utente scansionare il contenuto alla ricerca di ciò che gli serve.
• I motori di ricerca considerano i contenuti degli heading come parole chiave importanti che possono quindi influenzare il posizionamento.
• Gli utenti con gravi problemi alla vista non leggono, ma ascoltano. I software di screen reading usano i titoli per permettere all’utente di navigare più velocemente la pagina. Senza titoli saranno costretti a sorbirsi tutto il contenuto.

Semanticamente parlando

Usare titoli e paragrafi in modo opportuno è utile per una questione semantica. Con CSS si possono modificare tag, come span, per assomigliare ad un h1, ma span non ha lo stesso significato.

span, semanticamente parlando, non ha proprio significato.

Enfatizzare e dare importanza

Qui, ammetto che le che cose si fanno abbastanza confuse, ma prometto che alla fine ci capirai qualcosa.

HTML ha a disposizione svariati elementi semantici, utili per la formattazione del testo e di conseguenza per alterarne il significato.

• Per enfatizzare una o più parole: <em> e <i>
• Per dare importanza: <strong> e <b>
• Per sottolineare: <u>

Quando bisogna usare cosa?

<strong>, <em>, <i>, <b> e <u> che confusione.

Generalmente possiamo tenere a mente questo:

• <i> può essere usato per: parole straniere, designazioni tassonomiche, termini tecnici e pensieri
• <b> può essere usato per: parole chiave, nomi di prodotto, frasi principali
• <u> può essere usato per: nomi propri, errori di battitura

Semanticamente sono più indicati <strong> ed <em> per comunicare una maggior importanza nel caso del primo e per stressare l’accento su una particolare parola.

In particolare <em> viene anche letto con accento differente dagli screen reader.

Esempi di enfatizzazione del testo in HTML

1<!-- Designazione tassonomica -->
2<p>L'essere umano è della specie <i>homo sapiens</i>.</p>
3<!-- Parola straniera -->
4<p>Ciao in inglese si scrive <i lang="en">hello</i>.</p>
5<!-- Errore di battitura -->
6<p>Questa frase ha un <u>erore</u> di battitura</p>
7<!-- Evidenziare -->
8<p>Quando si scrive in HTML bisogna usare gli elementi <b>semanticamente corretti</b></p>
9<!-- Parti importanti -->
10<p><strong>Attenzione!</strong> Per poter procedere con l'acquisto <strong>devi registrarti</strong></p>
11<!-- Stressare una parola -->
12<p>Io <em>amo</em> cani e gatti</p>
13<!-- Parola importante e stressata -->
14<p>Io <strong><em>amo</em></strong> cani e gatti</p>

Anche u, b e i possono essere usati insieme, ma bisogna sempre tenere da conto i casi d’uso elencati in precedenza.

Citazioni

Se una parte del documento (paragrafi, liste, ecc.) è citata altrove bisogna inserirla tra <blockquote>, includendo anche l’attributo cite per citare la fonte.

Se non vogliamo creare un blocco separato, ma vogliamo inserire la citazione in mezzo ad un paragrafo possiamo usare <q> sempre accompagnato da cite.

Per quanto sia utile citare la fonte con l’attributo cite, non viene preso molto in considerazione e non è nemmeno visibile. Se vogliamo mostrare quindi l’origine della citazione possiamo usare il tag <cite> insieme ai tag precedenti.

Esempi di citazioni in HTML

1<blockquote cite="https://www.google.com">Trovo insopportabile la sua mancanza di fede. - <cite><a href="https://starwars.fandom.com/wiki/Anakin_Skywalker">Darth Vader</a></cite></blockquote>
2<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores fuga placeat similique nobis blanditiis dolores at voluptates tempora? <q cite="https://www.google.com">Non mi piace la sabbia</q> - <cite>Anakin Skylwalker</cite> perspiciatis repellat quibusdam voluptatibus, accusamus ipsum sequi fugit?</p>

Abbreviazioni

<abbr> permette di contrassegnare delle abbreviazioni, come ad esempio HTML o CSS. Il tag ha l’attributo title che può essere usato per espandere il significato dell’abbreviazione qualora non fosse possibile spiegarlo direttamente nel contenuto. Se la frase è la definizione dell’abbreviazione <abbr> può essere usato insieme a <dfn>.

Esempi di abbreviazioni e definizioni in HTML

1<p><abbr>HTML</abbr> è un linguaggio a marcatori utile per poter creare pagine web</p>
2<p><abbr title=”Hyper Text Markup Language”>HTML</abbr> è un linguaggio a marcatori utile per poter creare pagine web</p>
3<p><dfn>Hyper Text Markup Language</dfn> (<abbr>HTML</abbr>) è un linguaggio a marcatori utile per poter creare pagine web.</p>

Indirizzi

Esempi d’utilizzo di address

1<address>Se vuoi contattarmi per maggiori informazioni scrivimi a <a href="mailto:manuel@webtea.it">manuel@webtea.it</a> Oppure unisciti alla community su <a href="#">Discord</a></address>

Apice e pedice

Se vuoi inserire una formula chimica in HTML puoi farlo grazie all’uso di (apice) e (pedice).

1<p>Questa è una formula chimica: H<sub>2</sub>O</p>
2<p>E=mc<sup>2</sup>

Codice

Per rappresentare il codice abbiamo diversi tag a disposizione, ognuno con il suo scopo:

• <code>: per contrassegnare un generico pezzo di codice
• <pre>: per blocchi di codice (mantiene l’indentazione)
• <var>: nomi di variabili
• <kbd>: per contrassegnare input da tastiera (es. Ctrl + S)
• <samp>: Output di un programma

Esempi di rappresentazione del codice in HTML

1<code>p { color: red }</code>
2<pre>
3    <code>
4        let a = 10;
5        let b = 20;
6        let risultato = a + b;
7    </code>
8</pre>
9<p>Dichiara nel tuo codice la variabile <var>risultato</var> alla quale assegnare il valore della somma.</p>
10<p>Per poter attivare la ricerca sul sito puoi usare la shortcut <kbd>Ctrl</kbd> + <kbd>K</kbd></p>
11<p>Una volta completata la scansione, il terminale mostrerà la frase <samp>Scansione completata.</samp></p>

Data e ora

<time> con l’ausilio del suo attributo datetime permette di fornire una data in formato comprensibile per la macchina.

A cosa serve? Abbiamo mille modi di scrivere le date con <time> possiamo mettere a disposizione di un ipotetico script una data formattata per essere “digerita” tranquillamente dall’algoritmo senza necessità di trasformarla.

Esempi di data e ora in HTML

1<p>La data e l'ora del concerto è <time datetime="2024-08-20T15:30">20 agosto 2024 alle 15:30</time></p>