📖
Teorie
HTML5 zdůrazňuje sémantické elementy, které zlepšují čitelnost, přístupnost a SEO. Mezi důležité tagy patří <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>,
<form>, <figure>/<figcaption>, <time>. Správné použití H1–H6, role a ARIA atributy pro a11y.🎯
Tahák
- 1Používej sémantické tagy místo div-for-all
- 2H1 jedna na stránku (nebo logická hierarchie)
- 3ARIA: role, aria-label, aria-hidden pro přístupnost
❓
Typické otázky u maturity
- 1Proč je sémantika důležitá pro SEO a a11y?
- 2Kdy použít <section> vs. <article>?
🏷️
Klíčová slova
headernavmainsectionarticleARIAa11y
⚡
Praktická část
Zadání:
Vytvořte jednoduchý sémantický layout stránky se záhlavím, navigací, hlavním obsahem s 2 sekcemi a patičkou.
Kroky:
- 1Použij structure tagů: header, nav, main, section, footer
- 2Přidejte H1 a H2 dle hierarchie
- 3Zajistěte 'skip to content' link pro přístupnost
Kód:
index.html
<!doctype html>
<html lang="cs">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Školní stránka</title>
</head>
<body>
<a class="skip" href="#main">Přejít na obsah</a>
<header>
<h1>Moje škola</h1>
<nav aria-label="Hlavní navigace">
<ul><li><a href="#">Domů</a></li><li><a href="#">Kontakt</a></li></ul>
</nav>
</header>
<main id="main">
<section>
<h2>Novinky</h2>
<p>...</p>
</section>
<section>
<h2>O škole</h2>
<p>...</p>
</section>
</main>
<footer>© Škola</footer>
</body>
</html>Kontrolní seznam:
- ✓Validní HTML5
- ✓Sémantické tagy použity správně
- ✓Skip link a ARIA tam kde je potřeba