dexblog.ro
HTML Toate tagurile HTML

în HTML

Structură semantică (Layout) HTML5

Antetul introductiv al paginii sau al unei secțiuni: conține de regulă sigla, titlul și navigarea.

Sintaxă tag 
<header>
  <img src="logo.svg" alt="Logo">
  <h1>dexblog.ro</h1>
</header>

Ce face <header>

Tagul semantic <header> reprezintă zona de introducere a paginii sau a unui articol. Nu trebuie confundat cu tagul <head> (care conține metadate invizibile).

Poți avea un <header> principal pentru tot site-ul (cu logo și meniu) și câte un <header> secundar în fiecare <article> (cu titlul articolului, autorul și data publicării).

Exemple

Exemplul 1: Antetul principal al unui site web

Grupează logo-ul și meniul de navigare.

<header>
  <a href="/" class="logo"><strong>dexblog</strong>.ro</a>
  <nav>
    <a href="/invata/">Învață</a>
    <a href="/despre/">Despre</a>
  </nav>
</header>

Ce afișează browserul

dexblog.ro (îngroșat) urmat de linkurile de navigare Învață și Despre.

Greșeli frecvente

  • Confundarea tagului
    (vizibil în body) cu tagul (metadate invizibile).
  • Imbricarea unui
    în interiorul altui

    sau într-un

    .

Comenzi înrudite

  • <nav>: Marchează o secțiune dedicată navigației principale pe site sau a unui cuprins de capitole.
  • <main>: Conține subiectul principal și unic al documentului, excluzând meniurile, bara laterală și subsolul.
  • <footer>: Subsolul paginii sau al unei secțiuni: conține drepturi de autor, linkuri legale, date de contact și harta site-ului.
  • <article>: Conținut complet și autonom, care are sens de unul singur dacă este distribuit separat (articol de blog, știre, comentariu).