dexblog.ro
HTML Toate tagurile HTML

în HTML

Structură semantică (Layout) HTML5

Conținut complet și autonom, care are sens de unul singur dacă este distribuit separat (articol de blog, știre, comentariu).

Sintaxă tag 
<article>
  <h2>Titlu articol</h2>
  <p>Conținut autonom...</p>
</article>

Ce face <article>

Tagul <article> reprezintă o compoziție completă și independentă dintr-o pagină web.

Exemple clasice: o postare pe un blog, un articol de știri, un comentariu al unui utilizator sau un card de produs. Dacă acel conținut ar putea fi publicat printr-un flux RSS sau pe rețelele sociale și ar fi înțeles fără restul paginii, el este un <article>.

Exemple

Exemplul 1: Articol de blog cu antet propriu și conținut

Articolul conține titlul, data și paragrafele de text.

<article>
  <header>
    <h2>Cum folosești tagurile semantice</h2>
    <p><small>Publicat pe 22 octombrie 2026</small></p>
  </header>
  <p>Tagurile semantice îmbunătățesc accesibilitatea și clasarea în motoarele de căutare.</p>
</article>

Ce afișează browserul

O căsuță autonomă de articol cu titlul, data publicării și conținutul text.

Greșeli frecvente

  • Folosirea lui
    pe post de container generic de stilizare în loc de

    .

Comenzi înrudite

  • <section>: Marchează o secțiune tematică a unei pagini sau a unui articol, care ar trebui să aibă propriul titlu (h2-h6).
  • <main>: Conține subiectul principal și unic al documentului, excluzând meniurile, bara laterală și subsolul.
  • <aside>: Conținut conex sau secundar: bară laterală (sidebar), casetă cu informații suplimentare sau reclame.
  • <div>: Container generic de tip bloc (division), fără semnificație semantică, folosit pentru gruparea elementelor și stilizare CSS.