Úloha 2 – Sémantické značky v HTML

Ú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.

Úloha

Zadání (kontext úlohy)

Doplň obsah do HTML dokumentu tak, aby využíval sémanticky vhodné tagy – nadpisy, odstavce a seznamy.

Cíl úlohy

Procvičíš si rozpoznávání vhodných HTML elementů a jejich praktické použití v dokumentu.

Vstupní podmínky

• Budeš mít k dispozici hotovou kostru HTML dokumentu, která již obsahuje:

  • deklaraci <!DOCTYPE html>,

  • otevřené a uzavřené tagy <html>, <head> a <body>.

• Obsah uvnitř <body> je zatím prázdný.

Požadovaný výstup

• Tvůj dokument musí obsahovat:

  • alespoň dva nadpisy různých úrovní (<h1> a <h2>),

  • minimálně dva odstavce (<p>),

  • jeden seznam (<ul> nebo <ol>),

  • komentáře (<!-- ... -->) vysvětlující význam jednotlivých částí kódu.

Doplňující pokyny

• Dbej na sémantickou správnost použitých elementů.

• Zachovej přehledné odsazení a formátování kódu.

Soubor

Odkaz na soubor

Řešení úlohy

Co je zde splněno:

• Použit hlavní nadpis <h1> a podnadpis <h2>.

• Zařazeny dva samostatné odstavce <p>.

• Přidán jeden seznam <ul> s několika položkami <li>.

• Kód obsahuje české komentáře <!-- ... -->, které vysvětlují význam jednotlivých částí.

• Struktura je sémantická, čitelná a validní podle HTML5.