Lekce 1: Sémantické HTML5 — Kurz pro dospělé

📖 Kapitola 1

Proč záleží na sémantice?

HTML5 přineslo v roce 2014 velkou změnu: místo dřívějšího <div> pro vše máme nyní tagy, které nesou význam. Výsledný HTML kód vypadá stejně v prohlížeči, ale zcela jinak ho čtou:

🤖 Vyhledávače (Google, Bing) — lépe indexují obsah, výsledky jsou relevantnější
♿ Čtečky obrazovky — slepí nebo zrakově postižení uživatelé se lépe orientují
👨‍💻 Vy sami — kód je čitelnější a lépe udržovatelný
🛠️ Ostatní vývojáři — snazší spolupráce v týmu

💡

Co znamená "sémantický"? Z řeckého σημαντικός — "mající význam". Sémantický tag říká: nejen jak vypadá prvek, ale co je a jakou hraje roli v dokumentu.

Podívejte se na tyto dvě verze kódu — vizuálně jsou v prohlížeči totožné, ale jejich kvalita je zcela odlišná:

Živý editor — špatně vs. správně

Živý editor — sémantická verze

Kapitola 1 / 8 Další: div vs sémantika →

📊 Kapitola 2

div vs. sémantické tagy

<div> a <span> jsou generické kontejnery bez vlastního významu. Jsou stále užitečné pro CSS layouty, ale jako primární strukturní prvky je nahradily sémantické alternativy.

Nesémantické	Sémantická alternativa	Kdy použít sémantický?
`<div class="header">`	`<header>`	Záhlaví stránky nebo sekce
`<div class="nav">`	`<nav>`	Hlavní navigační menu
`<div class="main">`	`<main>`	Hlavní obsah stránky (jen 1×)
`<div class="article">`	`<article>`	Samostatný obsah (blogpost, karta)
`<div class="sidebar">`	`<aside>`	Vedlejší obsah, sidebar
`<div class="section">`	`<section>`	Tematická skupina obsahu
`<div class="footer">`	`<footer>`	Zápatí stránky nebo sekce
`<span>`	`<time>, <mark>, <cite>`	Datum/čas, zvýraznění, citace

⚠️

Pravidlo: div a span nevymizí! Pro CSS wrappery, grid buňky, nebo JS hooky používejte <div> klidně dál. Sémantické tagy jsou pro strukturu a obsah, ne pro každý CSS kontejner.

🧠 Kvíz: Jaký tag použijete pro hlavní navigaci webu?

<div class="navigation"> <nav> <menu> <ul class="nav">

Kapitola 2 / 8 Další: Klíčové tagy →

🏷️ Kapitola 3

Klíčové HTML5 sémantické tagy

Projdeme nejdůležitější tagy s praktickými příklady. Každý tag má svůj specifický účel:

<header> a <footer>

Mohou se opakovat — každá <section> nebo <article> může mít vlastní header a footer.

<article> vs <section>

Toto je nejčastější zdroj zmatku:

<article> — obsah, který dává smysl sám o sobě, vytrhnutý z kontextu (blogpost, komentář, tweet, produkt v e-shopu)
<section> — tematická část stránky, která patří k celku. Vždy by měla mít nadpis (h2–h6)

article vs section

<figure> a <figcaption>

Pro obrázky, grafy, ukázky kódu — vždy s popiskem:

<figure>
  <img src="graf.png" alt="Růst tržeb Q3 2025">
  <figcaption>Graf 1: Meziroční růst tržeb, Q3 2025</figcaption>
</figure>

<time> a <mark>

<!-- time: strojově čitelné datum -->
<time datetime="2025-09-15">15. září 2025</time>

<!-- mark: zvýraznění relevantního textu (ne jen styling!) -->
<p>Ve výsledcích hledání je <mark>sémantické HTML</mark> klíčové.</p>

✅

Tip: <details> a <summary> — nativní HTML akordeon bez JavaScriptu! Vyzkoušejte v editoru: <details><summary>Klikni</summary>Skrytý obsah</details>

Kapitola 3 / 8 Další: Struktura stránky →

🗺️ Kapitola 4

Kompletní struktura HTML5 stránky

Jak vypadá profesionální kostra moderní stránky? Každý prvek má své místo:

<!DOCTYPE html>

<head>

<title>Název stránky</title>

</head>

<body>

<header> ← záhlaví (logo, nav)

</header>

<main> ← pouze 1× na stránce!

</main>

<aside> ← sidebar (mimo main)

</aside>

</body>

</html>

Kompletní kostra — upravte ji!

<!DOCTYPE html>
<html lang="cs">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0">
  <title>Moje stránka</title>
  <style>
    body { font-family: sans-serif; margin: 0; }
    header { background: #1E3A5F; color: white; padding: 1rem 2rem; }
    nav a { color: #90CAF9; margin: 0 0.5rem; }
    main { padding: 2rem; }
    aside { background: #F5F5F5; padding: 1rem 2rem; border-left: 3px solid #1E3A5F; }
    footer { background: #333; color: #aaa; text-align: center; padding: 1rem; font-size: 0.8rem; }
  </style>
</head>
<body>
  <header>
    <h1>Logo</h1>
    <nav>
      <a href="/">Domů</a>
      <a href="/blog">Blog</a>
      <a href="/kontakt">Kontakt</a>
    </nav>
  </header>
  <main>
    <section>
      <h2>Hlavní obsah</h2>
      <p>Vítejte na mé stránce!</p>
    </section>
  </main>
  <aside>
    <h3>Sidebar</h3>
    <p>Doplňující informace...</p>
  </aside>
  <footer>
    <p>© 2025 Moje stránka</p>
  </footer>
</body>
</html>

Kapitola 4 / 8 Další: Atributy →

🔧 Kapitola 5

Důležité HTML atributy

Atributy dodávají tagům další informace. Znáte class a id — ale existuje mnoho dalších zásadně důležitých:

Datové atributy (data-*)

Vlastní atributy pro přenos dat do JavaScriptu — bez nutnosti skrytých inputů nebo globálních proměnných:

<button data-product-id="42" data-price="299" onclick="addToCart(this)">
  Přidat do košíku
</button>

<script>
function addToCart(btn) {
  const id = btn.dataset.productId;   // "42"
  const price = btn.dataset.price;    // "299"
  console.log(`Produkt ${id} za ${price} Kč`);
}
</script>

lang a dir

<html lang="cs">  <!-- jazyk dokumentu pro SEO a čtečky -->
<p lang="en">This paragraph is in English.</p>
<p dir="rtl">Arabic text goes right to left.</p>

tabindex a accesskey

<!-- tabindex: pořadí klávesy Tab -->
<input tabindex="1">
<input tabindex="2">
<button tabindex="3">Odeslat</button>

<!-- accesskey: klávesová zkratka (Alt+S) -->
<button accesskey="s"><u>S</u>hledat</button>

🧠 Kvíz: Co vrátí `btn.dataset.productId` pro `data-product-id="42"`?

Číslo 42 (number) Řetězec "42" (string) undefined data-product-id

Kapitola 5 / 8 Další: Přístupnost →

♿ Kapitola 6

Přístupnost (Accessibility / a11y)

Přístupný web mohou používat všichni — včetně lidí se zdravotním postižením. V EU je navíc od 2025 zákonná povinnost pro komerční weby (European Accessibility Act).

ARIA atributy

ARIA (Accessible Rich Internet Applications) doplňuje sémantiku pro dynamické prvky:

<!-- role: definuje typ prvku -->
<div role="alert">Formulář byl odeslán!</div>

<!-- aria-label: popis pro čtečky (bez viditelného textu) -->
<button aria-label="Zavřít dialog">✕</button>

<!-- aria-expanded: stav rozbalení (menu, accordion) -->
<button aria-expanded="false" onclick="toggleMenu(this)">
  Menu
</button>

<!-- aria-hidden: skryje prvek před čtečkami -->
<span aria-hidden="true">🎉</span> Gratulujeme!

alt text u obrázků

<!-- Informativní obrázek: popis obsahu -->
<img src="graf.png" alt="Sloupcový graf tržeb 2024: Q1 120tis, Q2 145tis, Q3 132tis, Q4 178tis">

<!-- Dekorativní obrázek: prázdné alt (čtečka přeskočí) -->
<img src="dekorace.svg" alt="">

<!-- Nikdy nevynechávejte atribut alt úplně! -->

🛠️

Nástroje pro testování přístupnosti: Chrome DevTools → Lighthouse (záložka Accessibility), rozšíření axe DevTools, nebo WAVE (wave.webaim.org). Cíl: skóre 90+.

🧠 Kvíz: Dekorativní obrázek (pouze vizuální ornament) má mít atribut alt nastaven na:

Alt atribut vynechán alt="dekorace" alt="" (prázdný string) alt="obrázek"

Kapitola 6 / 8 Další: Cvičení →

💪 Kapitola 7

Praktické cvičení

Napište sémantické HTML pro jednoduchou stránku blogu. Musí obsahovat: správnou kostru, header s navigací, main s article (nadpis, datum, 2 odstavce, obrázek s figcaption), aside se seznamem nejnovějších článků, a footer.

📋

Checklist: <!DOCTYPE html>, lang="cs", <meta charset>, <meta viewport>, <title>, <header><nav>, <main><article>, <time datetime>, <figure><figcaption>, <aside>, <footer>

Vaše řešení

🏅

Odznak: Sémantický Architekt

Dokončili jste Lekci 1 — zvládáte správnou strukturu HTML5 dokumentů.

Kapitola 7 / 8 Další: Taháček →

📌 Kapitola 8

Taháček — rychlá reference

Přehled nejdůležitějšího z Lekce 1 na jednom místě.

Sémantické tagy — přehled

Tag	Účel	Poznámka
`<header>`	Záhlaví stránky/sekce	Může se opakovat
`<nav>`	Navigační menu	Pro hlavní navigaci
`<main>`	Hlavní obsah	Pouze 1× na stránce!
`<article>`	Samostatný obsah	Blogpost, karta, komentář
`<section>`	Tematická skupina	Vždy s nadpisem
`<aside>`	Vedlejší obsah	Sidebar, poznámky
`<footer>`	Zápatí stránky/sekce	Může se opakovat
`<figure>`	Obrázek/graf s popisem	S <figcaption>
`<time>`	Datum a čas	datetime="YYYY-MM-DD"
`<mark>`	Zvýraznění	Relevantní, ne jen styling

Zlatá pravidla

✅ <main> je pouze jednou na celé stránce
✅ <section> vždy obsahuje nadpis (h2–h6)
✅ <article> dává smysl i vytrhnutý z kontextu
✅ Každý <img> má atribut alt (i prázdný pro dekorativní)
✅ <html> má vždy lang="cs" (nebo příslušný jazyk)
✅ data-* pro custom data, ne class nebo id
❌ <div> pro strukturu stránky (jen pro CSS wrappery)
❌ Vynechávat <!DOCTYPE html> nebo charset

Kapitola 8 / 8 — Lekce dokončena! Lekce 2: CSS Box model →