Tag HTML: cosa sono e come funzionano

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">, href e rel sono 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’attributo lang specifica 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 a target="_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







    Autore

    Adriana Longhitanohttps://adrianalonghitano.it

    Adriana Longhitano

    SEO Specialist con oltre 8 anni di esperienza. Progetto strategie di visibilità organica per aziende e professionisti che vogliono essere trovati — su Google e nei sistemi AI. Specializzata in GEO (Generative Engine Optimization), SEO tecnica e architettura dell’informazione.

    Adriana Longhitano
    Torna in alto

    Se quello che hai letto ti risuona, allora ha senso parlarne.

    Contattami