Hai sentito parlare di tag HTML decine di volte. Forse li hai anche usati, copiando qualcosa da un tutorial o mettendoci mano nel CMS. Ma c’è una differenza netta tra usare un tag e capire perché esiste, cosa comunica al browser e, soprattutto, cosa dice a Google sulla struttura del tuo contenuto.
Un sito può girare con tag scritti male, o usati in modo generico, e sembrare funzionante. Ma “funziona” non significa “viene letto correttamente”. E un documento HTML mal strutturato è come un testo senza punteggiatura: tecnicamente leggibile, praticamente confuso.
Quello che vedo spesso, analizzando siti con problemi di visibilità organica, è una struttura HTML che non riflette la gerarchia del contenuto. I tag ci sono, ma non fanno il loro lavoro semantico. In questa guida ti spiego cosa sono i tag HTML, come si usano e quali hanno impatto diretto sul posizionamento.
Cosa sono i tag HTML e perché esistono
Un tag HTML è un marcatore che dice al browser (e ai motori di ricerca) come interpretare una porzione di contenuto. Non è un comando estetico: è un’istruzione semantica. Definisce il tipo di contenuto, la sua funzione e la sua posizione nella gerarchia del documento.
La struttura base è semplice: ogni tag si apre con <nome> e si chiude con </nome>. Tutto ciò che sta in mezzo è il contenuto che quel tag definisce. Questa coppia apertura/chiusura forma quello che si chiama elemento HTML.
<p>Questo è un paragrafo.</p>
Il tag <p> apre, il contenuto è “Questo è un paragrafo.”, il tag </p> chiude. Il browser capisce che deve trattarlo come un blocco di testo. Google capisce che è un’unità di contenuto.
Differenza tra tag, elemento e attributo
Tre termini che si usano spesso come sinonimi, ma non lo sono. Vale la pena tenerli distinti:
- Tag: il marcatore sintattico, ad esempio
<a>o</a>. È il nome tra parentesi angolari. - Elemento: l’insieme completo di tag di apertura, contenuto e tag di chiusura.
<a href="...">testo</a>è un elemento. - Attributo: una proprietà aggiuntiva che specifica il comportamento o le caratteristiche dell’elemento. In
<a href="https://esempio.it" rel="noopener">,hreferelsono attributi.
Capire questa distinzione non è un esercizio accademico. È la base per leggere (e scrivere) codice HTML senza confondersi.
La struttura base di un documento HTML
Ogni pagina web ha uno scheletro minimo. Non è opzionale: è la struttura che il browser si aspetta per renderizzare correttamente il documento.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Titolo della pagina</title>
</head>
<body>
<h1>Titolo principale</h1>
<p>Contenuto della pagina.</p>
</body>
</html>
Riga per riga:
<!DOCTYPE html>— non è un tag HTML, è una dichiarazione. Dice al browser che il documento segue lo standard HTML5.<html lang="it">— il contenitore radice di tutto il documento. L’attributolangspecifica la lingua: conta per i motori di ricerca e per l’accessibilità.<head>— contiene metadati: title, charset, meta description, link a stylesheet. Non è visibile all’utente ma è fondamentale per browser e crawler.<body>— tutto ciò che l’utente vede è qui. Testo, immagini, link, form: tutto dentro<body>.
Il tag html: il contenitore radice della pagina
Il tag <html> è l’elemento radice del documento: tutto il codice della pagina, tranne <!DOCTYPE html>, è contenuto al suo interno. Segnala al browser dove inizia e dove finisce il documento HTML.
Non è un tag decorativo. L’attributo lang che gli si associa ha un impatto reale: Google lo usa per capire la lingua del contenuto e servirlo agli utenti giusti. Un sito italiano senza lang="it" non è necessariamente penalizzato, ma stai rinunciando a un segnale esplicito che potresti dare gratuitamente.
I principali tag HTML divisi per categoria
HTML5 conta oltre 100 tag ufficiali, ma circa 20 coprono il 90% dei casi d’uso reali. Ha più senso organizzarli per funzione che memorizzarli a lista.
Tag di testo e formattazione
Questi tag strutturano e qualificano il contenuto testuale. Usarli correttamente è la base della semantica HTML.
<h1>–<h6>: intestazioni gerarchiche.<h1>è il titolo principale della pagina (uno solo per pagina),<h2>e<h3>organizzano le sezioni. Google li legge per capire la struttura del contenuto.<p>: paragrafo. Il tag più usato per il testo corpo.<strong>: enfasi forte, semanticamente “importante”. Il browser lo rende in grassetto, ma il significato va oltre l’estetica.<em>: enfasi, semanticamente “rilevante nel contesto”. Il browser lo rende in corsivo.<span>: contenitore inline generico, senza semantica propria. Utile per applicare stili a porzioni di testo.<br>: a capo forzato. Tag vuoto, non ha chiusura.<hr>: separatore orizzontale. Indica una separazione tematica tra sezioni.
Tag per link e navigazione: il tag a HTML
Il tag <a> (anchor) è tra i comandi HTML più usati e più importanti sia per la navigazione che per il SEO. Permette di creare collegamenti tra pagine o sezioni.
Gli attributi principali da conoscere:
href: l’URL di destinazione. Senza questo attributo, il link non funziona.target="_blank": apre il link in una nuova scheda. Utile per link esterni.rel="noopener noreferrer": da usare insieme atarget="_blank"per ragioni di sicurezza e per non passare informazioni di referral a siti terzi.
Un esempio corretto per un link esterno:
<a href="https://esempio.it" target="_blank" rel="noopener noreferrer">Visita il sito</a>
Dal punto di vista SEO, l’attributo rel conta anche per comunicare a Google la natura del collegamento: rel="nofollow" dice che non vuoi trasferire autorità, rel="sponsored" segnala un link a pagamento.
Tag semantici HTML per strutturare i contenuti
I tag HTML semantici sono stati introdotti con HTML5 per sostituire l’abuso di <div> generici. Non hanno un aspetto visivo di default, ma dicono al browser (e ai crawler) cosa contiene ogni area della pagina.
Questi tag hanno impatto diretto su SEO e accessibilità, ed è per questo che vale la pena usarli correttamente:
<header>: intestazione della pagina o di una sezione. Di solito contiene logo, navigazione principale, titolo.<nav>: blocco di navigazione. Google lo riconosce come menu e lo tratta di conseguenza.<main>: contenuto principale della pagina. Un solo<main>per documento.<section>: sezione tematica del contenuto, con un proprio heading.<article>: contenuto autonomo e ridistribuibile: un post, una notizia, una scheda prodotto.<aside>: contenuto correlato ma secondario rispetto al flusso principale.<footer>: piè di pagina, con informazioni su autore, copyright, link secondari.
Usare <article> invece di <div> non è una preferenza stilistica. È comunicare a Google che quel blocco di contenuto ha senso anche fuori contesto, che è un’unità semantica completa.
Tag HTML e SEO: quali influenzano il posizionamento
Non tutti i tag hanno lo stesso peso per i motori di ricerca. Alcuni sono invisibili all’utente ma determinanti per il crawling e il ranking. Altri contribuiscono alla comprensione semantica del contenuto.
Ecco i tag che, nella mia esperienza di audit SEO, fanno la differenza più concreta:
<title>: il titolo della pagina che appare nei risultati di ricerca. Va nel<head>, non nella pagina visibile. Deve contenere la keyword principale ed essere sotto i 60 caratteri.<meta name="description">: non è un fattore di ranking diretto, ma influenza il CTR. Google spesso la mostra come snippet nei risultati.<h1>: un solo H1 per pagina, con la keyword principale. È il segnale di rilevanza topica più forte che puoi dare a Google.<h2>–<h6>: strutturano il contenuto in sezioni. Usarli con keyword semantiche amplia il perimetro tematico della pagina.<img alt="">: il testo alternativo delle immagini è l’unico modo che ha Google di capire cosa rappresenta un’immagine. Keyword in html vuol dire anche questo.<link rel="canonical">: nel<head>, dice a Google qual è la versione canonica di una pagina. Fondamentale per evitare contenuto duplicato.
Ho lavorato con uno studio legale che aveva tutti i tag tecnici in ordine ma non usava correttamente gli heading. I contenuti erano organizzati con <strong> al posto degli <h2>, e il crawler non riusciva a costruire una gerarchia del contenuto. Dopo la ristrutturazione degli heading, il traffico organico sulle pagine chiave è cresciuto in modo costante nelle settimane successive. Il contenuto era lo stesso. La struttura no.
Quali sono i principali tag HTML?
I tag imprescindibili, organizzati per categoria, sono questi:
- Struttura documento:
<!DOCTYPE html>,<html>,<head>,<body> - Metadati:
<title>,<meta>,<link> - Testo:
<h1>–<h6>,<p>,<strong>,<em>,<span> - Link e media:
<a>,<img>,<video>,<audio> - Semantica:
<header>,<nav>,<main>,<section>,<article>,<aside>,<footer> - Liste:
<ul>,<ol>,<li> - Form:
<form>,<input>,<button>,<label>,<select>
HTML5 ufficialmente supera i 100 tag, ma questi venti coprono la stragrande maggioranza dei casi d’uso reali. Conoscerli bene vale più che avere una lista completa che non si sa usare.
A cosa serve il tag HTML?
Il tag <html> è l’elemento radice del documento: racchiude tutti gli altri elementi e segnala al browser che ciò che segue è un documento HTML valido. È escluso solo <!DOCTYPE html>, che lo precede come dichiarazione di tipo.
In termini pratici: senza <html>, il browser renderizza lo stesso la pagina, ma stai rinunciando a un segnale strutturale esplicito. Con l’attributo lang, stai anche dichiarando la lingua del documento, informazione che i motori di ricerca usano per il targeting geografico e linguistico.
Cosa sono i tag in generale?
Un tag, in informatica e nel web, è un marcatore che delimita e classifica un contenuto. Nel contesto HTML, i tag sono istruzioni che dicono al browser come trattare ogni porzione del documento.
In senso più ampio, un tag è un’etichetta: assegna un significato a qualcosa. In HTML, quel significato può essere strutturale (questo è un titolo), semantico (questo è un articolo), funzionale (questo è un link), o visivo (questo è un testo in grassetto).
La differenza tra HTML e altri linguaggi di markup è che HTML è pensato per il web: i suoi tag non descrivono solo come appare un contenuto, ma cosa significa quel contenuto nel contesto di una pagina.
Vuoi sapere se i tag HTML del tuo sito sono ottimizzati per il SEO? Richiedi un’analisi tecnica gratuita.
Se quello che hai letto ti risuona, fammi sapere su cosa stai lavorando.
Contattami



