03 Sémantické HTML5 — HTML Taháček

Záhlaví

Záhlaví stránky nebo sekce. Logo, navigace, titulek. Lze použít vícekrát na stránce.

BLOCKHTML5SEMANTIC

header může být na stránce vícekrát — jako záhlaví celého dokumentu (s logem a hlavní navigací) nebo jako záhlaví jednotlivých <article> nebo <section> elementů. Prohlížeče ho označí jako banner landmark — ale jen pokud není vnořen v jiném sémantickém elementu.

// Proč záležíScreen readery umožňují přeskočit přímo na banner landmark. Google identifikuje záhlaví webu. Srozumitelná struktura kódu pro celý tým. Sémantika říká "toto je záhlaví sekce", ne jen "toto má padding a background".

Alternativy (ne sémantické)

<div class="header"> — bez sémantiky <div role="banner"> — ARIA nouzové

Jeden hlavní header jako banner landmark
Víc headerů OK — jako záhlaví article/section
Patří sem: logo, hlavní nav, hero text, vyhledávání
Nevkládejte header do header
Neobsahuje footer ani main

Příklady

HTML

<!-- Hlavní header stránky -->
<header>
  <a href="/" class="logo">
    <img src="logo.svg" alt="MůjWeb">
  </a>
  <nav aria-label="Hlavní navigace">
    <ul>
      <li><a href="/">Domů</a></li>
      <li><a href="/produkty">Produkty</a></li>
    </ul>
  </nav>
</header>

<!-- Header uvnitř article -->
<article>
  <header>
    <h2>Název článku</h2>
    <p>Autor: <a href="/jana">Jana</a></p>
    <time datetime="2024-03-15">
      15. března 2024
    </time>
  </header>
  <p>Text článku...</p>
</article>

<main>

Hlavní obsah

Jedinečný hlavní obsah stránky. Pouze jeden na stránku. "Skip to content" pro klávesnici.

BLOCKHTML5SEMANTIC

main označuje obsah, který je unikátní pro danou stránku — ne opakující se prvky jako navigace nebo footer. Screen readery umožňují přeskočit přímo na main. Jen jeden main na stránku a nesmí být vnořen do header, footer, nav, aside nebo article.

// "Skip to content" odkazPřidejte na začátek stránky skrytý odkaz <a href="#main-content" class="skip-link">Přeskočit na obsah</a>. Uživatelé klávesnice a screen readerů ho uvidí při focusu a mohou přeskočit celou navigaci. Jeden z nejdůležitějších accessibility vzorů.

Alternativy

<div id="main" role="main"> — nouzové

Jen jeden main na celou stránku
Nesmí být v header, footer, nav, aside, article
Google ho identifikuje jako hlavní obsah stránky
Přidejte id="main-content" pro skip link

Příklad se skip linkem

HTML + CSS

<!-- Skip link — první element v body -->
<a href="#main-content" class="skip-link">
  Přeskočit na obsah
</a>

<header>...</header>

<main id="main-content">
  <h1>Hlavní nadpis stránky</h1>
  <section>...</section>
  <article>...</article>
</main>

<footer>...</footer>

<!-- CSS pro skip link -->
<style>
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: #000;
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 0 0 4px 4px;
  text-decoration: none;
  z-index: 9999;
}
.skip-link:focus {
  top: 0; /* zobrazí se při focusu */
}
</style>

<nav>

Navigace

Sekce s hlavními navigačními odkazy. Pro více nav na stránce použijte aria-label k odlišení.

BLOCKHTML5SEMANTIC

nav označuje skupinu navigačních odkazů. Ne každý seznam odkazů musí být nav — jen hlavní navigační sekce. Pro více nav na stránce (hlavní menu + breadcrumbs + paginace) použijte aria-label pro odlišení.

// aria-current pro aktivní odkazPřidejte aria-current="page" na odkaz aktuální stránky. Screen reader ho ohlásí jako "aktuální stránka". Je to lepší než jen CSS třída .active.

Atributy

aria-label	Popis nav pro screen readery (když je víc nav)	string
aria-labelledby	ID elementu který nav popisuje	id

aria-current="page" na aktivním odkazu
Více nav na stránce → každá s unikátním aria-label
Breadcrumbs, paginace, footer nav = také nav
Navigace uvnitř nav typicky jako ul + li + a

Příklady

HTML

<!-- Hlavní navigace -->
<nav aria-label="Hlavní navigace">
  <ul>
    <li>
      <a href="/" aria-current="page">
        Domů
      </a>
    </li>
    <li><a href="/produkty">Produkty</a></li>
    <li><a href="/kontakt">Kontakt</a></li>
  </ul>
</nav>

<!-- Breadcrumbs -->
<nav aria-label="Drobečková navigace">
  <ol>
    <li><a href="/">Domů</a></li>
    <li><a href="/nože">Nože</a></li>
    <li aria-current="page">Victorinox</li>
  </ol>
</nav>

<!-- Paginace -->
<nav aria-label="Stránkování">
  <a href="?page=1">← Předchozí</a>
  <a href="?page=2"
    aria-current="page">2</a>
  <a href="?page=3">Další →</a>
</nav>

Tematická sekce

Tematicky soudržná část dokumentu. Měla by mít nadpis (h2–h6).

BLOCKHTML5SEMANTIC

section je tematicky soudržná část obsahu — jako kapitola v knize. Kdy použít: obsah tvoří logický celek a dává smysl v obsahu dokumentu. Kdy nepoužít: pro čistě layoutové skupení — k tomu slouží div.

// section vs div vs articlesection = část webu/dokumentu která patří k celku. article = samostatný obsah fungující bez kontextu. div = čistě layout bez sémantiky. Ptejte se: "Přidal bych to do osnovy dokumentu?" Ano → section. "Funguje to samo o sobě?" Ano → article. Jinak → div.

Alternativy

<div> pro čistě layoutové skupiny <article> pro samostatný obsah

Atributy

aria-label	Popis sekce (pokud nemá nadpis)	string
aria-labelledby	ID nadpisu sekce	id

Každá section by měla mít nadpis (h2–h6)
Vnořené sections jsou OK — hierarchie
section ≠ article: section je část webu, article je samostatný
Bez nadpisu: použijte aria-label nebo raději div

Příklady

HTML

<main>
  <section id="o-nas">
    <h2>O nás</h2>
    <p>Jsme firma...</p>
  </section>

  <section id="produkty">
    <h2>Naše produkty</h2>
    <ul>...</ul>
  </section>

  <section id="reference">
    <h2>Co říkají zákazníci</h2>
    <!-- Každá recenze = article uvnitř section -->
    <article>
      <p>"Skvělý produkt!"</p>
      <footer>— Jan Novák</footer>
    </article>
    <article>
      <p>"Doporučuji!"</p>
      <footer>— Jana Dvořák</footer>
    </article>
  </section>

  <section id="kontakt">
    <h2>Kontakt</h2>
    <form>...</form>
  </section>
</main>

Samostatný obsah

Nezávislý obsah fungující bez okolního kontextu: blogový příspěvek, novinový článek, recenze, karta produktu.

BLOCKHTML5SEMANTIC

article označuje obsah, který dává smysl sám o sobě — dal by se vytáhnout a syndikovat na jiný web (RSS), přeposlat nebo zobrazit mimo kontext. Google může zobrazit v rich results. RSS čtečky ho automaticky rozpoznají.

// Kdy je obsah "article"Zeptejte se: "Mohl bych tento obsah zkopírovat na jiný web a dával by tam stále smysl?" Ano → article. Blogový příspěvek, novinový článek, recenze produktu, komentář, karta produktu, tweet/příspěvek = article. Sekce stránky "O nás" = section, ne article.

article může mít vlastní header a footer
Produktová karta = article
Komentář pod článkem = vnořený article
Google: article → kandidát na rich results
RSS čtečky identifikují article automaticky

Příklady

HTML

<!-- Blogový příspěvek -->
<article>
  <header>
    <h2>
      <a href="/clanek/html-tahak">
        HTML Taháček pro začátečníky
      </a>
    </h2>
    <p>
      Autor:
      <a href="/autor/jana">Jana</a>
      ·
      <time datetime="2024-03-15">
        15. 3. 2024
      </time>
    </p>
  </header>

  <p>Text článku...</p>

  <footer>
    <p>Tagy:
      <a href="/tag/html">HTML</a>,
      <a href="/tag/css">CSS</a>
    </p>
  </footer>
</article>

<!-- Karta produktu -->
<article class="product-card">
  <img src="nuz.jpg" alt="Victorinox Classic">
  <h3>Victorinox Classic</h3>
  <p class="price">299 Kč</p>
  <button type="button">Do košíku</button>
</article>

<aside>

Vedlejší obsah

Obsah volně související s hlavním obsahem: sidebar, callout box, reklama, biografie autora.

BLOCKHTML5SEMANTIC

aside označuje obsah, který je jen volně související s hlavním obsahem — sidebar, citáty vytrhovací (pull quotes), reklamy, widgety, biografie autora. Screen reader označuje jako "complementary" landmark.

// aside vs sectionPtejte se: "Mohl bych tento obsah odstranit a stránka by stále dávala smysl?" Ano → aside. Sidebar s doporučenými články, reklamy, widget počasí = aside. Hlavní obsah sekce = section.

Alternativy

<div class="sidebar"> — bez sémantiky

Sidebar mimo article = aside jako landmark
Pull-quote uvnitř article = aside
Reklamy patří do aside, ne main
SEO: Google identifikuje vedlejší obsah

Příklady

HTML

<!-- Layout s main + aside -->
<div class="layout">
  <main>
    <article>
      <h1>Název článku</h1>
      <p>Text...</p>

      <!-- Pull-quote uvnitř article -->
      <aside>
        <blockquote>
          "Nejlepší investice je vzdělání."
        </blockquote>
      </aside>

      <p>Pokračování...</p>
    </article>
  </main>

  <!-- Sidebar -->
  <aside aria-label="Sidebar">
    <section>
      <h3>Související články</h3>
      <ul>...</ul>
    </section>
    <section>
      <h3>O autorovi</h3>
      <p>Jana Nováková...</p>
    </section>
  </aside>
</div>

Zápatí

Zápatí dokumentu nebo sekce. Copyright, kontakty, sekundární navigace, sitemap.

BLOCKHTML5SEMANTIC

footer je zápatí — jako header, může být na stránce vícekrát (zápatí dokumentu, zápatí article). Hlavní footer dokumentu je označen jako contentinfo landmark. Typický obsah: copyright, kontakty, sitemap, právní info, sekundární navigace.

// Sticky footer bez JSModerní způsob: CSS Grid na body s min-height: 100vh a grid-template-rows: auto 1fr auto. Footer vždy dole, main se roztáhne. Žádný JS, žádné hacky s margin.

footer jako zápatí article nebo section = OK
Screen reader: contentinfo landmark (jen hlavní footer)
Google považuje footer obsah za méně důležitý pro SEO
Sticky footer: CSS grid na body

Příklady

HTML + CSS

<footer>
  <div class="footer-grid">
    <div>
      <h3>MůjWeb</h3>
      <p>Popis firmy...</p>
    </div>
    <nav aria-label="Footer navigace">
      <ul>
        <li><a href="/o-nas">O nás</a></li>
        <li><a href="/gdpr">GDPR</a></li>
      </ul>
    </nav>
  </div>
  <p>
    <small>© 2024 MůjWeb s.r.o.</small>
  </p>
</footer>

<!-- CSS: Sticky footer -->
<style>
body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  margin: 0;
}
/* header auto, main 1fr, footer auto */
</style>

Kontaktní informace

Kontaktní info autora nebo organizace. Zobrazuje se kurzívou. Patří do footer nebo article.

BLOCKHTML5SEMANTIC

address poskytuje kontaktní informace pro nejbližší article nebo body. Může obsahovat email, telefon, fyzickou adresu, sociální sítě. Prohlížeče ho zobrazují kurzívou. Pozor: není pro fyzické adresy obecně — jen kontakt autora/organizace.

// Schema.org a addressKombinujte s Schema.org JSON-LD pro rich results. Google může zobrazit kontaktní informace přímo ve výsledcích vyhledávání (Knowledge Panel). address element je sémantický základ, Schema.org přidá strojové čtení.

Alternativy

<p> s kontakty — bez sémantiky

Patří do footer nebo article — ne jako obecná adresa
Prohlížeče zobrazují kurzívou (lze přebít CSS)
Schema.org crawleři ho rozpoznají
Jen pro kontakt autora/organizace, ne pro mapu

Příklady

HTML

<!-- V footer stránky -->
<footer>
  <address>
    <a href="mailto:info@web.cz">
      info@web.cz
    </a><br>
    <a href="tel:+420123456789">
      +420 123 456 789
    </a><br>
    Novákova 1, Praha 1, 110 00
  </address>
</footer>

<!-- V article (autor) -->
<article>
  <p>Text článku...</p>
  <footer>
    <address>
      Napsala:
      <a href="/jana">Jana Nováková</a>
    </address>
  </footer>
</article>

<!-- CSS: zrušit kurzívu -->
<style>
address { font-style: normal; }
</style>