Členění stránky

Pro webové stránky se postupem času ustálila určitá obvyklá struktura. Není to žádné dogma, nicméně stránka obvykle mívá záhlaví s logem, nějaké to menu pro navigaci po sousedních stránkách, hlavní obsahový blok, patičku, postranní lišty a podobně.

Dříve se pro tyto účely používaly prvky <nav> opatřené identifikátorem nebo třídou. Pomocí CSS se jim nastavil příslušný vzhled, takže uživatel si je snadno zařadil. Nedostatkem tohoto přístupu je, že neposkytuje žádná vodítka zpracovávajícím programům. Roboti vyhledávačů neměli o jejich významu tušení.

HTML5 proto zavedlo novou skupinu sémantických prvků, které jsou určeny právě pro vymezení základních stavebních kamenů stránek. Vzhledem k tomu, že částem stránky přiřazují význam, vznešeně řečeno sémantiku, mluvíme o nich jako o sémantických prvcích. Je výrazně vhodnější používat například <footer> místo <div class="footer">.

Sémantické prvky pro části stránky

<header>

Záhlaví stránky. Typicky obsahuje logo, základní navigaci, vyhledávání a další prvky budující vizuální identitu daného webu.

<footer>

Zápatí stránky. Vhodné pro právnické informace (copyright, informace o ochraně soukromí návštěvníků a podobně). Často v něm najdete i navigační část odkazující na různé stránky daného webu.

<nav>

Navigace čili menu. Hlavní menu typicky umožňuje přecházet mezi hlavními částmi webu. Pokud je obsah košatý, můžete se setkat i s víceúrovňovým menu nebo několika různými menu. Všechna by měla být vložena do prvků <nav>, případně doplněných o třídu nebo identifikátor pro vzájemné rozlišení. Existuje i prvek <menu>, který je ale určen pro formuláře. Pokud je řeč o navigačním menu, jedná se o navigaci, tedy značku <nav>.

<main>

Hlavní obsah stránky. Tímto prvkem by měl být obalen materiál, tvořící jádro dané stránky. Jeho obsah by měl být unikátní. Čili nepatří do něj logo, menu, copyright ani další složky, které se opakují na každé stránce. Smí se na stránce vyskytnout nanejvýš jednou.

Typické rozložení stránky s použitím výše zmiňovaných prvků vypadá asi jako na následujícím obrázku. Ve zdrojovém kódu samozřejmě následují spořádaně za sebou, o jejich rozmístění a vzhled se postará CSS.

Jako praktický příklad si můžete zobrazit třeba zdrojový kód této stránky.

Sémantické prvky pro obsah

<article>

Ucelená a logicky samostatná část obsahu. Například když titulní stránka blogu obsahuje několik příspěvků, bude celá tato část zabalena do <main> a každý jednotlivý příspěvek bude představován jedním prvkem <article>. Jako další příklady pro vhodné použití prvku <article> se uvádějí příspěvky do diskusních fór nebo jednotlivé komentáře.

<section>

Pokud je materiál rozsáhlý a lze v něm vymezit určité logické části (například kapitoly textu nebo příklady v nich), lze pro tento účel použít prvek <section>.

<aside>

Slouží pro doplňkové informace, které sice nejsou součástí vlastního textu, ale nějak jej doplňují. Například budete psát o své dovolené v Belgii a ke svému textu a fotografiím budete chtít připojit základní informace o Belgii – rozlohu, počet obyvatel, hlavní město a podobně. Zabalte je do prvku <aside>.

<figure>

Obrázky, diagramy, grafy, fotografie, ale také třeba ukázky zdrojových kódů.

<figcaption>

Popisek pro <figure>, tedy název daného obrázku.

<mark>

Zvýrazněný text. Na rozdíl od ostatních se jedná o řádkový prvek. Prohlížeče jej vykreslují se žlutým pozadím, jako byste si v textu něco označili zvýrazňovačem.

<time>

Čas či datum. Také toto je řádkový prvek a nebývá nijak vizuálně odlišen. Zpracovávající software pouze dostává informaci, že tato část textu obsahuje časové údaje. Můžete je doplnit ve strojově čitelném formátu pomocí atributu datetime:
Koncert se koná <time datetime="2025-05-30 20:00">30. května 2025 od 20 hodin</time>.

<details> a <summary>

Vytvářejí rozbalovací blok. <summary> obsahuje jeho stručné shrnutí, typicky se jedná o jeho název nebo nadpis a ve výchozí stave je zobrazen jen on. Až když jej uživatel aktivuje kliknutím myší nebo klávesou Enter, zobrazí se i zbývající obsah prvku <details>. Má-li být ve výchozím stavu otevřen, přiřaďte prvku <details> atribut open. Atributem name jej můžete pojmenovat. Má-li několik prvků <details> na stránce stejné jméno, smí z nich být otevřen pouze jeden. Otevření některého z nich zavře ostatní. Podívejte se na příklad.