Impara tutto sui tag HTML e gli attributi. Scopri come utilizzare correttamente gli elementi HTML, i loro attributi e le migliori pratiche per lo sviluppo web.
I tag HTML e i loro attributi sono i mattoni fondamentali di ogni pagina web. Comprendere come funzionano, come utilizzarli correttamente e come sfruttare al meglio le loro potenzialità è essenziale per diventare uno sviluppatore web competente. Questa guida approfondita ti fornirà tutte le conoscenze necessarie per padroneggiare i tag e gli attributi HTML.
I tag HTML sono elementi di markup che definiscono la struttura e il significato del contenuto di una pagina web. Ogni tag ha uno scopo specifico e comunica al browser come interpretare e visualizzare il contenuto racchiuso al suo interno.
Un tag HTML è composto da diversi elementi:
<tagname attribute="value">Contenuto</tagname>
< e > delimitano il tag/ prima del nome del tagI tag HTML si dividono in due categorie principali:
Questi tag racchiudono contenuto e richiedono sia un tag di apertura che uno di chiusura:
<p>Questo è un paragrafo.</p>
<h1>Questo è un titolo.</h1>
<div>Questo è un contenitore generico.</div>
Questi tag non contengono contenuto e si chiudono automaticamente:
<img src="immagine.jpg" alt="Descrizione">
<br>
<hr>
<input type="text" name="nome">
Definiscono la struttura generale del documento:
<!DOCTYPE html>
<html>
<head>
<title>Titolo della Pagina</title>
<meta charset="UTF-8">
</head>
<body>
<header>Intestazione</header>
<main>Contenuto principale</main>
<footer>Piè di pagina</footer>
</body>
</html>
Forniscono significato al contenuto:
<article>Articolo indipendente</article>
<section>Sezione di contenuto</section>
<nav>Menu di navigazione</nav>
<aside>Contenuto laterale</aside>
<figure>Figura con didascalia</figure>
<figcaption>Didascalia della figura</figcaption>
Formattano e strutturano il testo:
<h1>Titolo di primo livello</h1>
<h2>Titolo di secondo livello</h2>
<p>Paragrafo di testo</p>
<strong>Testo importante</strong>
<em>Testo enfatizzato</em>
<mark>Testo evidenziato</mark>
<small>Testo piccolo</small>
Creano elenchi ordinati e non ordinati:
<!-- Lista non ordinata -->
<ul>
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ul>
<!-- Lista ordinata -->
<ol>
<li>Primo passo</li>
<li>Secondo passo</li>
<li>Terzo passo</li>
</ol>
<!-- Lista di definizioni -->
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
Incorporano contenuti multimediali:
<img src="foto.jpg" alt="Descrizione della foto">
<video controls>
<source src="video.mp4" type="video/mp4">
Il tuo browser non supporta il tag video.
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Il tuo browser non supporta il tag audio.
</audio>
Creano tabelle strutturate:
<table>
<thead>
<tr>
<th>Nome</th>
<th>Età</th>
<th>Città</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mario</td>
<td>30</td>
<td>Roma</td>
</tr>
<tr>
<td>Giulia</td>
<td>25</td>
<td>Milano</td>
</tr>
</tbody>
</table>
Creano moduli interattivi:
<form action="/submit" method="post">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="messaggio">Messaggio:</label>
<textarea id="messaggio" name="messaggio" rows="4"></textarea>
<button type="submit">Invia</button>
</form>
Gli attributi HTML forniscono informazioni aggiuntive sui tag e modificano il loro comportamento o aspetto. Sono sempre specificati nel tag di apertura e seguono il formato nome="valore".
<tag attributo1="valore1" attributo2="valore2">contenuto</tag>
Questi attributi possono essere utilizzati con qualsiasi tag HTML:
Fornisce un identificatore unico per l'elemento:
<div id="intestazione-principale">Contenuto unico</div>
<p id="paragrafo-importante">Testo importante</p>
Caratteristiche dell'attributo id:
Assegna una o più classi CSS all'elemento:
<p class="testo-rosso">Testo con classe singola</p>
<div class="contenitore grande centrato">Elemento con classi multiple</div>
Caratteristiche dell'attributo class:
Applica stili CSS inline all'elemento:
<p style="color: blue; font-size: 18px;">Testo stilizzato</p>
<div style="background-color: yellow; padding: 10px;">Contenitore colorato</div>
Nota: È preferibile utilizzare CSS esterni invece di stili inline.
Fornisce informazioni aggiuntive mostrate al passaggio del mouse:
<p title="Questo è un suggerimento">Passa il mouse qui</p>
<img src="foto.jpg" alt="Foto" title="Foto scattata nel 2025">
Specifica la lingua del contenuto dell'elemento:
<html lang="it">
<p lang="en">This paragraph is in English</p>
<span lang="fr">Ce texte est en français</span>
Attributi personalizzati per memorizzare dati:
<div data-user-id="123" data-role="admin">Utente</div>
<button data-action="delete" data-confirm="true">Elimina</button>
<img src="percorso/immagine.jpg"
alt="Descrizione dell'immagine"
width="300"
height="200"
loading="lazy"
title="Titolo dell'immagine">
Attributi principali:
<a href="https://www.esempio.com"
target="_blank"
rel="noopener noreferrer"
title="Visita Esempio.com"
download="file.pdf">
Collegamento esterno
</a>
Attributi principali:
<form action="/submit" method="post" enctype="multipart/form-data">
<input type="text"
name="username"
id="username"
placeholder="Inserisci il tuo username"
required
minlength="3"
maxlength="20"
pattern="[a-zA-Z0-9]+"
autocomplete="username">
<input type="email"
name="email"
required
placeholder="email@esempio.com">
<input type="password"
name="password"
required
minlength="8">
<button type="submit">Invia</button>
</form>
Attributi per input:
<video controls autoplay muted loop width="640" height="360">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Il tuo browser non supporta il tag video.
</video>
<audio controls preload="metadata">
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Il tuo browser non supporta il tag audio.
</audio>
Attributi multimediali:
Alcuni attributi sono booleani, cioè la loro presenza indica "vero" e la loro assenza indica "falso":
<input type="checkbox" checked>
<input type="text" required disabled>
<video controls autoplay muted>
<option selected>Opzione selezionata</option>
Attributi booleani comuni:
<!-- Buono -->
<article>
<header>
<h1>Titolo dell'Articolo</h1>
<time datetime="2025-09-03">3 Settembre 2025</time>
</header>
<p>Contenuto dell'articolo...</p>
</article>
<!-- Evita -->
<div>
<div>Titolo dell'Articolo</div>
<div>3 Settembre 2025</div>
<div>Contenuto dell'articolo...</div>
</div>
<!-- Sempre includi alt per le immagini -->
<img src="foto.jpg" alt="Descrizione significativa">
<!-- Sempre includi for nei label -->
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome">
<!-- Buono -->
<div id="menu-navigazione" class="menu-orizzontale">
<p class="testo-introduttivo">
<!-- Evita -->
<div id="div1" class="red">
<p class="p1">
<!-- Usa sempre le virgolette -->
<img src="foto.jpg" alt="Descrizione">
<!-- Usa convenzioni di naming consistenti -->
<div class="contenitore-principale">
<div class="contenitore-secondario">
Usa strumenti di validazione per assicurarti che il tuo HTML sia corretto:
<!-- Scorretto -->
<img src=foto.jpg alt=Mia foto>
<!-- Corretto -->
<img src="foto.jpg" alt="Mia foto">
<!-- Scorretto -->
<div id="contenuto">Primo div</div>
<div id="contenuto">Secondo div</div>
<!-- Corretto -->
<div id="contenuto-1">Primo div</div>
<div id="contenuto-2">Secondo div</div>
<!-- Scorretto -->
<p class="importante">Testo</p class="importante">
<!-- Corretto -->
<p class="importante">Testo</p>
<!-- Scorretto -->
<input type="checkbox" checked="false">
<!-- Corretto -->
<input type="checkbox">
<input type="checkbox" checked>
HTML5 ha introdotto molti nuovi tag semantici:
<header>Intestazione della pagina o sezione</header>
<nav>Menu di navigazione</nav>
<main>Contenuto principale della pagina</main>
<section>Sezione tematica di contenuto</section>
<article>Contenuto indipendente</article>
<aside>Contenuto correlato o sidebar</aside>
<footer>Piè di pagina</footer>
<figure>
<img src="grafico.png" alt="Grafico delle vendite">
<figcaption>Grafico delle vendite del 2025</figcaption>
</figure>
<details>
<summary>Clicca per espandere</summary>
<p>Contenuto nascosto che si rivela al click.</p>
</details>
<mark>Testo evidenziato</mark>
<time datetime="2025-09-03">3 Settembre 2025</time>
<input type="email" placeholder="email@esempio.com">
<input type="url" placeholder="https://www.esempio.com">
<input type="tel" placeholder="+39 123 456 7890">
<input type="date">
<input type="time">
<input type="color">
<input type="range" min="0" max="100">
<input type="number" min="1" max="10">
Per migliorare l'accessibilità, utilizza attributi ARIA:
<button aria-label="Chiudi finestra di dialogo" aria-expanded="false">
<span aria-hidden="true">×</span>
</button>
<nav aria-label="Menu principale">
<ul role="menubar">
<li role="menuitem"><a href="/">Home</a></li>
<li role="menuitem"><a href="/about">Chi Siamo</a></li>
</ul>
</nav>
<div role="alert" aria-live="polite">
Messaggio di stato importante
</div>
Usa microdata per fornire informazioni strutturate:
<article itemscope itemtype="http://schema.org/Article">
<h1 itemprop="headline">Titolo dell'Articolo</h1>
<p>Scritto da <span itemprop="author">Mario Rossi</span></p>
<time itemprop="datePublished" datetime="2025-09-03">3 Settembre 2025</time>
<div itemprop="articleBody">
<p>Contenuto dell'articolo...</p>
</div>
</article>
<article class="product-card" itemscope itemtype="http://schema.org/Product">
<header>
<h2 itemprop="name">Smartphone XYZ</h2>
<img src="smartphone.jpg"
alt="Smartphone XYZ colore nero"
itemprop="image"
loading="lazy">
</header>
<div class="product-info">
<p itemprop="description">
Smartphone di ultima generazione con fotocamera avanzata.
</p>
<div class="price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price" content="599">€599</span>
<meta itemprop="priceCurrency" content="EUR">
<meta itemprop="availability" content="http://schema.org/InStock">
</div>
<button type="button"
class="btn-primary"
data-product-id="123"
aria-label="Aggiungi Smartphone XYZ al carrello">
Aggiungi al Carrello
</button>
</div>
</article>
<form class="contact-form"
action="/contact"
method="post"
novalidate
aria-labelledby="contact-title">
<h2 id="contact-title">Contattaci</h2>
<fieldset>
<legend>Informazioni Personali</legend>
<div class="form-group">
<label for="first-name">Nome *</label>
<input type="text"
id="first-name"
name="firstName"
required
aria-describedby="first-name-error"
autocomplete="given-name">
<div id="first-name-error" class="error-message" aria-live="polite"></div>
</div>
<div class="form-group">
<label for="email">Email *</label>
<input type="email"
id="email"
name="email"
required
aria-describedby="email-error email-help"
autocomplete="email">
<div id="email-help" class="help-text">
Useremo la tua email solo per rispondere alla tua richiesta.
</div>
<div id="email-error" class="error-message" aria-live="polite"></div>
</div>
</fieldset>
<fieldset>
<legend>Messaggio</legend>
<div class="form-group">
<label for="subject">Oggetto</label>
<select id="subject" name="subject" aria-describedby="subject-help">
<option value="">Seleziona un oggetto</option>
<option value="info">Richiesta informazioni</option>
<option value="support">Supporto tecnico</option>
<option value="feedback">Feedback</option>
</select>
<div id="subject-help" class="help-text">
Seleziona l'oggetto più appropriato per la tua richiesta.
</div>
</div>
<div class="form-group">
<label for="message">Messaggio *</label>
<textarea id="message"
name="message"
rows="5"
required
aria-describedby="message-counter"
maxlength="500"></textarea>
<div id="message-counter" class="character-counter">0/500 caratteri</div>
</div>
</fieldset>
<div class="form-actions">
<button type="submit" class="btn-primary">
Invia Messaggio
</button>
<button type="reset" class="btn-secondary">
Cancella
</button>
</div>
</form>
La padronanza dei tag HTML e degli attributi è fondamentale per creare pagine web ben strutturate, accessibili e semanticamente corrette. Comprendere non solo come utilizzare questi elementi, ma anche quando e perché utilizzarli, ti permetterà di sviluppare siti web di qualità professionale.
Ricorda che l'HTML è in continua evoluzione. Nuovi tag e attributi vengono aggiunti regolarmente, quindi è importante rimanere aggiornati sulle ultime specifiche e best practice. Pratica regolarmente, sperimenta con diversi tag e attributi, e non esitare a consultare la documentazione ufficiale quando hai dubbi.
L'obiettivo finale è creare codice HTML che sia non solo funzionale, ma anche semantico, accessibile e manutenibile. Con una solida comprensione dei tag e degli attributi HTML, avrai le basi necessarie per costruire esperienze web eccezionali per tutti gli utenti.
Continua a praticare, sperimenta con progetti reali e ricorda che ogni esperto è stato una volta un principiante. Il tuo viaggio nell'HTML è appena iniziato, e le possibilità sono infinite!