Impara l’Html di base per scrivere meglio per il web

scrivere per il web con html base

Grazie ai sistemi CMS come WordPress (al quale farò riferimento in questo articolo) possiamo prenderci cura dei nostri siti web, aggiornando e aggiungendo contenuti, senza conoscere minimamente il codice che c’è dietro tutto questo. Una gran bella comodità, indubbiamente, ma sei sicuro che conoscere qualche piccola nozione non possa aiutarti a imbastire un contenuto migliore?

Perchè conoscere il codice serve

Conoscere delle nozioni basilari di codice ti servirà a capire come strutturare i contenuti per il tuo sito; nel formattare il tuo testo probabilmente ti servirai dei comodi pulsanti messi a disposizione da WordPress nella barra degli strumenti, lasciando al sistema il lavoro sporco.

Ti mostro come vedere il codice generato per il tuo contenuto: in alto a destra rispetto all’area di testo nella pagina di creazione o modifica di un articolo o di una pagina trovi due linguette: VisualeTesto. La linguetta visuale è quella che ci permette di avere un’esperienza molto simile ad un qualsiasi editor di testi, come può essere Word; se provi a switchare su Testo noterai come tutto appare più complesso: questo è il codice che viene generato per visualizzare il tuo contenuto sui browser dei tuoi lettori.

Il codice che hai davanti si chiama HTML, Hyper Text Markup Language: tecnicamente questo linguaggio non è un linguaggio di programmazione, perchè non permette di far compiere azioni. L’Html è un linguaggio di markup, ovvero di marcatori utili ad affibbiare un ruolo specifico ad un elemento all’interno della pagina web. In altre parole, grazie all’Html, possiamo definire quale porzione di testo è un titolo, quale un paragrafo, quale un testo a cui dare una certa enfasi, quale una lista puntata o numerata etc.

La grammatica del linguaggio Html è molto semplice e intuitiva: per indicare il ruolo di un elemento si usano dei tag, riconoscibili perchè racchiusi tra parentesi angolari <...>; i tag, tranne rare eccezioni, si presentano in coppia, ovvero un tag di apertura del tipo <tag> e uno di chiusura, distinguibile perchè al suo interno ha un backslash </tag>.

Eccoti un esempio di un paragrafo di testo, riconoscibile dal tag p:
<p>Esempio di paragrafo</p>

La formattazione del testo è molto importante non solo per permettere una lettura più agevole da parte dei nostri utenti, ma anche per permetterne la corretta lettura da parte dei software di sintesi vocale, fondamentali per le persone con disabilità visive. Inoltre un testo ben formattato è compreso meglio anche dai motori di ricerca come Google.

Passiamo ora in rassegna i principali tag Html utili per formattare un testo.

Titoli e paragrafi

Il corpo di un testo sul web è diviso in paragraph, letteralmente paragrafi, molto più simili a quelli che a scuola vengono chiamati capoversi. Come abbiamo appena visto nell’esempio il tag per i paragrafi è p.

Altri elementi importantissimi sono le intestazioni, ovvero titoli e titoletti, che aiutano molto la lettura su schermo di testi lunghi.

In inglese titolo si dice heading, e per questo i tag Html dedicati ai titoli si chiamano H1, H2, H3, H4, H5, H6: sei tipi di titoli gerarchicamente ordinati.

Ricorda di usare i titoli in maniera susseguente, ovvero non usare mai un Titolo 3 all’interno di un Titolo 1 o un Titolo 4 in seguito ad un Titolo 2.

Il Titolo 1 è il titolo principale della pagina, ed è buona norma utilizzarlo solo una volta all’interno di una pagina web. Ad esempio l’unico H1 che troverai spulciando il codice di questa pagina è il seguente:
<H1>Nozioni di Html per scrivere contenuti migliori</H1>

Mentre all’interno del testo ho inserito diversi titoli di livello 2 per aiutarti (spero) nella lettura:

<H2>Perchè conoscere il codice serve</H2>
<H2>Titoli e paragrafi</H2>
<H2>Dare enfasi</H2>

Dare enfasi

Altri elementi che aiutano molto la lettura dei testi su web sono i grassetti e i corsivi. Per creare questi effetti si usano convenzionalmente i tag strong per il grassetto e em per il corsivo: entrambi sono considerati tag di enfasi, e lo strong enfatizza più dell’em.
<strong>Questo è un grassetto</strong>
<em>Questo è un corsivo</em>

Liste puntate e numerate

Il tag dedicato alle liste numerate è ol (ordered list), mentre quello dedicato alle liste puntate è ul (unordered list); le singole voci delle liste sono invece singolarmente racchiuse nel tag li (list item).

Ecco un esempio di lista numerata; come puoi notare nel codice non c’è nessun numero, perchè la numerazione è inserita automaticamente dal browser:

<ol>
<li>Elemento 1<li>
<li>Elemento 2<li>
<li>Elemento 3<li>
</ol>

Questo il risultato di questo codice:

  1. Elemento 1
  2. Elemento 2
  3. Elemento 3

Questo invece un esempio di lista puntata:

<ul>
<li>Elemento 1<li>
<li>Elemento 2<li>
<li>Elemento 3<li>
</ul>

Che genera questo:

  • Elemento 1
  • Elemento 2
  • Elemento 3

Le citazioni

Il tag dedicato alle citazioni è blockquote (se conosci l’inglese avrai notato come tutti i tag siano semanticamente connessi al proprio ruolo).

<blockquote>
Fatti non foste a viver come bruti, ma per seguir virtute e canoscenza.
Dante Alighieri
</blockquote>

Questo codice darà vita a questo:

Fatti non foste a viver come bruti, ma per seguir virtute e canoscenza.
Dante Alighieri

Tutti gli elementi che ti ho descritto, se usati sapientemente, renderanno il tuo contenuto più scorrevole e comprensibile, sia per i tuoi utenti (anche quelli con disabilità) sia per i motori di ricerca. Ora che conosci le basi del codice ogni tanto potrai sbirciare la visualizzazione Testo di WordPress e magari sistemare manualmente alcune formattazioni del tuo contenuto.

Buon divertimento! 🙂

Lascia un commento

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