Sémantické značky: header, nav, main a footer

Na rozdělení stránky jsme zatím používali obecné značky div. Dnes si ukážeme značky, které mají význam. Prohlížeč i vyhledávač z nich poznají, co je hlavička, menu nebo hlavní obsah.

Obecný div a jeho význam

<div class="hlavicka">...</div>
<div class="menu">...</div>
<div class="obsah">...</div>

Takový kód funguje, ale prohlížeč nezná význam jednotlivých částí. Název třídy „menu“ je jen jméno, které dáváte vy. Stejný obsah se sémantickými značkami je srozumitelnější.

Kostra stránky

<body>
  <header>
    <nav>...odkazy...</nav>
  </header>
  <main>
    <article>...hlavní text...</article>
    <section>...další část...</section>
  </main>
  <footer>...patička...</footer>
</body>

K čemu která značka slouží

• header je úvod stránky nebo sekce, obvykle logo a nadpis.
• nav je blok s hlavními odkazy.
• main je hlavní obsah stránky. Na jedné stránce má být jen jeden.
• article je samostatný celek, který by měl dávat smysl i sám, třeba článek nebo příspěvek.
• section je tematická část obsahu, obvykle s nadpisem.
• footer je patička s kontaktem a autorskými údaji.

Nadpisy v pořádku

Nadpisy h1 až h6 tvoří osnovu stránky. Na jedné stránce by měl být jeden h1 a pak se postupuje po úrovních. Nepřeskakujte z h1 rovnou na h4 jen kvůli velikosti písma. Velikost upravujte v CSS.

Časté chyby

• Všechno v divu. Když je vše div, prohlížeč ani vyhledávač nepoznají, co je hlavní.
• Více main na stránce. Značka main má být na stránce jen jednou.
• Nadpis podle velikosti. Velikost nastavuje CSS. Nadpis má odpovídat obsahu.
• Nav u každého seznamu odkazů. Značku nav použijte jen pro hlavní navigaci, ne pro každý seznam.

Teď umíte rozdělit stránku tak, aby dávala smysl nejen návštěvníkovi, ale i vyhledávači. 👍