Tag HTML <article>
Il tag HTML <article> delimita contenuti indipendenti e autonomi come un post di blog. Scopri la sintassi, il ruolo ARIA e le differenze con <section>.
Il tag <article> è uno degli elementi di sezionamento HTML5. Definisce un contenuto indipendente e autonomo — qualcosa che avrebbe ancora senso da solo se lo si estraesse dalla pagina e lo si pubblicasse altrove. Un buon test: se il contenuto potesse essere distribuito tramite un feed RSS, mostrato come card autonoma o ripubblicato su un altro sito senza perdere significato, allora appartiene a un <article>.
Gli usi tipici dell'elemento <article> includono:
- un post di blog o un articolo di notizie
- un post di un forum
- una scheda prodotto in un elenco
- un commento o una recensione di un utente
- un widget o gadget interattivo
Perché usare l'elemento <article>?
L'elemento <article> porta un significato che un generico <div> non ha:
- Accessibilità. Quando un
<article>ha un nome accessibile (ad esempio un'intestazione referenziata tramitearia-labelledby), le tecnologie assistive lo espongono come un landmarkarticle. Gli utenti di screen reader possono passare da un articolo all'altro invece di leggere l'intera pagina dall'inizio alla fine. - SEO e semantica. I motori di ricerca e gli strumenti di lettura (come la "modalità lettura" dei browser) usano
<article>come segnale per il corpo principale e autonomo del contenuto, aiutandoli a estrarre il testo primario di un post. - Manutenibilità. Il markup descrive lo scopo del contenuto, così CSS e JavaScript possono puntare a unità semantiche reali anziché a semplici hook di stile.
<article> vs <section> vs <div>
Questi tre elementi sono facili da confondere. Usa questa regola pratica:
<article>— contenuto autonomo che potrebbe essere distribuito o sindacato indipendentemente (un post di blog, un commento, una scheda prodotto). Chiediti: "Potrebbe stare da solo altrove?" Se sì, usa<article>.<section>— un raggruppamento tematico di contenuti correlati all'interno di un documento, di solito con un'intestazione (ad esempio "Commenti" o "Prodotti correlati"). È parte della struttura del documento ma non è pensato per stare da solo.<div>— un contenitore generico privo di significato semantico. Usalo solo quando nessun altro elemento è adatto, tipicamente solo per lo stile o il layout.
Un <article> e una <section> possono essere annidati in entrambe le direzioni: una <section> può raggruppare più elementi <article>, e un <article> può contenere elementi <section> che ne suddividono il contenuto. Quando gli elementi <article> sono annidati, quello interno rappresenta contenuto correlato a quello esterno — ad esempio, un commento all'interno di un post di blog.
Strutturare un <article>
Puoi usare alcuni elementi correlati per dare a un <article> una struttura completa:
- Elementi di intestazione (
<h1>fino a<h6>) per titolare e strutturare il suo contenuto. Ogni<article>può iniziare con la propria intestazione. - Un
<header>per il contenuto introduttivo come il titolo e i metadati, e un<footer>per il contenuto di chiusura. - Un elemento
<address>per fornire informazioni sull'autore. Si applica a ogni<article>indipendentemente, inclusi quelli annidati. - Un elemento
<time>con un attributodatetimeper contrassegnare la data di pubblicazione.
In un singolo documento HTML possono essere usati più tag <article>.
Sintassi
Il tag <article> va in coppia. Il contenuto è scritto tra il tag di apertura (<article>) e quello di chiusura (</article>).
Esempio del tag HTML <article>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<article>
<h1>Title of the article</h1>
<p>Text of the article</p>
</article>
</body>
</html>Risultato
Esempio del tag HTML <article> nel tag HTML <section>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<section>
<h1>Articles about flowers</h1>
<article>
<h2>Roses</h2>
<p>Rose – the queen of flowers - is the object of worship and ardent love. Since time immemorial, the rose has been the object of worship and admiration.</p>
</article>
<article>
<h2>Lilies</h2>
<p> Lily - an amazing beauty flower, one of the most ancient among a variety of bulbous plants. </p>
</article>
</section>
</body>
</html>Esempio di una card di post di blog con <header>, <footer>, <time> e <address>:
Questo esempio mostra un post di blog realistico e autonomo: un <header> contiene il titolo e la data di pubblicazione, un <address> indica l'autore, e un <footer> chiude il post.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<article>
<header>
<h2>How to Grow Roses</h2>
<p>
Published on
<time datetime="2026-06-17">June 17, 2026</time>
</p>
</header>
<p>Rose – the queen of flowers – is the object of worship and ardent love. With a little care, anyone can grow healthy, fragrant roses at home.</p>
<footer>
<p>Written by
<address>
<a href="mailto:[email protected]">Jane Doe</a>
</address>
</p>
</footer>
</article>
</body>
</html>Attributi
Il tag <article> non ha attributi propri specifici. Supporta gli Attributi Globali e gli Attributi Evento.
Stilizzare l'elemento <article>
Per impostazione predefinita, <article> è un elemento a livello di blocco senza stile visivo, quindi appare uguale a un semplice <div>. L'aspetto viene aggiunto manualmente con CSS. La regola seguente dà a ogni articolo un bordo, del padding e della spaziatura, in modo che le card siano visivamente separate:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
article {
border: 1px solid #ccc;
border-radius: 8px;
padding: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<article>
<h2>Roses</h2>
<p>Rose – the queen of flowers – is the object of worship and ardent love.</p>
</article>
<article>
<h2>Lilies</h2>
<p>Lily – an amazing beauty flower, one of the most ancient bulbous plants.</p>
</article>
</body>
</html>Accessibilità e ARIA
L'elemento <article> ha un ruolo ARIA implicito di article, quindi di solito non è necessario aggiungere role="article" manualmente. Per renderlo un landmark navigabile che gli screen reader possano elencare e raggiungere direttamente, assegnagli un nome accessibile — nella maggior parte dei casi puntando aria-labelledby all'intestazione al suo interno:
<article aria-labelledby="post-title">
<h2 id="post-title">How to Grow Roses</h2>
<p>Roses reward patient gardeners with fragrant, long-lasting blooms.</p>
</article>Gli elementi di sezionamento correlati da abbinare a <article> sono <section> per i raggruppamenti tematici, <aside> per i contenuti tangenzialmente correlati (come una barra laterale), e <header> / <footer> per il contenuto introduttivo e di chiusura. Consulta la panoramica degli elementi di sezionamento HTML5 per il quadro completo.