Struktura webové stránky – Ekonomická encyklopédia

Co je HTML a proč je zásadní pro web

HTML (HyperText Markup Language) je značkovací jazyk, který definuje strukturu a význam obsahu webové stránky. Poskytuje kostru dokumentu, na niž se navazují kaskádové styly (CSS) pro vzhled a JavaScript pro chování. Správná struktura HTML zlepšuje přístupnost (a11y), SEO, udržovatelnost i výkon.

Základní stavební kameny dokumentu

Dokumentový typ: <!DOCTYPE html> aktivuje režim standardů v prohlížečích.
Kořenový prvek: <html lang="cs">…</html> vymezuje celý dokument a nastavuje jazyk.
Hlavička: <head> obsahuje metadata, titul, odkazy na CSS a skripty.
Tělo: <body> obsahuje viditelný obsah pro uživatele.

Minimální kostra stránky

Následující vzor ukazuje nejmenší prakticky použitelnou strukturu s důležitými metadaty (entity jsou escapované, aby byl kód čitelný):

<!DOCTYPE html><html lang="cs"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Název stránky</title><meta name="description" content="Stručný popis obsahu."><link rel="stylesheet" href="/assets/styles.css"></head><body><header><nav aria-label="Hlavní">…</nav></header><main id="obsah"><h1>Hlavní nadpis</h1><article>…</article></main><footer>…</footer><script src="/assets/app.js" defer></script></body></html>

Head: metadata, titulky a odkazy

Titul: <title>…</title> pro název panelu a SERP.
Kódování: <meta charset="utf-8"> jako první prvek v <head>.
Responsivita: <meta name="viewport" content="width=device-width, initial-scale=1">.
Popis: <meta name="description" content="…"> pro SEO výpis.
Ikony: <link rel="icon" href="/favicon.ico"> a varianty pro platformy.
CSS a skripty: <link rel="stylesheet" …>, <script defer src="…"></script>.

Strukturální a sémantické prvky v body

<header> pro úvodní část stránky nebo sekce (logo, navigace, vyhledávání).
<nav> pro navigační menu; používejte smysluplné názvy a aria-label.
<main> obsah specifický pro danou stránku; má být jen jeden.
<article> samostatně přenositelná jednotka obsahu (článek, karta produktu).
<section> tematický blok s vlastním nadpisem.
<aside> doplňkový obsah (postranní panel, související odkazy).
<footer> patička stránky nebo sekce (copyright, kontakty).

Nadpisová hierarchie a strukturování textu

Nadpisy (<h1>–<h6>) tvoří logickou osnovu. Doporučuje se jedna instance <h1> v <main>, dále vnořené sekce s odpovídající úrovní. Text členíme pomocí <p>, zvýrazňujeme <strong> (důraz) a <em> (intonace). Pro kód používáme <code>, pro citace <blockquote> a <q>.

Odkazy a navigační vzory

Odkaz: <a href="…">text</a>. Preferujte popisný text („Stáhnout zprávu“).
Interní navigace: kotvy na ID (href="#obsah") pro „přeskočit na obsah“.
Externí odkazy: u opens v nové kartě používejte rel="noopener noreferrer".
Přístupnost: fokus je viditelný, pořadí odráží vizuální hierarchii.

Seznamy, tabulky a další sémantika

Neuspořádaný seznam: <ul><li>…</li></ul>.
Uspořádaný seznam: <ol> pro procedury a kroky.
Definiční seznam: <dl><dt><dd> pro termíny a jejich definice.
Tabulky: používejte jen pro tabulární data; nadpisy sloupců <th scope="col">, řádků <th scope="row">, případně <caption>.

Obrázky, média a popisky

Obrázky: <img src="…" alt="Smysluplný popis">; atribut alt je klíčový pro a11y.
Responsivní zdroje: <picture> a srcset/sizes pro různá rozlišení.
Popisek: <figure> s <figcaption> pro kontext.
Video/Audio: <video controls>, <audio controls> s titulky (track).

Formuláře: struktura a použitelnost

Formulář: <form action="…" method="post"> s jasným účelem.
Popisky: <label for="email">E-mail</label><input id="email" type="email" required>.
Skupiny: <fieldset> a <legend> pro logické celky.
Nápověda a validace: aria-describedby pro chybové zprávy, nativní typy (email, tel, number).

Přístupnost (a11y) jako součást struktury

Landmark role: používejte sémantické elementy (header, nav, main, footer) místo generických div.
Alternativy: každé ne-textové médium musí mít alternativu (alt, titulky).
Fokus a pořadí: logické pořadí v DOM; vyhněte se skákání fokusů CSS triky.
Kontrast a škálování: struktura musí fungovat i bez CSS; obsah je čitelný při zvětšení.

SEO a strukturovaná data

Smysluplné nadpisy: odrážejí hierarchii a téma sekcí.
Meta popis a otevřené grafy: <meta name="description">, og:*, twitter:*.
Strukturovaná data: JSON-LD (<script type="application/ld+json">…</script>) pro Article, Product apod.
Kanonická URL: <link rel="canonical" href="…"> pro konsolidaci signálů.

Vazba na CSS a základní layout

HTML nese význam a strukturu; CSS řeší vzhled. Udržujte oddělení vrstev: v HTML nepoužívejte prezentaci (např. <b> pouze pro stylistiku je nevhodné, preferujte <strong> pro význam). Pro layout používejte CSS Grid/Flexbox v externím souboru připojeném pomocí <link rel="stylesheet">.

Performance a načítání zdrojů

Defer/async skripty: <script src="app.js" defer></script> pro neblokující vykreslení.
Preload/prefetch: <link rel="preload" as="font" href="…" crossorigin>, rozumně a cíleně.
Obrázky: atribut loading="lazy" pro lazy-load, správné rozměry a moderní formáty (AVIF, WebP).

Modularita, opakovatelnost a šablony

U větších webů udržujte opakovatelné bloky (header, footer, navigace) jako komponenty. Při generování server-side používejte šablonovací systémy; v čistém HTML lze uvažovat o <template> pro opakující se struktury renderované JavaScriptem.

Progressive Enhancement a odolnost

Struktura musí dávat smysl i bez CSS a JS. Začněte s kvalitním HTML, teprve poté přidávejte vylepšení. Navigace by měla být kliknutelná jako <a> odkazy, formuláře odesílatelné i bez AJAXu.

Bezpečnostní aspekty HTML struktury

Integrita skriptů: integrity a crossorigin pro externí zdroje.
Omezení rámců: <iframe sandbox>, hlavičky CSP (na úrovni serveru) pro řízení zdrojů.
Formuláře: atributy autocomplete a validace typů pro snížení chybovosti.

Mezijazykové a lokalizační zásady

Jazyk dokumentu: lang="cs" na <html>; u vložených pasáží lze měnit (např. lang="en").
Směr textu: atribut dir pro RTL jazyky, pokud je potřeba.
Datum a čas: <time datetime="2025-10-25">25. října 2025</time> pro strojovou čitelnost.

Validační a kvalitativní kontrola

Validace: kontrola chyb uzávěrek, duplicitních ID, neplatných atributů.
Struktura a outline: každý <section> má mít nadpis; vyhněte se hlubokému vnoření bez důvodu.
Test a11y: kontrola alternativ, tab order, čitelnosti a kontrastu (i bez CSS).

Časté chyby a jak se jim vyhnout

Využití tabulek pro layout místo CSS.
Chybějící alt u <img> a nepopisné odkazy („klikněte zde“).
Vkládání skriptů bez defer/async, které blokují vykreslování.
Přetížení <div> místo sémantických prvků.
Více <h1> bez jasné hierarchie obsahu.

Ukázka sémantického článku v rámci stránky

Následující fragment demonstruje vztah mezi main, article, section a nadpisy (zkráceno):

<main id="obsah"><h1>Blog</h1><article><header><h2>Titulek článku</h2><p><time datetime="2025-10-25">25.10.2025</time></p></header><section><h3>Úvod</h3><p>…</p></section><section><h3>Detaily</h3><p>…</p></section><footer><p>Autor: …</p></footer></article></main>

Šablona pro typickou marketingovou stránku

Tento nástin ukazuje běžné rozdělení stránky do sekcí s ohledem na a11y a SEO:

<header><nav aria-label="Hlavní navigace">…</nav></header><main id="obsah"><h1>Produkt X</h1><section aria-labelledby="hero"><h2 id="hero">Hlavní přínos</h2><p>…</p></section><section aria-labelledby="features"><h2 id="features">Funkce</h2><ul><li>…</li></ul></section><section aria-labelledby="pricing"><h2 id="pricing">Ceník</h2><table>…</table></section><section aria-labelledby="faq"><h2 id="faq">FAQ</h2><dl>…</dl></section></main><footer><nav aria-label="Sekundární navigace">…</nav></footer>

Propojení s JavaScriptem bez narušení sémantiky

Interaktivitu přidávejte progresivně: HTML nese sémantiku, JS „oživuje“ prvky přes selektory a ARIA atributy. Ovládací prvky musí zůstat přístupné z klávesnice a mít správné role a stav (aria-expanded, aria-controls).

Závěr: kvalitní HTML jako dlouhodobá investice

Pečlivě navržená struktura HTML je základem udržitelného webu. Používejte sémantické prvky, důslednou nadpisovou hierarchii, kvalitní metadata a přístupnost. HTML má být srozumitelné samo o sobě; CSS a JavaScript jej rozvíjejí, nikoli nahrazují. Tím získáte stránky, které se rychle načítají, dobře se vyhledávají, snadno se rozšiřují a jsou přístupné všem uživatelům.