Lekce 2 — Struktura HTML stránky

Minule jste viděli pár značek — nadpis, odstavec, odkaz, obrázek — a stránku, kterou prohlížeč zobrazil, i když byla víceméně hromada textu se značkami. Dnes se podíváme na to, jak vypadá stránka, která má kostru. Prohlížeč vám nedbalost odpustí; kolegové, vyhledávače, čtečky pro nevidomé a vy sami za půl roku ne.

1. Kostra každé stránky

Tohle je minimum, které má mít každý HTML soubor, který kdy napíšete:

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Moje stránka</title>
</head>
<body>

    <!-- sem přijde všechno, co je vidět -->

</body>
</html>

Řádek po řádku:

co	k čemu
`<!DOCTYPE html>`	"Tohle je moderní HTML." Bez toho prohlížeč přepne do režimu kompatibility z roku 1999 a chová se divně. Vždycky první řádek.
`<html lang="cs">`	Kořen dokumentu. `lang` říká, v jakém jazyce je text — používá to překladač v prohlížeči, čtečky obrazovky, kontrola pravopisu.
`<head>`	Informace o stránce. Nic z toho není vidět v okně.
`<meta charset="UTF-8">`	Kódování znaků. Bez toho se `ěščřžýáíé` můžou zobrazit jako `ÄÅ¡Ä`.
`<meta name="viewport" ...>`	Ať se stránka na mobilu nezobrazí jako zmenšená verze desktopu.
`<title>`	Text na záložce prohlížeče a v záložkách/oblíbených.
`<body>`	Obsah stránky. Všechno, co uživatel vidí.
`<!-- ... -->`	Komentář — prohlížeč ignoruje, je pro vás.

Dvě nejčastější chyby začátečníků: zapomenutý <meta charset> (rozbitá čeština) a text vložený do <head> místo <body> (nezobrazí se, nebo se zobrazí špatně).

2. Značky jsou do sebe zanořené — jako krabice

HTML není seznam značek za sebou. Je to strom: značky jsou uvnitř jiných značek.

<body>
    <main>
        <article>
            <h2>Nadpis článku</h2>
            <p>Odstavec s <strong>tučným</strong> slovem.</p>
        </article>
    </main>
</body>

<strong> je uvnitř <p>, který je uvnitř <article>, který je uvnitř <main>, který je uvnitř <body>.

Dvě pravidla:

Co otevřete poslední, zavřete první. <p><strong>text</strong></p> je správně. <p><strong>text</p></strong> je špatně — krabice se nemůžou křížit.
Odsazujte. Každá úroveň zanoření o jeden tabulátor (nebo 4 mezery) víc. Prohlížeč to nepotřebuje. Vy ano, jinak za dvacet řádků nevíte, co je v čem.

Když nevíte, jestli máte správně zanořeno, otevřete stránku v prohlížeči, klikněte pravým → Prozkoumat (Inspect) a podívejte se, jak strom vidí prohlížeč. Když je to jinak, než jste chtěli, máte někde špatně uzavřenou značku.

3. Značky pro rozvržení stránky

Podívejte se na jakýkoliv web. Skoro vždycky má stejné části: hlavičku s logem a menu, hlavní obsah, někdy postranní panel, a patičku. HTML pro ně má pojmenované značky:

<body>
    <header>
        <h1>Název webu</h1>
        <nav>
            <a href="index.html">Domů</a>
            <a href="o-mne.html">O mně</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
    </header>

    <main>
        <section>
            <h2>Kdo jsem</h2>
            <p>...</p>
        </section>

        <section>
            <h2>Co dělám</h2>
            <article>
                <h3>Projekt 1</h3>
                <p>...</p>
            </article>
            <article>
                <h3>Projekt 2</h3>
                <p>...</p>
            </article>
        </section>
    </main>

    <aside>
        <h2>Odkazy</h2>
        <p>...</p>
    </aside>

    <footer>
        <p>&copy; 2026 Vaše jméno</p>
    </footer>
</body>

značka	význam
`<header>`	Hlavička — název, logo, menu.
`<nav>`	Navigace — skupina odkazů, kterými se chodí po webu.
`<main>`	Hlavní obsah. Právě jeden na stránce.
`<section>`	Tematická část obsahu. Měla by mít vlastní nadpis.
`<article>`	Samostatný kus obsahu, který by dával smysl i vytržený ze stránky — článek, příspěvek, produkt.
`<aside>`	Něco vedle hlavního obsahu — postranní panel, související odkazy.
`<footer>`	Patička — copyright, kontakt, odkazy dolů.

Proč to nedělat jen odstavci a nadpisy? Prohlížeč to zobrazí skoro stejně. Ale:

Čtečka pro nevidomé umí skočit rovnou na <main> nebo <nav>. Bez nich musí uživatel poslouchat celou stránku od začátku.
Vyhledávač ví, že text v <nav> je menu a text v <article> je to, co má indexovat.
Až budete příště dělat CSS, budete stylovat "hlavičku" a "patičku", ne "ten třetí odstavec odshora".
Kdokoliv otevře váš kód, na první pohled vidí, co je co.

Říká se tomu sémantické HTML — značky nesou význam, ne jen vzhled.

4. Nadpisy mají úrovně, ne velikosti

<h1> až <h6> nejsou šest velikostí písma. Jsou to úrovně osnovy:

h1  Název stránky (jeden na stránce)
    h2  Kapitola
        h3  Podkapitola
        h3  Podkapitola
    h2  Kapitola

Nepřeskakujte úrovně (h1 → h3) a nevybírejte nadpis podle toho, jak je velký. Velikost změníte později v CSS, strukturu ne.

5. Seznamy

<!-- nečíslovaný — odrážky -->
<ul>
    <li>Mléko</li>
    <li>Chleba</li>
    <li>Vejce</li>
</ul>

<!-- číslovaný -->
<ol>
    <li>Otevřít editor</li>
    <li>Napsat kód</li>
    <li>Uložit a obnovit prohlížeč</li>
</ol>

<li> smí být jen přímo v <ul> nebo <ol>. Nic jiného tam být nesmí.

Seznamy se dají zanořit — vnořený seznam jde dovnitř <li>, ne vedle něj:

<ul>
    <li>Ovoce
        <ul>
            <li>Jablko</li>
            <li>Hruška</li>
        </ul>
    </li>
    <li>Zelenina</li>
</ul>

Mimochodem, <nav> je skoro vždycky seznam odkazů — takže správně je:

<nav>
    <ul>
        <li><a href="index.html">Domů</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
    </ul>
</nav>

6. Když žádná značka nesedí: `<div>` a `<span>`

Někdy potřebujete seskupit věci, ale žádná sémantická značka se nehodí. Na to jsou dvě "bezvýznamové" značky:

<div> — blok. Začíná na novém řádku, roztáhne se na celou šířku. Krabice na jiné krabice.
<span> — řádkový kousek. Neláme řádek. Slouží k označení pár slov uvnitř textu.

<div>
    <p>Cena: <span>249 Kč</span></p>
</div>

Samy o sobě nic nedělají — smysl dostanou až s CSS. Pravidlo: nejdřív hledejte sémantickou značku, <div> až když žádná nesedí. Stránka složená jen z <div> je klasická chyba.

7. Atributy `id` a `class`

Značkám můžete dát jmenovky:

<section id="o-mne">
    <h2>O mně</h2>
</section>

<p class="upozorneni">Toto je důležité.</p>
<p class="upozorneni">Toto taky.</p>

id — unikátní jméno prvku. Na celé stránce smí být jen jeden prvek s daným id. Dá se na něj odkázat: <a href="#o-mne">O mně</a> skočí na tu sekci.
class — kategorie. Stejnou třídu může mít prvků kolik chcete. Příště podle nich budeme stylovat.

8. Kontrola

Než něco odevzdáte:

Otevřete https://validator.w3.org → Validate by Direct Input, vložte celý soubor. Validátor vám vypíše křížené značky, chybějící alt, <li> mimo seznam a podobně. Chyby opravte; varování si přečtěte.
Pravý klik → Prozkoumat → záložka Elements. Rozklikejte strom. Odpovídá tomu, co jste chtěli?
Zavřete oči (nebo si to jen představte) a zkuste podle značek říct, kde je hlavička, menu, obsah, patička. Když to z kódu nepoznáte, není to strukturované.

9. Úkoly

Úkol 1 — Kostra

Vytvořte soubor index.html s kompletní kostrou z kapitoly 1. Do <title> dejte své jméno. Otevřete v prohlížeči. Mělo by být vidět nic kromě textu na záložce. Zkontrolujte validátorem — 0 chyb.

Úkol 2 — Rozvržení

Doplňte do <body> header (s h1 a nav se třemi odkazy jako seznam), main se dvěma section (každá s h2 a odstavcem), a footer. Odkazy zatím můžou vést na #.

Úkol 3 — Osobní stránka

V jedné z section udělejte o sobě:

odstavec, kdo jste,
nečíslovaný seznam aspoň tří věcí, co vás baví — aspoň jedna položka s vnořeným seznamem,
číslovaný seznam "3 věci, které chci umět na konci roku".

Ve druhé section dva <article>, každý s h3 a odstavcem — třeba dvě oblíbené hry, filmy, cokoliv.

Úkol 4 — Oprava

Dostanete soubor rozbite.html (nebo si ho stáhněte ze sdílené složky). Je v něm 8 chyb ve struktuře — křížené značky, nadpis přeskakující úroveň, li mimo seznam, text v head, dvě main a další. Najděte a opravte všechny. Validátor je váš kamarád, ale nenajde všechno — dvě chyby jsou "validní, ale špatně".

Úkol 5 (bonus) — Kotvy

Přidejte každé section id a udělejte v nav odkazy, které na ně skáčou (href="#..."). Vyzkoušejte, že klik opravdu posune stránku.

10. Pravidlo k AI

Klidně se ptejte AI "jaký je rozdíl mezi section a article?" nebo "proč validátor hlásí tuhle chybu?". Když vám ale vygeneruje celou stránku, musíte u každé značky umět říct, proč tam je. Zeptám se.

Zvlášť pozor: AI ráda generuje stránky plné <div class="container">. Když to od ní dostanete, zkuste ji požádat, ať to přepíše sémanticky — a porovnejte, co se změnilo.