L’HTML dispone di oltre 100 tag diversi, ma nella pratica quotidiana dello sviluppo web ne utilizziamo regolarmente solo una ventina. Conoscere a fondo questi tag essenziali ti permette di costruire praticamente qualsiasi tipo di pagina web. In questo articolo analizzeremo i tag più importanti, suddivisi per categoria, con esempi pratici e indicazioni sulle best practice.
Tag Contenitore: div e span
I tag <div> e <span> sono i contenitori generici dell’HTML. Non hanno alcun significato semantico intrinseco, ma servono per raggruppare altri elementi e applicare stili CSS o comportamenti JavaScript.
Il tag <div> è un elemento di blocco (block-level element), il che significa che occupa l’intera larghezza disponibile e inizia sempre su una nuova riga. Viene utilizzato per creare sezioni, colonne, wrapper e qualsiasi tipo di contenitore strutturale. Prima dell’introduzione dei tag semantici HTML5, il <div> era l’unico modo per definire le aree della pagina.
Il tag <span> è invece un elemento inline, ovvero non interrompe il flusso del testo e occupa solo lo spazio necessario al suo contenuto. Viene tipicamente utilizzato per applicare stili a porzioni specifiche di testo all’interno di un paragrafo, come cambiare il colore di una parola o evidenziare un termine specifico.
Una regola importante: con l’avvento dell’HTML semantico, è buona pratica utilizzare <div> e <span> solo quando nessun altro tag semantico è appropriato. Se stai creando l’intestazione della pagina, usa <header> anziché <div class="header">. Se stai creando una sezione di navigazione, usa <nav> anziché <div class="nav">.
Tag per il Testo: Paragrafi, Heading e Formattazione
I tag per il testo sono tra i più utilizzati in assoluto. Il tag <p> definisce un paragrafo di testo ed è un elemento di blocco. I browser aggiungono automaticamente un margine sopra e sotto ogni paragrafo per separarlo visivamente dagli altri contenuti.
I tag di heading da <h1> a <h6> definiscono i titoli e sottotitoli della pagina, con <h1> che rappresenta il livello più importante e <h6> il meno importante. La corretta gerarchia dei titoli è fondamentale sia per l’accessibilità che per il SEO. Per approfondire questo argomento, consulta il nostro articolo sugli heading HTML da H1 a H6.
Per la formattazione del testo, i tag più importanti sono:
<strong>— testo con forte importanza (visualizzato in grassetto)<em>— testo enfatizzato (visualizzato in corsivo)<br>— interruzione di riga (tag auto-chiudente)<hr>— linea orizzontale di separazione tematica<blockquote>— citazione in blocco<code>— frammento di codice inline<pre>— testo preformattato (mantiene spazi e a capo)
Tag per Link e Immagini
Il tag <a> (anchor, ancora) è il fondamento dell’ipertesto — il concetto stesso su cui si basa il web. Attraverso l’attributo href, permette di collegare pagine tra loro, creare link a risorse esterne, link interni alla stessa pagina (ancore), link mailto per email e link tel per chiamate telefoniche.
Il tag <img> inserisce immagini nella pagina. È un tag auto-chiudente che richiede almeno due attributi: src (il percorso dell’immagine) e alt (il testo alternativo per accessibilità e SEO). È buona pratica specificare sempre anche gli attributi width e height per evitare il layout shift durante il caricamento, un fattore che influisce negativamente sui Core Web Vitals.
Entrambi questi tag meritano un approfondimento dedicato. Puoi trovare una guida completa ai link HTML e al tag ancora e alle immagini HTML e best practice nei nostri articoli dedicati.
Tag per Liste e Tabelle
Le liste sono un elemento fondamentale per organizzare informazioni in modo chiaro e strutturato. L’HTML offre tre tipi di liste:
<ul>— lista non ordinata (unordered list), visualizzata con punti elenco<ol>— lista ordinata (ordered list), visualizzata con numeri progressivi<dl>— lista di definizioni (definition list), per coppie termine-definizione
Ogni voce delle liste ordinate e non ordinate è racchiusa nel tag <li> (list item). Le liste possono essere annidate l’una dentro l’altra per creare sotto-elenchi. I menu di navigazione dei siti web sono spesso realizzati come liste non ordinate stilizzate con CSS.
Le tabelle vengono create con il tag <table> e i suoi elementi correlati: <thead> per l’intestazione, <tbody> per il corpo, <tr> per le righe, <th> per le celle di intestazione e <td> per le celle di dati. È fondamentale ricordare che le tabelle devono essere usate esclusivamente per dati tabulari, mai per il layout della pagina — una pratica obsoleta degli anni ’90 che purtroppo si incontra ancora occasionalmente.
Tag per Moduli e Interazione
I moduli (form) sono essenziali per raccogliere dati dagli utenti. Il tag <form> definisce il contenitore del modulo e i suoi attributi action (URL di destinazione) e method (GET o POST) determinano come i dati verranno inviati al server.
All’interno di un form, i tag più utilizzati sono:
<input>— il campo di inserimento più versatile, con oltre 20 tipi diversi (text, email, password, number, date, file e molti altri)<textarea>— campo di testo multi-riga per commenti o messaggi lunghi<select>— menu a discesa con opzioni predefinite (ogni opzione è un<option>)<button>— pulsante cliccabile per inviare il form o eseguire azioni<label>— etichetta associata a un campo, fondamentale per l’accessibilità
L’attributo for del <label> deve corrispondere all’attributo id del campo associato. Questo collegamento permette agli screen reader di annunciare correttamente il campo e consente agli utenti di cliccare sull’etichetta per focalizzare il campo corrispondente.
Elementi Block vs Inline e Tag Deprecati
Una distinzione fondamentale in HTML è quella tra elementi di blocco e elementi inline. Gli elementi di blocco (come <div>, <p>, <h1>, <ul>, <table>, <form>) occupano l’intera larghezza disponibile e iniziano sempre su una nuova riga. Gli elementi inline (come <span>, <a>, <strong>, <em>, <img>, <code>) si inseriscono nel flusso del testo senza interromperlo.
Infine, è importante conoscere i tag deprecati che non dovresti più utilizzare. Tra questi: <font> (usa CSS per i font), <center> (usa CSS per il centramento), <marquee> (testo scorrevole), <frame> e <frameset> (sostituiti da iframe o layout CSS), <big> e <blink>. Questi tag appartengono a un’era passata del web e non devono essere utilizzati in nuovi progetti.
Padroneggiare questi tag essenziali ti fornisce gli strumenti per costruire qualsiasi pagina web. Man mano che acquisisci esperienza, potrai esplorare tag più specifici e avanzati, ma quelli descritti in questo articolo coprono la stragrande maggioranza dei casi d’uso nello sviluppo web quotidiano.
Hai bisogno di aiuto con lo sviluppo HTML del tuo sito web? G Tech Group offre servizi di sviluppo web professionale e consulenza tecnica. Contattaci a su*****@********up.it o via WhatsApp al 0465 84 62 45.