Categorie
Siti

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.

HTML struttura di base
Tutto quello che c’è da sapere su HTML qui >> http://www.w3schools.com/html/html_intro.asp

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.

Lo so, l'ho già citato la scorsa settimana, ma vale davvero la pena di leggerlo tutto, non a F: https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/
Lo so, l’ho già citato la scorsa settimana, ma vale davvero la pena di leggerlo tutto, non a F: https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

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”.

WordPress barra di formattazione
Se non vedete la seconda riga di formattazione, cliccate sul pulsante sulla prima riga con le barrette orizzontali che vedete evidenziato: è verso la fine (nel mio esempio di fianco alla S).

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é soprattutto gli anziani del web appena vedono una roba sottolineata sono mediamente predisposti a cliccarci sopra.

Si fa con una combinazione di un elemento in linea HTML, che definisce la porzione di testo, e CSS che definisce lo stile “sottolineato” come una decorazione del testo:

<span style=”text-decoration: underline;”>Parole da sottolineare</span>

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

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!

Di Francesca

WordPress Community Manager at SiteGround.

Ho creato C+B, supporto la community globale di WordPress.org nella sua crescita.

4 risposte su “Elementi HTML da conoscere in versione “parla come mangi””

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.