Úloha 4 – Refaktoring HTML fragmentu

Úvod k úloze

Napsat funkční HTML stránku dokáže po několika lekcích každý. Skutečná výzva ale přichází ve chvíli, kdy se zaměříme na čitelnost, přehlednost a udržitelnost kódu. Nejde totiž jen o to, aby se stránka zobrazila – musí být také snadno pochopitelná pro dalšího vývojáře (nebo i pro vás samotné, když se k ní vrátíte za několik měsíců). Dobře strukturovaný a konzistentní kód usnadňuje práci s CSS, JavaScriptem i případné rozšiřování webu.

Teorie a principy

1. Konzistence

   • Používejte jednotné odsazování (typicky 2 nebo 4 mezery).

   • Dodržujte stejný způsob zápisu atributů (např. vždy dvojité uvozovky).

   • Zachovávejte logickou hierarchii nadpisů.

2. Přehlednost

   • Dlouhé dokumenty členěte na bloky (např. komentáře <!-- Hlavní menu -->).

   • Využívejte sémantické značky pro přirozenou strukturu.

   • Každý tag uzavírejte a správně vnořujte.

3. Udržitelnost

   • Pokud se opakují styly, používejte třídy (class).

   • Jednoznačné identifikátory (id) rezervujte jen pro prvky, které je opravdu potřebují.

   • Myslete na to, že kód bude číst i někdo jiný než vy.

Praktický příklad kódu

Původní fragment (nepřehledný)

Upravený fragment (čistý a udržitelný)

Co se změnilo?

• Přidána deklarace <!DOCTYPE html> a atribut lang="cs".

• Opravené neuzavřené tagy <li>.

• Nadpisy mají logickou hierarchii (<h1> → <h2>).

• Místo <br> pro odstavce jsou použity <p>.

• Přidány komentáře pro zpřehlednění kódu.

Typické chyby / záludnosti

• Nekonzistentní odsazování – kód pak působí chaoticky.

• Neuzavřené tagy – např. <li> nebo <p> bez ukončení.

• Nevhodné používání <br> místo odstavců.

• Chaotická hierarchie nadpisů – přeskočení z <h1> rovnou na <h3>.

• Zbytečně složité nebo nelogické struktury – například vnořený seznam, který není potřeba.

Shrnutí

• Čistý a konzistentní kód je stejně důležitý jako jeho funkčnost.

• Dodržujte jednotné odsazování, správné uzavírání tagů a logickou hierarchii.

• Používejte komentáře pro lepší orientaci v kódu.

• Vyhýbejte se nahrazování odstavců <br> a dávejte pozor na neuzavřené elementy.

• Udržitelnost kódu znamená, že ho snadno pochopí a rozšíří i někdo jiný.

Úloha

Zadání (kontext úlohy)

Analyzuj následující fragment HTML kódu, identifikuj jeho nedostatky a uprav jej tak, aby byl přehledný, logický a snadno čitelný.

Cíl úlohy

Procvičíš si schopnost analýzy, odhalování chyb a úpravy HTML kódu do validní a dobře strukturované podoby.

Vstupní podmínky

• Budeš pracovat s chybným fragmentem HTML kódu, který obsahuje nesprávné nebo chybějící části.

Požadovaný výstup

• Opravený HTML kód, který:

  • je validní podle pravidel HTML5,

  • má všechny tagy správně uzavřené,

  • používá konzistentní odsazení,

  • je čitelný a přehledný.

Doplňující pokyny

• Refaktoruj kód tak, aby odpovídal základním standardům HTML5.

• Dbej na srozumitelné uspořádání jednotlivých částí.

Soubor

Odkaz na soubor

Řešení úlohy

Co je zde splněno:

• Doplněn <!DOCTYPE html> a atribut lang="cs" pro HTML5.

• Všechny tagy jsou správně uzavřené (</title>, </h1>, </p>, </li>).

• Atributy mají hodnoty v uvozovkách (src="…", alt="…").

• Struktura je logická: nadpis → odstavec → seznam → obrázek.

• Odsazení a zanoření jsou konzistentní a zlepšují čitelnost.

• Kód je validní dle základních pravidel HTML5.

Poznámky

• img je prázdný (void) element – nemá koncový tag; stačí uzavřít startovní značku.

• alt by měl smysluplně popisovat obrázek (upravte text podle skutečného obsahu).