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