Elementi HTML da conoscere in versione “parla come mangi”

Tutti i CMS hanno editor visuali per la formattazione dei contenuti, molto simile ai programmi di scrittura, che rende più scorrevole la lettura e informa il browser sul contenuto della pagina.

Conoscere alcuni elementi HTML base, da inserire addirittura manualmente, serve per capire esattamente a cosa servono e come usarli.

Cosa sono HTML e CSS l’ho scritto qualche tempo fa: ripeto brevemente, poi se avete tempo, buttate un occhio sul vecchio post per approfondire.

L’HTML (HyperText Markup Language) è un linguaggio di marcatura che serve a definire la struttura e i contenuti di una pagina web, mentre il CSS (Cascading Style Sheets) è il linguaggio che formatta i contenuti, cioè dice al browser come questi elementi devono essere visualizzati.

In soldoni: HTML =  la struttura, CSS = la presentazione

HTML: come è fatto un elemento

L’HTML è fatto di stringhe, racchiuse tra due segni di apertura e chiusura, che danno al browser informazioni su cosa è contenuto in una pagina.

Le pagine si aprono con una dichiarazione che dice “Ehi, questa è una pagina HTML” e poi hanno degli elementi al proprio interno che dicono cosa è contenuto in essa.

In pratica si scrive così:

<elemento>Informazione</elemento>

<elemento></elemento> sono i tag e la barra finale nel secondo serve a chiudere.

Ogni informazione ha il suo tag e se si conosce un po’ l’inglese sono abbastanza intuitivi:

• <p></p> sta per Paragrafo
• <h1></h1> fino a <h6></h6> sta per Titolo, in inglese Heading
• <ul></ul> e <ol></ol> indicano le liste (in inglese Unordered List e Ordered List)

E così via.

L’HTML 5 ha aggiunto alcuni importanti tag semantici che danno informazioni anche su “dove” si trovano gli elementi: ad esempio si usa <header></header>, invece di usare un elemento di blocco con il nome “header”, oppure <article></article> per avvertire il browser che quello che sta leggendo è un articolo.

Se non sviluppate siti in HTML o temi WordPress, dell’HTML5  non vi interessa nulla, quello che interessa voi sono alcuni elementi che risalgono all’HTML 4.01, rilasciato nel 1999 (quindi forza, non è che cambi ogni 5 minuti, imparate questi tag!).

Titoli

L’uso dei titoli nelle pagine web è una delle cose più maltrattate della storia perché molti li utilizzano come forme di abbellimento e grafica, quando invece sono un elemento fondamentale proprio per l’ottimizzazione per motori di ricerca.

Il browser non legge nulla di font, colori, ecc… ma “vede” quanto peso ha un elemento all’interno della pagina: per lui un Titolo 1 è più importante di un Titolo 2 e li leggerà in sequenza. I titoli vanno da 1 a 6.

Il Titolo 1 è riservato al titolo del sito e al titolo delle pagine e dei post, meglio non usarlo all’interno del testo. Lo dice anche il mitico Matt Cutts: un Titolo 1 per pagina.

Nel testo usate dal Titolo 2 in giù, in modo gerarchico: questo serve per dividere le sezioni del testo in brevi capitoli. Come dicevamo anche la scorsa settimana, i testi sul web non vengono letti parola per parola: l’occhio del lettore fa una scannerizzazione veloce, si concentra sulle prime righe e poi via via presta meno attenzione.

I titoli servono a favorire il processo di lettura e a dare informazioni significative a lettori e motori di ricerca. Raramente si arriva a usare tutti e 6: dipende davvero dalla lunghezza del testo, dalle informazioni in esso contenuto, ecc…

In WordPress li trovate nella seconda riga di formattazione, nel menu a tendina che inizia con “Paragrafo”.

Se volete scriverli da voi passate da “Visuale” a “Testo” e usate:

<h1>Titolo 1</h1>
<h2>Titolo 2</h2>
<h3>Titolo 3</h3>
<h4>Titolo 4</h4>
<h5>Titolo 5</h5>
<h6>Titolo 6</h6>

Liste

Un altro elemento da non sottovalutare: anche questo aiuta la lettura. Se vi vengono in mente:

• istruzioni con dei passi da seguire
• un elenco di “cose” di qualsiasi genere
• un testo che preveda paragrafi brevi, concatenati, non sufficientemente lunghi da meritarsi la struttura “Titolo + Paragrafo”.

usate una lista. Numerata se è una sequenza, a punti se l’ordine non è fondamentale.

Ricordate anche in questo caso la modalità di lettura a F: le prime parole vicine ai punti sono quelle che verranno lette prima quindi se avete qualcosa di importante da dire, che le persone non dovrebbero perdersi, scrivetelo all’inizio.

Le liste sono un po’ più complesse da scrivere a mano, ma vale la pena imparare, soprattutto nel caso vogliate mettere una lista dentro l’altra.

Questo:

<ul> /* Inizio della lista a punti
<li>Elemento della lista</li>
<li>Elemento della lista
<ol> /* Inizio della lista numerata
<li>Elemento della lista</li>
<li>Elemento della lista</li>
</ol> /* Chiusura della lista numerata
</li> /* Chiusura dell'elemento lista principale
<li>Elemento della lista</li>
<li>Elemento della lista</li>
</ul> /* Chiusura della lista a punti

Diventa questo:

• Elemento della lista
• Elemento della lista
  1. Elemento della lista
  2. Elemento della lista
• Elemento della lista
• Elemento della lista

Grassetti, corsivi, sottolineature

Grassettate, ma con un senso. Se in un testo ci sono più grassetti di testo normale, la sua utilità è immediatamente azzerata.

<strong>Parole da grassettare</strong>

Il corsivo vedo che ognuno lo usa con intenti diversi: sono sicura che esistano delle regole di scrittura che gli assegnano un significato preciso, io lo uso o per frasi in inglese oppure per dare enfasi a una parola. Lo uso molto poco.

<em>Parole in corsivo</em>

Sottolineate solo se strettamente necessario: 25 anni di web ci hanno insegnato che la sottolineatura spesso indica un link. Una volta era vero nel 100% dei siti: di default, se non si aggiunge un foglio di stile, un link viene presentato come un testo blu elettrico sottolineato.

Ora molti usano soluzioni più gradevoli all’occhio, ma comunque tenete presente questa cosa, perché appena vediamo una roba sottolineata siamo predisposti a cliccarci sopra.

Citazioni

L’ultimo elemento che vi presento è la citazione. Qui faccio un mea culpa, io lo uso anche per formattare una paragrafo che voglio mettere in evidenza, ma non è un uso corretto. L’elemento citazione comunica appunto che stiamo citando qualcosa o qualcuno. Ha anche un attributo “cite” dove possiamo inserire il link dal quale abbiamo preso la citazione.

La verità è che lo uso così perché non ho mai tempo di crearmi un elemento “box colorato” per evidenziare porzioni di testo, ma sarebbe proprio giusto farlo e usare l’elemento citazione per gli scopi per i quali è stato creato.

<blockquote cite="https://pjrvs.com/a/mind/">When you <em>spreadsheet the shit out of something</em>, you can stop worrying and thinking about it, because the entire plan doesn’t have to live <strong>just</strong> in your brain anymore</blockquote>

Corsivo E grassetto dentro a una citazione. Visto cosa si può fare?

Per approfondire

• Un articolo di Yoast che parla di titoli
• La guida HTML.it
• Il mio libro preferito su HTML e CSS – HTML & CSS: Design and Build Websites

Ora tocca a voi

Aprite un articolo in bozza nel vostro blog e allenatevi a usare i tag HTML. Go crazy! Guardare su HTML.it e su W3Schools e usate tutti i tag che vi incuriosiscono. Se vi sentite davvero avventurosi iniziate a buttare l’occhio sul CSS, poi approfondiamo qui. Buon lavoro!