Úvod k úloze

Jakmile zvládnete vytvořit základní kostru HTML dokumentu, je čas posunout se dál – k sémantice a správnému používání HTML elementů. To, jaké značky (tagy) zvolíte, není náhodné. Každý element má svůj význam a pomáhá prohlížečům, vyhledávačům i čtečkám pro nevidomé porozumět tomu, co je na stránce obsahem. Dobrá sémantika dělá web nejen hezčí a přehlednější pro lidi, ale také technicky kvalitní a přístupný.

Teorie a principy

  1. Sémantické značky

    • Nadpisy (<h1> až <h6>) vyjadřují hierarchii obsahu.

    • Odstavce (<p>) se používají pro běžný text.

    • Seznamy (<ul>, <ol>, <li>) organizují informace do přehledných bodů.

    • Další sémantické značky: <header>, <footer>, <article>, <section>, <nav> – tyto pomáhají logicky členit obsah.

  2. Párové a nepárové tagy

    • Párové: mají otevírací i uzavírací část (např. <p> … </p>).

    • Nepárové (samonosné): nepotřebují uzavírací tag (např. <br>, <img>, <hr>).

  3. Komentáře v HTML

Praktické příklady kódu

Strukturovaný obsah s nadpisy a odstavci

Použití nepárových tagů

Typické chyby / záludnosti

  • Používání <br> místo odstavců – pro oddělení větších bloků textu vždy používejte <p>.

  • Chybějící alternativní text u <img> – atribut alt je zásadní pro přístupnost i SEO.

  • Nesprávné vnořování seznamů – každý prvek seznamu musí být v <li>.

  • Přeskakování hierarchie nadpisů – po <h1> by měl logicky následovat <h2>, nikoliv hned <h4>.

  • Komentáře uvnitř atributů – komentáře lze psát jen mimo tagy, ne uprostřed jejich parametrů.

Shrnutí

  • Sémantika HTML znamená volit správný tag pro správný účel.

  • Párové tagy obalují obsah, nepárové stojí samostatně.

  • Nadpisy, odstavce a seznamy tvoří základ přehledné a logické struktury.

  • Komentáře slouží ke zpřehlednění kódu a pomáhají při učení i údržbě.

  • Správná sémantika zvyšuje přístupnost a srozumitelnost webu.