Con i tag <h> dai al documento o al contenuto HTML la ne­ces­sa­ria struttura di base. Uti­liz­zan­do i vari tipi di­spo­ni­bi­li, 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
  • Di­spo­ni­bi­li­tà garantita al 99,99%
  • Dominio, SSL ed e-mail inclusi
  • As­si­sten­za 24/7 in lingua italiana

Cosa sono i tag per i titoli HTML e cosa si­gni­fi­ca­no?

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 im­por­tan­za sia strut­tu­ra­le che semantica per i siti web e soddisfa in par­ti­co­la­re i seguenti scopi:

  • Gerarchia e struttura: i tag per i titoli aiutano i vi­si­ta­to­ri, le vi­si­ta­tri­ci e i motori di ricerca a com­pren­de­re meglio i contenuti e la loro struttura.
  • Ot­ti­miz­za­zio­ne per i motori di ricerca: l’uso corretto del tag <h1> in HTML e simili può in­fluen­za­re po­si­ti­va­men­te il po­si­zio­na­men­to sui motori di ricerca. In par­ti­co­la­re, l’uso di parole chiave im­por­tan­ti nei titoli ti farà gua­da­gna­re punti decisivi.
  • Layout e design: i tag per i titoli HTML sono es­sen­zia­li anche per un comodo design grafico. L’aspetto dei singoli tipi di titoli viene definito cen­tral­men­te nel foglio di stile CSS e le suc­ces­si­ve modifiche al design vengono applicate im­me­dia­ta­men­te a tutti i titoli con l’etichetta HTML <h>.
  • Ac­ces­si­bi­li­tà: gli screen reader uti­liz­za­no i titoli HTML per leggere i contenuti alle persone con di­sa­bi­li­tà visive in modo che risulti utile e com­pren­si­bi­le.
N.B.

Il tag heading <h> per i titoli non deve essere confuso con il tag header<header>. Quest’ultimo viene uti­liz­za­to per con­tras­se­gna­re l’area di in­te­sta­zio­ne di un documento HTML o di un sito web. Qui si trovano elementi come loghi e nomi di marchi, elementi di na­vi­ga­zio­ne o CTA.

Quali tipi di tag per i titoli HTML esistono?

I tag da <h1> a <h6> sono usati per eti­chet­ta­re i titoli HTML. Il tag <h1> rap­pre­sen­ta il titolo più im­por­tan­te, che di solito è anche segnalato nel layout dal carattere più grande. Il tipo <h6> è usato per definire il titolo meno im­por­tan­te e che occupa il livello più basso nella gerarchia:

  • <h1> in HTML: <h1> è il titolo prin­ci­pa­le di una pagina web. Deve quindi sempre ri­flet­te­re l’argomento prin­ci­pa­le o il titolo dell’intera pagina. L’uso di parole chiave è par­ti­co­lar­men­te efficace e im­por­tan­te in questo caso.
  • <h2> in HTML: il tag <h2> viene uti­liz­za­to per definire i sot­to­ti­to­li più im­por­tan­ti. In­tro­du­co­no sezioni che sono correlate all’argomento prin­ci­pa­le an­nun­cia­to nel tag <h1>.
  • Da <h3> a <h6>: i tag da <h3> a <h6> sono uti­liz­za­ti per i sot­to­ti­to­li che in­tro­du­co­no sot­to­se­zio­ni o contenuti annidati all’interno di una sezione <h2>.

Con l’eccezione di <h1>, puoi uti­liz­za­re tutti i tipi di titoli HTML più volte per pagina. È im­por­tan­te 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 con­fi­gu­ra­zio­ne facile del DNS
  • Cer­ti­fi­ca­to SSL Wildcard gratuito
  • Pro­te­zio­ne privacy inclusa

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

I titoli HTML di­spo­ni­bi­li possono sempre essere integrati in un documento secondo lo stesso schema tipico dei tag HTML: con un tag in­tro­dut­ti­vo definisci l’inizio di un titolo, mentre con un tag con­clu­si­vo ne segnali la fine. I numeri dei due tag devono essere sempre uguali. La sintassi è quindi la seguente (qui in­di­chia­mo un esempio per <h1>):

<h1>*TESTO*</h1>
html

Infine, il­lu­stria­mo l’uso dei tag per i titoli HTML con un esempio specifico. I contenuti di una pagina esem­pli­fi­ca­ti­va di cucina sono chia­ra­men­te strut­tu­ra­ti uti­liz­zan­do sot­to­ti­to­li del tipo <h2> e <h3>. In questo modo, gli utenti possono navigare fa­cil­men­te 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
Vai al menu prin­ci­pa­le