TAG per titoli, contenuti, liste ed elenchi

In questo tutorial ti parleremo dei tag utili per la titolazione, per i paragrafi e per restituire liste ed elenchi. Passiamo subito ai tag h1, h2 fino ad h6 per i titoli dei contenuti che andremo a scrivere. I titoli di un argomento hanno il compito di far capire all’utente di cosa stiamo parlando. Pensiamo anche ad una rivista cartacea in cui i titoli, scritti in maniera semplice e sintetica, colpiscono l’occhio umano e sono in grado di trasferire al lettore il contenuto del testo. Quindi, possiamo anche intuire come possano essere utili anche a livello di marketing.

Soffermiamoci al momento sul tag h1. Il primo errore commesso comunemente è l’uso di questo tag per fini estetici magari per evidenziarlo. Ricorda che l’HTML è la struttura mentre il CSS l’estetica. Quindi nel caso volessi colorare i titoli il CSS è lo strumento che ti consentirà di farlo.

Il tag h1 inoltre è utile ai fini SEO. In pratica i motori di ricerca prendono in considerazione questo tag per controllare le parole chiave e l’argomento che stai affrontando.

Anche se a volte può sembrare invadente il mio consiglio è di usare sempre il tag h1 per il titolo principale di un argomento. Inoltre ricorda di usare i tag in maniera sequenziale, ovvero dopo h1 usare h2 poi h3 e cosi via.

Parliamo adesso del tag p, ossia il paragrafo, e vediamo alcuni accorgimenti per un uso corretto. Di solito vediamo articoli con periodi di testo distanziati gli uni dagli altri. Lo spazio tra un periodo e l’altro è dato del tag p. A volte si notano testi con distanziamenti non dovuti a questo tag ma con l’uso di uno o più tag br, il quale porta a capo il testo.

Il paragrafo ha una sua argomentazione e logica quindi per ottimizzare il contenuto di un articolo e renderlo ancor meglio indicizzabile dai motori di ricerca è buona regola usare i tag p e nel caso si voglia dare un aspetto più piacevole l’uso del CSS è la soluzione ottimale.

Passiamo ai tag per le liste e gli elenchi che possono essere di tre tipi: le Ordered List ordinate da numeri o lettere, Unordered List con elenco puntato e le Description List ossia liste di descrizione.

Prendiamo in considerazione le Ordered List quelle ordinate da numeri o lettere e ti diciamo subito che queste hanno bisogno di due tag. Il primo ol identifica il blocco mentre il secondo tag li l’elenco che deve essere incluso nel blocco. Il blocco, ol, ha l’attributo type che come valori può contenere 1 per un elenco numerato, A per l’utilizzo di lettere maiuscole, a per le lettere minuscole, I per i numeri romani maiuscoli ed i per numeri romani minuscoli.

Nel caso volessimo una Ordered List con una lista all’interno di un’altra non dobbiamo fare altro che seguire la stessa sintassi e aggiungere nel tag li il tag ul con altri tag li al suo interno.

Per una lista con elenco puntato il blocco da utilizzare è ul e per dare uno stile al punto dell’elenco occorrerà usare il CSS.

<ul>
<li>primo elemento</li>
<li>secondo elemento</li>
<li>terzo elemento</li>
</ul>

Ora vediamo la Description List che differisce dalle altre in quanto per ogni punto vogliamo inserire una descrizione. Questa lista è data dal blocco dl con all’interno il tag dt, che indica il titolo, seguito dal tag dd ossia la descrizione.

<dl>
<dt>Titolo 1</dt>
<dd>descrizione 1</dd>
<dt>Titolo 2</dt>
<dd>descrizione 2</dd>
</dl>

Commenti

Per qualsiasi dubbio o domanda, scrivi un commento qui sotto.

Lascia un commento

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

HTML e CSS