# 1 • HTML5 a sémantika > Struktura stránky, sémantické tagy v HTML5, typografie na webu > > **Formát zkoušky:** 30 minut příprava praktické úlohy, 15 minut obhajoba + náhodná teorie. Tady je teorie hutně, ale ne tryhardně, a celá praktická úloha s řešením. > --- ## Část 1: Teorie ### Co je sémantické HTML Sémantické HTML znamená používat **elementy podle významu obsahu**, ne podle vizuálního efektu. Element popisuje, **co** je jeho obsah, ne **jak vypadá**. Styling je práce CSS. | Nesémanticky | Sémanticky | Rozdíl | | --- | --- | --- | | `

` | `

` | Prohlížeč, čtečka i vývojář ví, co to je | | `

` | `

` | Navigace je jasně označená | | `důležité` | `důležité` | Sděluje důležitost, ne jen tučnost | | `název` | `název` | Sděluje důraz, ne jen kurzívu | ### Proč na tom záleží - **Přístupnost (accessibility)**: čtečky obrazovky pro nevidomé se orientují podle sémantiky - **SEO**: vyhledávače lépe pochopí strukturu obsahu - **Čitelnost kódu**: vývojář vidí strukturu bez čtení class atributů - **Standardizace**: konzistentní napříč projekty a vývojáři --- ### Základní struktura HTML5 stránky ```html Název stránky

Název webu

Název článku

13. května 2026

První část

Obsah...

``` ### Povinné části `` | Element | Účel | | --- | --- | | `` | Říká prohlížeči "jde o HTML5", bez něj quirks mode | | `` | Kódování znaků, bez toho nefunguje diakritika | | `` | Responzivita, správné zobrazení na mobilu | | `` | Text v záložce + nadpis v Google výsledcích | ### `<meta name="viewport">` ```html <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` `width=device-width`: šířka stránky se přizpůsobí šířce zařízení. `initial-scale=1.0`: výchozí zoom 100 %. Bez tohoto meta tagu mobilní prohlížeče zobrazí stránku jakoby na desktopu (zoom out) a text bude maličký. --- ### Sémantické strukturní elementy ### `<header>` Záhlaví: může být **globální** (celá stránka) nebo **lokální** (uvnitř `<article>` nebo `<section>`). ```html  <header> <h1>Logo</h1> <nav>...</nav> </header>  <article> <header> <h2>Název článku</h2> <p>Autor: axo | <time datetime="2026-05-13">13. 5. 2026</time></p> </header> </article> ``` ### `<nav>` Hlavní navigační bloky. Ne pro **každý** seznam odkazů, jen pro významné navigace (menu, breadcrumbs, footer links). ```html <nav aria-label="Hlavní menu"> <ul> <li><a href="/" aria-current="page">Domů</a></li> <li><a href="/blog">Blog</a></li> </ul> </nav> ``` ### `<main>` Hlavní obsah stránky. **Jednou na stránku**, přímo v `<body>`. Obsahuje to, co je **unikátní pro danou stránku** (ne logo, nav, footer, ty se opakují). ### `<article>` **Samostatný, přenositelný kus obsahu**: dával by smysl i vyjmutý z kontextu stránky. - Blogový příspěvek - Novinový článek - Produktová karta - Komentář uživatele ### `<section>` **Tematická skupina obsahu** uvnitř stránky nebo článku. Obvykle začíná nadpisem. ```html <main> <section> <h2>Novinky</h2> <article>...</article> <article>...</article> </section> <section> <h2>Populární</h2> <article>...</article> </section> </main> ``` > **Klasický chyták `<article>` vs `<section>`**: > > - `<article>` = samostatný (smysl bez kontextu) > - `<section>` = tematická skupina (smysl jen v kontextu stránky) ### `<aside>` Vedlejší obsah nepřímo související s hlavním obsahem. Postranní panel, "související články", reklama. ### `<footer>` Zápatí: copyright, kontakty, SEO odkazy, mapa webu. Stejně jako `<header>` může být globální i lokální. ### `<figure>` a `<figcaption>` Obrázek (nebo jiná ilustrace) s popiskem. ```html <figure> <img src="diagram.png" alt="Schéma struktury HTML stránky"> <figcaption>Obr. 1: Typická struktura HTML5 stránky</figcaption> </figure> ``` ### `<time>` Strojově čitelné datum nebo čas. Atribut `datetime` je v ISO 8601 formátu. ```html <time datetime="2026-05-13">13. května 2026</time> <time datetime="14:30">14:30</time> <time datetime="2026-05-13T14:30">13. 5. 2026 v 14:30</time> ``` ### `<address>` Kontaktní informace **vztahující se k dokumentu nebo autorovi**, ne pro libovolnou poštovní adresu. ```html <address> Napsal <a href="mailto:axo@example.com">axo</a>.<br> Sídlo: Náměstí 67, Liberec. </address> ``` --- ### Sémantické inline elementy | Element | Význam | Default styl | | --- | --- | --- | | `<strong>` | Důležitý text | Tučně | | `<em>` | Zdůraznění | Kurzívou | | `<mark>` | Zvýraznění (relevantní pro kontext) | Žluté pozadí | | `<abbr title="...">` | Zkratka s vysvětlením | Podtrženo, tooltip | | `<cite>` | Název díla nebo citace | Kurzívou | | `<code>` | Kód v textu | Monospace | | `<kbd>` | Klávesa / vstup | Monospace s rámečkem | | `<small>` | Drobné tisky | Menší text | | `<del>` / `<ins>` | Smazaný / vložený | Přeškrtnuto / podtrženo | | `<sup>` / `<sub>` | Horní / dolní index | x² / H₂O | ```html <p> <strong>Důležité</strong>: Přečti si <em>celý dokument</em>. Zkratka <abbr title="HyperText Markup Language">HTML</abbr> znamená... Spusť <code>npm install</code> a stiskni <kbd>Enter</kbd>. </p> ``` ### Nesémantické: `<div>` a `<span>` Neutrální kontejnery bez sémantického významu. Použij **jen pokud žádný sémantický element neodpovídá**. ```html  <div class="header"> <div class="nav">...</div> </div>  <header> <nav>...</nav> </header>  <div class="container"> <main>...</main> </div>  <p>Cena: <span class="price">299 Kč</span></p> ``` --- ### Typografie na webu ### Základní vlastnosti ```css body { font-family: 'Roboto', Arial, sans-serif; font-size: 16px; font-weight: 400; /* 400 = normal, 700 = bold */ line-height: 1.6; /* doporučeno 1.5 až 1.8 */ color: #333; letter-spacing: 0.02em; } ``` ### Jednotky velikosti | Jednotka | Význam | Kdy použít | | --- | --- | --- | | `px` | Absolutní pixely | Bordery, malé fixní rozměry | | `em` | Relativní k rodičovskému font-size | Padding, margin u textu | | `rem` | Relativní k root `<html>` | **Velikosti fontů, nejlepší volba** | | `%` | Procento z rodiče | Šířky layoutu | | `vw` / `vh` | % šířky / výšky viewportu | Hero sekce, fullscreen | | `ch` | Šířka znaku "0" | `max-width` pro čitelnost textu | ```css html { font-size: 16px; } /* 1rem = 16px */ h1 { font-size: 2.5rem; } /* 40px */ h2 { font-size: 1.75rem; } /* 28px */ h3 { font-size: 1.25rem; } /* 20px */ p { font-size: 1rem; } /* 16px */ small { font-size: 0.875rem; } /* 14px */ ``` ### Zlaté pravidlo čitelnosti ```css p { max-width: 65ch; /* optimální délka řádku 60 až 75 znaků */ line-height: 1.7; /* dostatek prostoru mezi řádky */ } ``` Delší řádky ztěžují čtení: oko musí "hledat" začátek dalšího řádku. ### Zarovnání ```css p { text-align: left; } /* default, nejčtivější pro dlouhé texty */ h1 { text-align: center; } /* středové nadpisy */ .legal { text-align: justify; } /* do bloku, pozor na "rivers of white" */ ``` ### Dekorace a transformace ```css a { text-decoration: none; } a:hover { text-decoration: underline; } .tag { text-transform: uppercase; } /* VELKÁ */ .title { text-transform: capitalize; } /* Každé Slovo */ ``` ### Web fonty **Google Fonts** (nejjednodušší): ```html <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Lora&display=swap" rel="stylesheet"> ``` ```css body { font-family: 'Roboto', sans-serif; } h1, h2 { font-family: 'Lora', serif; } ``` **Vlastní font** přes `@font-face`: ```css @font-face { font-family: 'MujFont'; src: url('fonts/mujfont.woff2') format('woff2'); font-display: swap; /* fallback dokud se font nestáhne */ } ``` ### Font stack: záchranná síť Vždy uveď víc fontů. Pokud první není k dispozici, použije se další: ```css font-family: 'Inter', 'Segoe UI', Arial, sans-serif; /* sans */ font-family: 'Lora', 'Georgia', 'Times New Roman', serif; /* serif */ font-family: 'Fira Code', 'Consolas', 'Courier New', monospace; /* mono */ ``` `font-display: swap` říká prohlížeči: "dokud se nestáhne web font, zobraz fallback, pak prohoď". Bez toho můžeš mít několik sekund neviditelný text (FOIT). --- ## Část 2: Praktická úloha ### Co může praktická úloha obsahovat Zadání pro tuhle teoretickou oblast typicky: - **Nahradit `<div>` sémantickými HTML5 elementy** v rozdělaném kódu - **Doplnit chybějící HTML elementy** podle TODO komentářů (často `<header>`, `<figure>`, `<time>`, `<address>`) - **Přidat meta tagy** do `<head>` (charset, viewport, description, title) - **Importovat Google Fonts** a aplikovat fonty - **Doplnit CSS typografii**: velikosti, řádkování, max-width pro čitelnost - **Doplnit responzivní viewport** meta tag - **Validovat HTML** (žádné `<div>` tam, kde patří sémantický element) ### Příklad zadání: Blog s článkem Dostaneš rozdělanou HTML stránku jednoduchého blogu napsanou nesémanticky pomocí `<div>` tagů a s chybějící typografií. Úkol: 1. Nahradit `<div>` správnými sémantickými HTML5 elementy 2. Doplnit chybějící elementy tam, kde jsou `` komentáře 3. Doplnit CSS typografii: fonty, velikosti, řádkování, Google Fonts ### Startovací kód: index.html ```html <!DOCTYPE html> <html lang="cs"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Můj blog

Začátky

Všechno začalo, když jsem poprvé otevřel editor a napsal svůj první Hello World. Byl to zlomový moment.

Sémantika

Postupně jsem pochopil, že jak píšeš HTML je stejně důležité jako co píšeš.

Závěr

Kontaktovat mě můžeš na jan@blog.cz.

O autorovi

axo: webový vývojář z Liberce.

Populární články

``` ### Řešení: hotové index.html ```html Můj blog

Můj blog

Jak jsem se naučil HTML5

Napsal axo, 10. května 2026

Začátky

Všechno začalo, když jsem poprvé otevřel editor a napsal svůj první Hello World. Byl to zlomový moment.

Sémantika

Postupně jsem pochopil, že jak píšeš HTML je stejně důležité jako co píšeš.

Obr. 1: Typická struktura HTML5 stránky

Závěr

Kontaktovat mě můžeš na

jan@blog.cz

``` ### Řešení: doplněné style.css ```css * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Roboto', Arial, sans-serif; font-size: 16px; line-height: 1.6; color: #333; max-width: 1100px; margin: 0 auto; padding: 0 1rem; } /* === HEADER === */ header { background: #1a1a2e; color: white; padding: 1.5rem 2rem; display: flex; justify-content: space-between; align-items: center; } header h1 { font-family: 'Lora', serif; font-size: 2rem; color: white; } /* === NAV === */ nav ul { list-style: none; display: flex; gap: 1.5rem; } nav a { color: white; text-decoration: none; font-weight: 500; } nav a:hover { text-decoration: underline; } /* === MAIN === */ main { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; padding: 2rem 0; } /* === ČLÁNEK === */ article { max-width: 70ch; } article h2, article h3 { font-family: 'Lora', serif; color: #1a1a2e; margin-bottom: 0.75rem; } article h2 { font-size: 1.75rem; } article h3 { font-size: 1.25rem; margin-top: 1.5rem; } article p { font-size: 1rem; line-height: 1.8; margin-bottom: 1.25rem; } /* === FIGURE === */ figure { margin: 1.5rem 0; text-align: center; } figure img { max-width: 100%; border-radius: 4px; } figcaption { font-size: 0.875rem; color: #666; margin-top: 0.5rem; } /* === ASIDE === */ aside { background: #f8f9fa; padding: 1.5rem; border-radius: 8px; align-self: start; } aside h2 { font-size: 1.1rem; color: #1a1a2e; margin-bottom: 0.5rem; margin-top: 1rem; } aside h2:first-child { margin-top: 0; } aside ul { list-style: none; margin-top: 0.5rem; } aside li { padding: 0.4rem 0; border-bottom: 1px solid #dee2e6; } aside a { color: #0066cc; text-decoration: none; } aside a:hover { text-decoration: underline; } /* === FOOTER === */ footer { background: #1a1a2e; color: #aaa; text-align: center; padding: 1.5rem; font-size: 0.875rem; margin-top: 2rem; } ``` --- ## Část 3: Tipy pro obhajobu ### Co u obhajoby říct Začni přehledem, co jsi udělal: > *"V zadání jsem dostal blog napsaný nesémanticky přes divy. Nahradil jsem je sémantickými HTML5 elementy: header pro záhlaví, nav pro navigaci, main pro hlavní obsah, article pro článek, section pro tematické bloky, aside pro postranní panel a footer pro zápatí. Doplnil jsem header článku s nadpisem h2 a time elementem pro datum. Přidal jsem figure s figcaption pro obrázek a address pro kontakt. V CSS jsem importoval Google Fonts (Roboto pro text, Lora pro nadpisy) a nastavil typografii: line-height 1.6, max-width 70ch pro čitelnost."* > ### Klíčové pojmy pro teorii (co se zkoušející ptá) | Pojem | Odpověď | | --- | --- | | **Sémantika** | HTML elementy popisují, co je obsah, ne jak vypadá | | **Accessibility** | Přístupnost pro lidi se zdravotním postižením (čtečky obrazovky) | | **SEO** | Search Engine Optimization, sémantika zlepšuje indexaci | | **`

`** | Jedinečný obsah stránky, použít **jednou** na stránku | | **`

` vs `

`** | article = přenositelný (smysl bez kontextu), section = tematická skupina | | **`

`** | Záhlaví, může být globální i lokální | | **`

`** | Hlavní navigační bloky, ne pro každý seznam odkazů | | **`

` + `

`** | Obrázek s popiskem | | **``** | Strojově čitelné datum v ISO 8601 | | **`

`** | Kontakt **vztažený k dokumentu nebo autorovi** | | **`rem` vs `em`** | rem = relativní k root html, em = relativní k rodiči | | **`max-width: 65ch`** | Optimální délka řádku 60-75 znaků pro čitelnost | | **`line-height: 1.6`** | Výška řádku, 1.5-1.8 doporučená | | **Web font** | Font stažený ze serveru (Google Fonts, @font-face) | | **Font stack** | Seznam fontů, první dostupný se použije | | **`font-display: swap`** | Fallback font dokud se web font nestáhne | | **``** | Responzivita, bez něj mobilní zoom out | ### Časté chytáky | Otázka | Odpověď | | --- | --- | | *Proč nestačí styling pomocí divů?* | Čtečky pro nevidomé, vyhledávače a další vývojáři nepoznají strukturu jen z CSS tříd. | | *Kdy section a kdy article?* | Article: blogový post, produkt, komentář (přenositelné). Section: skupiny obsahu uvnitř stránky (Novinky, Galerie). | | *Může být víc `

` na stránce?* | Ne. Jen jeden `

` na stránku, drží unikátní obsah. | | *Co dělá ``?* | Nastaví kódování. Bez něj se diakritika zobrazí jako otazníky nebo čtverečky. | | *Proč ``?* | Strojově čitelný formát, čtečky a vyhledávače to umí pochopit. Text uvnitř je pro lidi. | | `*` vs ``?* | `` má sémantický význam důležitosti. `` je jen vizuální tučnost bez významu. | | *Co je font-display: swap?* | Když se web font načítá, zobrazí se fallback font. Po načtení se prohodí. Bez toho je text 1-3 sekundy neviditelný. | | *Kdy `
`?* | Jen pro kontaktní info k dokumentu (autor článku, kontakt na firmu v patičce). Ne pro libovolnou poštovní adresu v textu. | ### Časté chyby v praktické úloze - Zapomenuté `
` (typicky student nahradí jen vnitřní divy) - `
` použitý pro každý `
` s odkazy (např. patičkové linky uvnitř `
` v pohodě, ale ne pro každý seznam) - `
` bez nadpisu (sekce by měla začínat h2/h3) - `
` použitý jako prostý wrapper bez vlastního obsahu - Zapomenutý `
` u `
` - `` bez `datetime` atributu (ztrácí strojovou čitelnost) - `font-display: swap` chybí (text "blikne" když se font načte) - `max-width` pro text na příliš velkém čísle (60-75ch je optimum) - Hardcoded velikosti v `px` místo `rem` (horší pro accessibility) - Chybějící font fallback (jen `font-family: 'Roboto'` bez fallbacku)