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. IL tag <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.

Approfondimenti: meta tag SEO.

Se quello che hai letto ti risuona, fammi sapere su cosa stai lavorando.

Contattami







    Autore

    Adriana Longhitanohttps://adrianalonghitano.it

    Adriana Longhitano | GEO Specialist: SEO e AI Search

    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