Quando una pagina web appare ordinata, leggibile e facile da navigare, dietro c’è una struttura precisa che il browser sa interpretare. I tag html sono i mattoni di questa struttura: qui chiarisco come funzionano, quali usare più spesso, come scegliere gli attributi corretti e che cosa cambia quando si lavora con WordPress.

Che cos’è un tag HTML e come viene interpretato

Un tag HTML è una particolare istruzione racchiusa tra parentesi angolari, per esempio

La distinzione tra tag ed elemento è piccola, ma importante. Il tag è la sintassi, mentre l’elemento comprende l’insieme formato da apertura, contenuto e chiusura.

Questo è un paragrafo.

In questo esempio,

La maggior parte degli elementi ha un tag di apertura e uno di chiusura. Esistono però anche elementi vuoti, che non possono contenere testo e non hanno una chiusura separata.

Elementi come img, br, meta, link e input si usano senza un tag finale. Aggiungere una chiusura come non risolve nulla e può indicare che la struttura non è stata compresa correttamente.

Come è fatto un elemento HTML

Ogni elemento può contenere tre parti principali. Capire il loro ruolo rende molto più semplice leggere il codice di un sito, anche quando è stato generato da WordPress o da un page builder.

Un esempio completo è questo:

Leggi l’articolo

Il tag a crea un collegamento, mentre l’attributo href specifica la destinazione. Il testo interno è quello che l’utente vede e seleziona. Nella pratica, un link efficace deve descrivere chiaramente dove porta, non limitarsi a formule vaghe come “clicca qui”.

Gli attributi più utili

Gli attributi si inseriscono nel tag di apertura e seguono normalmente la forma nome="valore". Alcuni sono specifici di un elemento, altri possono essere utilizzati in molti contesti.

• class collega l’elemento a una regola CSS o a uno script.
• id identifica un elemento singolo all’interno della pagina.
• href definisce la destinazione di un collegamento.
• src indica la sorgente di immagini, script o altri contenuti.
• alt descrive un’immagine quando non può essere vista o caricata.
• lang comunica la lingua del contenuto.

L’attributo alt merita particolare attenzione. Non serve a inserire parole chiave, ma a spiegare il contenuto dell’immagine a chi usa uno screen reader o quando il file non viene visualizzato. Un testo come alt="Grafico delle visite al sito nel 2026" è utile; alt="immagine SEO HTML sito web" è solo una sequenza artificiale.

I tag più importanti per costruire una pagina

Non serve imparare centinaia di elementi per iniziare. Io consiglio di padroneggiare prima quelli che descrivono la struttura e le azioni più comuni. Sono sufficienti per capire gran parte del codice presente in un sito editoriale o in un progetto WordPress.

Elemento	Uso principale	Esempio pratico
h1 - h6	Titoli organizzati per livello	Analisi dei dati
p	Paragrafi di testo	Testo dell’articolo
a	Collegamenti ipertestuali	Approfondisci
img	Immagini
ul, ol, li	Liste puntate o numerate	Voce
strong, em	Enfasi semantica	Dato importante
table, tr, th, td	Tabelle di dati	Confronti, prezzi, statistiche

La gerarchia dei titoli non è un dettaglio grafico. Un h2 introduce una sezione subordinata al titolo principale, mentre un h3 sviluppa un argomento interno a quella sezione. Non scegliere i titoli solo perché hanno una dimensione visiva piacevole: l’aspetto si modifica con il CSS, il significato invece resta nell’HTML.

Lo stesso principio vale per strong ed em. Il primo segnala un’importanza forte, il secondo un’enfasi. Usare soltanto b o i per ottenere un effetto grafico può funzionare visivamente, ma comunica meno informazioni a browser e tecnologie assistive.

Perché la semantica conta per accessibilità e SEO

I tag semantici descrivono il ruolo del contenuto, non soltanto il suo aspetto. Elementi come header, nav, main, article, section, aside e footer aiutano a capire come è organizzata una pagina.

  

    
Titolo dell’articolo
  

  

    
Prima sezione
    
Contenuto principale.
  

In molti progetti vedo ancora pagine costruite quasi interamente con div. Questo elemento è utile come contenitore generico, ma non dovrebbe sostituire ogni altro tag. Un nav comunica che contiene una navigazione, mentre un div comunica soltanto che esiste un contenitore.

La semantica migliora l’esperienza con screen reader e strumenti di navigazione assistita. Può anche aiutare i motori di ricerca a interpretare la struttura del contenuto, ma non è una scorciatoia per ottenere posizioni migliori. Un markup ordinato sostiene la qualità tecnica della pagina, mentre il posizionamento dipende da molti altri fattori.

Accessibilità pratica nelle immagini e nei link

Per le immagini informative bisogna scrivere un alt breve e descrittivo. Se invece l’immagine è puramente decorativa, l’attributo può avere valore vuoto, cioè alt="", così lo screen reader non interrompe inutilmente la lettura.

Anche i collegamenti dovrebbero essere comprensibili fuori dal contesto. “Leggi l’analisi completa sui media digitali” è più utile di “qui”, soprattutto quando l’utente naviga una pagina usando una lista di link. È una piccola scelta editoriale, ma spesso produce una differenza concreta.

Come usare i tag HTML dentro WordPress

WordPress permette di creare contenuti senza scrivere codice a mano, ma il codice rimane presente dietro ogni blocco. Un paragrafo, un titolo, un’immagine o una lista inseriti nell’editor visuale vengono trasformati in elementi HTML quando la pagina viene mostrata.

Per vedere o modificare il markup si può usare il blocco HTML personalizzato oppure la modalità di modifica del codice dell’editor a blocchi. Io preferisco intervenire solo sul frammento necessario, perché sostituire intere porzioni di pagina può rompere blocchi, classi o impostazioni responsive.

Un esempio semplice in un articolo WordPress

Come leggere i dati del sito
Un buon report deve mostrare metriche comprensibili.

  
Visite organiche
  
Tempo di permanenza
  
Conversioni

Questo codice crea una sezione leggibile e strutturata. Gli stili del tema possono modificare colori, spaziature e dimensioni senza alterare il significato degli elementi. È proprio questa separazione tra struttura e presentazione a rendere il sito più facile da mantenere.

Leggi anche: WordPress mobile - Gestisci il tuo sito dallo smartphone?

Gli errori che incontro più spesso

• Chiudere male gli elementi, per esempio annidando un paragrafo dentro un altro paragrafo.
• Usare troppi br per creare spazio invece di gestire la distanza con il CSS.
• Inserire titoli fuori ordine soltanto per ottenere una certa dimensione del testo.
• Dimenticare l’attributo alt nelle immagini importanti.
• Incollare codice da fonti sconosciute, con stili e script inutili o potenzialmente rischiosi.
• Confondere il codice HTML con il CSS, usando tag per risolvere problemi che appartengono alla presentazione grafica.

WordPress può inoltre ripulire o modificare alcuni frammenti HTML in base ai permessi dell’utente, al tema e ai plugin attivi. Se una modifica scompare dopo il salvataggio, non è necessariamente un errore di sintassi: potrebbe essere una regola di sicurezza o un filtro del sistema.

Quando qualcosa non appare come previsto, controllo prima il codice generato dal browser e poi gli stili applicati. Gli strumenti per sviluppatori mostrano l’elemento effettivamente visualizzato, che non sempre coincide con quello inserito nell’editor. Questa verifica evita di correggere il punto sbagliato, soprattutto nei temi complessi.

Una regola semplice per scegliere il tag giusto

La domanda più utile non è “quale tag rende il testo più grande?”, ma “che cosa rappresenta davvero questo contenuto?”. Se si tratta di un titolo, si usa un titolo; se è una lista, una lista; se è un collegamento, un link. Questa logica mantiene il codice coerente anche quando il design cambia.

Per una pagina editoriale, il mio controllo finale è breve. Verifico la gerarchia dei titoli, la presenza di testi alternativi sensati, la validità dei collegamenti, la corretta chiusura degli elementi e l’uso di tag semantici dove hanno un significato reale.

• Usa h1 per il titolo principale e livelli successivi per le sezioni.
• Preferisci article, nav e main quando descrivono davvero il contenuto.
• Riserva div e span ai contenitori privi di un significato semantico specifico.
• Controlla il risultato su desktop e mobile, perché struttura e stile devono funzionare insieme.

La competenza più utile non consiste nel memorizzare ogni elemento disponibile, ma nel riconoscere la funzione del contenuto e rappresentarla con il tag più adatto. Quando questa scelta è corretta, WordPress diventa più semplice da personalizzare e il sito risulta più chiaro per persone, browser e motori di ricerca.

Il dettaglio che rende il codice più solido nel tempo

Un markup ben scritto non serve soltanto a far apparire correttamente una pagina oggi. Riduce gli interventi futuri, facilita il lavoro di chi gestirà il sito e rende più semplice cambiare tema, layout o strumenti di pubblicazione.

Per questo consiglio di trattare ogni elemento HTML come una scelta editoriale, non come un semplice contenitore grafico. La chiarezza della struttura è un investimento tecnico piccolo, ma duraturo: si nota soprattutto quando il progetto cresce, quando arrivano nuovi contenuti o quando qualcuno deve correggere il codice senza ricominciare da capo.