Con i tag <h> dai al documento o al contenuto HTML la necessaria struttura di base. Utilizzando i vari tipi disponibili, come <h1> o <h2>, rendi più chiara la gerarchia delle pagine web per i motori di ricerca e gli utenti.

Web Hosting
Diventa il n°1 della rete con il provider di hosting n°1 in Europa
  • Disponibilità garantita al 99,99%
  • Dominio, SSL ed e-mail inclusi
  • Assistenza 24/7 in lingua italiana

Cosa sono i tag per i titoli HTML e cosa significano?

I tag per i titoli HTML sono elementi HTML che si usano per definire titoli in un documento HTML. Questo tipo specifico di tag HTML è di importanza sia strutturale che semantica per i siti web e soddisfa in particolare i seguenti scopi:

  • Gerarchia e struttura: i tag per i titoli aiutano i visitatori, le visitatrici e i motori di ricerca a comprendere meglio i contenuti e la loro struttura.
  • Ottimizzazione per i motori di ricerca: l’uso corretto del tag <h1> in HTML e simili può influenzare positivamente il posizionamento sui motori di ricerca. In particolare, l’uso di parole chiave importanti nei titoli ti farà guadagnare punti decisivi.
  • Layout e design: i tag per i titoli HTML sono essenziali anche per un comodo design grafico. L’aspetto dei singoli tipi di titoli viene definito centralmente nel foglio di stile CSS e le successive modifiche al design vengono applicate immediatamente a tutti i titoli con l’etichetta HTML <h>.
  • Accessibilità: gli screen reader utilizzano i titoli HTML per leggere i contenuti alle persone con disabilità visive in modo che risulti utile e comprensibile.
N.B.

Il tag heading <h> per i titoli non deve essere confuso con il tag header<header>. Quest’ultimo viene utilizzato per contrassegnare l’area di intestazione di un documento HTML o di un sito web. Qui si trovano elementi come loghi e nomi di marchi, elementi di navigazione o CTA.

Quali tipi di tag per i titoli HTML esistono?

I tag da <h1> a <h6> sono usati per etichettare i titoli HTML. Il tag <h1> rappresenta il titolo più importante, che di solito è anche segnalato nel layout dal carattere più grande. Il tipo <h6> è usato per definire il titolo meno importante e che occupa il livello più basso nella gerarchia:

  • <h1> in HTML: <h1> è il titolo principale di una pagina web. Deve quindi sempre riflettere l’argomento principale o il titolo dell’intera pagina. L’uso di parole chiave è particolarmente efficace e importante in questo caso.
  • <h2> in HTML: il tag <h2> viene utilizzato per definire i sottotitoli più importanti. Introducono sezioni che sono correlate all’argomento principale annunciato nel tag <h1>.
  • Da <h3> a <h6>: i tag da <h3> a <h6> sono utilizzati per i sottotitoli che introducono sottosezioni o contenuti annidati all’interno di una sezione <h2>.

Con l’eccezione di <h1>, puoi utilizzare tutti i tipi di titoli HTML più volte per pagina. È importante non saltare alcun livello: una sezione <h2> non dovrebbe essere seguita da un contenuto sotto un titolo <h4>.

Acquista e registra il tuo dominio con il provider n°1 in Europa
  • Domain Connect gratuito per una configurazione facile del DNS
  • Certificato SSL Wildcard gratuito
  • Protezione privacy inclusa

Sintassi dei tag <h> in HTML con un esempio di codice

I titoli HTML disponibili possono sempre essere integrati in un documento secondo lo stesso schema tipico dei tag HTML: con un tag introduttivo definisci l’inizio di un titolo, mentre con un tag conclusivo ne segnali la fine. I numeri dei due tag devono essere sempre uguali. La sintassi è quindi la seguente (qui indichiamo un esempio per <h1>):

<h1>*TESTO*</h1>
html

Infine, illustriamo l’uso dei tag per i titoli HTML con un esempio specifico. I contenuti di una pagina esemplificativa di cucina sono chiaramente strutturati utilizzando sottotitoli del tipo <h2> e <h3>. In questo modo, gli utenti possono navigare facilmente tra le diverse categorie di ricette:

<!DOCTYPE html>
<html>
<body>
<h1> Consigli per ricette di antipasti, primi, secondi piatti e dessert</h1>
<p>Scopri ricette gustose e altri consigli culinari.</p>
	<h2>Spuntini e antipasti</h2>
	<p>Stuzzichini per la merenda e idee per spuntini.</p>
		<h3>Insalate</h3>
		<p>Idee per insalate fresche e gourmet.</p>
		<h3>Salse e creme spalmabili</h3>
		<p>Ricette per salse e creme spalmabili deliziose.</p>
	<h2>Piatti principali</h2>
	<p>Piatti principali gustosi e saporiti per ogni occasione.</p>
		<h3>Piatti vegetariani</h3>
		<p>Ricette vegetariane sane e gustose.</p>
		<h3>Piatti di pesce</h3>
		<p>Ricette per piatti di carne succulenti e saporiti.</p>
	<h2>Dessert</h2>
	<p>Dolci tentazioni e dessert per terminare il pasto in bellezza.</p>
		<h3>Dolci e torte</h3>
		<p>Ricette per torte e crostate deliziose.</p>
		<h3>Gelati e sorbetti</h3>
		<p>Ricette di gelato rinfrescanti e deliziose.</p>
</body>
</html>
html
Hai trovato questo articolo utile?
Vai al menu principale