🔖 Cosa sono i tag HTML e come funzionano
Ogni pagina web che apri nel browser, sotto il cofano appare come un flusso continuo di testo. Ma il browser in qualche modo lo trasforma in titoli, paragrafi, immagini, pulsanti e moduli. Il segreto dietro questa trasformazione sono i tag HTML.
I principianti spesso trattano i tag come formule magiche: copia, incolla, funziona. Ma senza capirne la logica, ogni modifica diventa un tirare a indovinare. Basta un tag di chiusura mancante e il layout si rompe mentre il modulo smette di inviare dati.
Vediamo come funzionano internamente i tag HTML, quali gruppi di tag esistono e perché sono fondamentali per l'ottimizzazione per i motori di ricerca. Niente fronzoli, con esempi e un taglio pratico.
💡 Panoramica rapida:
- Un tag è composto da un nome tra parentesi angolari e attributi opzionali: il browser li legge e decide come mostrare il contenuto
- I tag a coppia racchiudono il contenuto (apertura + chiusura), i tag singoli inseriscono un elemento nella pagina (immagine, interruzione di riga, metadati)
- I tag semantici HTML5, header, nav, main, article, section e footer, descrivono il significato dei blocchi, non solo il loro aspetto, e sono la base di accessibilità e SEO
- I motori di ricerca analizzano i tag di intestazione (h1-h6), i tag link (
a), i tag immagine (imgcon alt) e i meta tag per comprendere la struttura della pagina e posizionarla per parole chiave - L'annidamento corretto dei tag è fondamentale: i browser perdonano gli errori, ma un HTML valido garantisce una visualizzazione corretta su tutti i dispositivi
Cosa sono i tag HTML e a cosa servono
Un tag HTML è un elemento di markup racchiuso tra parentesi angolari < e >. Il browser non mostra le parentesi stesse all'utente: legge il nome del tag e decide cosa fare con il contenuto.
Prendiamo un esempio semplice: <p>Это абзац.</p>. Il browser vede il tag di apertura <p>, capisce che "è iniziato un paragrafo", mostra il testo e quando arriva al tag di chiusura </p> il paragrafo è finito. Tutto ciò che sta in mezzo è il contenuto del paragrafo.
I tag risolvono tre compiti contemporaneamente. Primo, descrivono la struttura del documento: dov'è il titolo, dov'è la navigazione, dov'è il testo principale. Secondo, controllano la visualizzazione: grassetto, corsivo, interruzione di riga. Terzo, incorporano risorse esterne: immagini, video, script e fogli di stile.
Anatomia di un tag HTML
Ogni tag è composto da tre parti: un nome, attributi e, per i tag a coppia, il contenuto tra l'elemento di apertura e quello di chiusura.
Il nome del tag è scritto in caratteri latini e ne definisce la funzione: p per paragrafo, h1 per intestazione, a per link. Maiuscole o minuscole sono indifferenti (<P> e <p> sono la stessa cosa), ma lo standard raccomanda il minuscolo.
Gli attributi precisano il comportamento del tag. Prendi <a href="https://example.com">: l'attributo href dice al browser dove porta il link. E in <img src="photo.jpg" alt="Описание фото"> l'attributo src specifica il percorso del file, mentre alt fornisce un'alternativa testuale. I valori degli attributi sono racchiusi tra virgolette e gli attributi stessi sono separati da spazi.
La regola più importante: i tag a coppia vanno sempre chiusi. Hai aperto <div>, lo chiudi con </div>. I tag singoli: img, br, input, meta, link, hr, non richiedono una chiusura a coppia. E l'ordine di annidamento: <p><strong>текст</strong></p> è corretto, <p><strong>текст</p></strong> è sbagliato (incrociato).
Principali gruppi di tag HTML
La specifica HTML5 contiene una moltitudine di tag diversi, ma per il lavoro pratico è sufficiente conoscere i gruppi principali. Coprono il 95% delle attività di uno sviluppatore frontend.
Tag di struttura del documento
Ogni pagina HTML inizia con uno scheletro:
<html>, l'elemento radice, racchiude l'intero documento<head>, la sezione di servizio: titolo della scheda, meta tag, collegamento a stili e script<body>, il contenuto visibile della pagina<title>, il testo nella scheda del browser (indicizzato dai motori di ricerca)<meta>, codifica, descrizione della pagina, viewport per dispositivi mobili
L'utente non vede direttamente questi tag, ma senza di essi la pagina non funziona: il browser non capirà la codifica, il motore di ricerca non leggerà la descrizione e il layout mobile si romperà.
Tag semantici HTML5
Prima di HTML5, gli sviluppatori impaginavano tutto con <div> e classi. Un motore di ricerca vedeva la pagina come un flusso continuo di <div>, dove fosse il menu, dove l'articolo, dove il piè di pagina non era chiaro. HTML5 ha risolto questo problema con i tag semantici:
<header>, l'intestazione del sito o di una sezione (logo, menu, ricerca)<nav>, un blocco di navigazione (menu principale, breadcrumb)<main>, il contenuto unico della pagina (solo uno per documento)<article>, un'unità di contenuto autonoma (post, scheda prodotto, commento)<section>, un gruppo tematico di contenuti con una propria intestazione<aside>, una barra laterale o contenuto supplementare<footer>, il piè di pagina: contatti, copyright, mappa del sito
Il layout semantico non è un tributo alla moda. I lettori di schermo (programmi per utenti non vedenti) si basano proprio su <nav> e <main>, saltando le ripetizioni. E i motori di ricerca estraggono segnali chiave di ranking dai blocchi semantici.
Tag per il contenuto testuale
Il set di base per lavorare con il testo:
- Da
<h1>a<h6>: sei livelli di intestazione, da quello principale a quelli subordinati. In una pagina, esattamente un<h1>, gli altri formano una gerarchia come l'indice di un libro <p>, un paragrafo, il contenitore principale per il testo<strong>e<em>, enfasi semantica: importante e accentuato (non solo grassetto e corsivo)<blockquote>, una citazione con fonte specificata tramite l'attributocite<pre>e<code>, testo preformattato e un frammento di codice
A parte sta <span>, un contenitore inline senza significato intrinseco. Si usa per applicare stili mirati a un frammento di testo all'interno di un paragrafo.
Tag per link e media
<a href="URL">анкор</a>, il tag più potente di internet. Sono i link a connettere le pagine in un unico web. L'attributo target="_blank" apre il link in una nuova scheda, rel="nofollow" dice al motore di ricerca di non passare peso alla pagina di destinazione.
Per le immagini, <img src="путь" alt="описание">. L'attributo alt è fondamentale: i lettori di schermo e i motori di ricerca lo leggono. Senza alt, un'immagine semplicemente non esiste per loro. Tecnicamente, src può puntare a qualsiasi URL pubblico, ma è meglio memorizzare le immagini in locale, che è più veloce e affidabile.
<video> e <audio> incorporano media con controlli nativi. E <figure> con <figcaption> raggruppano un'immagine con una didascalia, così il motore di ricerca capisce che sono una coppia correlata.
Tag per liste e tabelle
Le liste sono di tre tipi: <ul> (non ordinata), <ol> (ordinata) e <dl> (lista di definizioni con coppie <dt>-termine e <dd>-descrizione).
Le tabelle sono costruite a cascata: <table> → <tr> (riga) → <th> (intestazione di colonna) o <td> (cella dati). <caption> dà un titolo all'intera tabella, <thead>/<tbody>/<tfoot> raggruppano logicamente le righe. E sì, le tabelle si usano ancora per i dati, non impaginarle con i div.
Tag per moduli
<form> raccoglie i campi di input e li invia al server usando il metodo GET o POST. All'interno di un modulo funzionano:
<input>, un campo universale (testo, password, email, numero, data, file, il tipo è impostato dall'attributotype)<textarea>, testo multilinea<select>con<option>, un elenco a discesa<button>, un pulsante di invio o reset<label>, un'etichetta testuale collegata a un campo tramite l'attributofor
L'abbinamento di <label for="email"> con <input id="email"> è un must per l'accessibilità: cliccando sull'etichetta il focus si sposta sul campo.
Come i tag HTML influenzano la SEO
I robot di ricerca non vedono una pagina con gli occhi. Leggono il codice sorgente e i tag diventano il loro unico sistema di coordinate.
I tag di intestazione (h1-h6) formano lo scheletro semantico. Il motore di ricerca capisce la gerarchia: <h1> definisce l'argomento principale della pagina, <h2> evidenzia i sottoargomenti chiave, <h3> svela i dettagli. Quanto più accuratamente le intestazioni riflettono il contenuto e contengono parole chiave, tanto maggiori sono le possibilità di posizionamento.
Il tag <title> (in <head>) è ciò che l'utente vede nei risultati di ricerca. Non è h1, anche se spesso coincidono nel significato. Un <title> ben fatto contiene la parola chiave più vicino all'inizio ed è scritto in linguaggio naturale: un titolo cliccabile porta più clic a parità di posizione.
Il tag <meta name="description"> forma lo snippet sotto il titolo nei risultati di ricerca. Non influisce direttamente sul posizionamento, ma una descrizione ben scritta aumenta il CTR, e i fattori comportamentali poi lavorano per la posizione.
Il tag <a> con l'attributo href è la base del linking interno. I link interni distribuiscono il peso tra le pagine del sito, quelli esterni trasmettono autorevolezza. L'ancora del link (il testo tra <a> e </a>) suggerisce al motore di ricerca di cosa parla la pagina di destinazione.
L'attributo alt sulle immagini è un'altra fonte di parole chiave. Le immagini senza alt non partecipano alla ricerca per immagini e non forniscono al motore di ricerca contesto aggiuntivo sulla pagina.
I tag semantici HTML5 aiutano il robot a separare il contenuto dalla navigazione e dalla pubblicità. <main> e <article> hanno priorità durante l'indicizzazione, mentre <nav> e <aside> no. Questo fa risparmiare budget di scansione.
Video: tag HTML da zero
Per consolidare la teoria con la pratica, guarda questa lezione in inglese, mostra visivamente come un browser elabora i tag HTML in tempo reale:
⁉️🤔 Domande frequenti
In cosa differisce un tag a coppia da un tag singolo?
Un tag a coppia racchiude il contenuto e richiede la chiusura:
<p>текст</p>. Un tag singolo inserisce un elemento senza contenuto: img, br, input. In HTML5, la barra di chiusura (<br />) è facoltativa ma consentita. La regola è semplice: se c'è contenuto tra i tag, il tag è a coppia; se non c'è, è singolo.
Quanti <h1> possono esserci in una pagina?
Esattamente uno. La specifica HTML5 tecnicamente consente più
<h1>se sono separati in<article>e<section>, ma i motori di ricerca funzionano ancora al meglio con un'unica intestazione principale. Metti un<h1>per pagina, non sbagli.
Cosa succede se non si chiude un tag?
Il browser proverà a "indovinare" dove intendevi chiuderlo e costruirà l'albero DOM da solo. Ma browser diversi indovinano in modo diverso: in Chrome la pagina potrebbe apparire normale, mentre in Safari o in un lettore di schermo andrà in pezzi. Perciò, un HTML valido con la corretta chiusura dei tag non è pignoleria, è un'assicurazione contro le sorprese.
In cosa <b> differisce da <strong>, e <i> da <em>?
<b>e<i>sono puramente visivi: grassetto e corsivo.<strong>e<em>sono semantici: "questo è importante" ed "enfasi su questo". Il motore di ricerca e il lettore di schermo tengono conto dei tag semantici quando analizzano la pagina, mentre quelli visivi vengono ignorati. Se stai enfatizzando un significato, usa<strong>e<em>; se è puramente per design, usa<b>e<i>.
È obbligatorio scrivere alt per tutte le immagini?
Per le immagini significative è obbligatorio: è sia accessibilità che SEO. Per quelle decorative (motivo di sfondo, separatore), usa un
alt=""vuoto in modo che il lettore di schermo le salti. Un'immagine senza alcun attributoaltè un errore grave: il validatore HTML lo segnalerà.
Quali tag sono i più importanti per la SEO?
Cinque critici:
<title>(il titolo nei risultati di ricerca),<meta name="description">(lo snippet),<h1>-<h6>(struttura e parole chiave),<a>(linking interno ed esterno),<img alt="...">(ricerca per immagini e contesto aggiuntivo). Se questi cinque sono fatti bene, le fondamenta della SEO tecnica sono già gettate.
Cosa ricordare sui tag HTML
I tag HTML non sono magia o sintassi per pochi eletti. È un sistema di regole, comprensibile sia alle persone che alle macchine. Il browser trasforma i tag in una pagina visiva, il motore di ricerca in segnali di ranking, il lettore di schermo in una voce per un utente non vedente. Lo stesso markup serve tre interfacce completamente diverse.
La cosa principale da portare a casa: chiudi i tag a coppia, mantieni un annidamento corretto, usa i tag semantici HTML5 invece di anonimi <div> e fornisci sempre alt per le immagini significative. Queste quattro abitudini all'inizio fanno risparmiare ore di debugging in seguito.
Se il materiale ti è stato utile, salvalo nei preferiti, ci tornerai quando dovrai rinfrescare la sintassi prima di un lavoro di impaginazione.
Un team professionale di scrittori e redattori specializzati nella creazione di contenuti di qualità.