-s -s, jak nemusíte je úplně vykopat. Jsou stále nejlepší volbou pro seskupování obsahu výhradně pro účely stylingu a v dalších případech poslední instance.

Textová sémantika v HTML5

HTML5 představilo mnoho nových sémantických prvků, které umožňují snadnou organizaci obsahu. Nepomáhají vám pouze organizovat obsah na úrovni celého dokumentu (viz podrobnosti v další části), ale také uvnitř textových bloků, jako jsou vložené značky.

Pravděpodobně nejpopulárnější sémantické tagy na úrovni textu jsou a , ale také existovaly před HTML5. Mezi nové inline sémantické elementy můžeme najít například , značka pro časy čitelné lidem, a pro zvýrazněný text.

Viz tento seznam všech sémantických prvků na úrovni textu, které se právě používají.

Osnova dokumentu v HTML5

Obrys dokumentu je struktura dokumentu HTML. Ukazuje, jak jsou prvky vzájemně propojeny. Obrys dokumentu byl vytvořen pouze mapováním prvků, jako jsou nadpisy, názvy tabulek, názvy formulářů a další v dřívějších verzích HTML, jako jsou HTML4.01 a XHTML.

V HTML5 byl algoritmus osnovy rozšířen o nové prvky dělení, konkrétně:

• pro sekce seskupené kolem konkrétního tématu
• pro úplné nebo samostatné kompozice blogu nebo widgetu
• pro navigačních bloků
• pro doplňkový obsah, jako jsou postranní panely.

V HTML5 je pátý prvek, ale není to nový, je to ten štítek.

a tagy jsou také nové, ale v dokumentu nevytvářejí nové sekce, rozdělují obsah uvnitř sekcí. Tohle znamená tamto každý prvek (tělo, článek, sekce, nav a stranou) může mít vlastní záhlaví a zápatí.

Tipy pro sémanticky strukturovaný obsah

Pokud chceme vytvořit dobře strukturovaný přehled dokumentů, musíme věnovat pozornost následujícím pravidlům:

1. Nejvzdálenější prvek je vždy štítek.

2. Sekce v HTML5 mohou být vnořeny.

3. Každá sekce má svou vlastní hierarchii nadpisů. Každý z nich (dokonce i nejvnitřnější vnořená sekce) může mít h1 štítek.

4. Zatímco obrys dokumentu je primárně definován pomocí 5 elementů řezu, potřebuje pro každou sekci také správná záhlaví.

5. Je to vždy první prvek nadpisu (ať je to h1 nebo značka nižšího čísla), která definuje nadpis dané sekce. Následující značky nadpisů uvnitř stejné sekce musí být relativní k tomuto. (Pokud je první záhlaví h3 uvnitř dělícího elementu, pak h3 nedávejte.)

6. Části definované

, a tagy nepatří k hlavnímu obrysu dokumentu HTML, obvykle nejsou zpočátku vykreslovány pomocí asistenčních technologií.

7. Každá sekce (tělo, sekce, článek, stranou, nav) může mít vlastní

a tagy, které definují záhlaví (například logo, jméno autora, data, meta informace atd.) a zápatí (autorská práva, poznámky, odkazy atd.) této sekce.

Příklad: Sémantický přehled

Podívejme se na příklad sémantického osnovy dokumentu, který bude jasnější, jak to funguje. Náš příkladový kód bude mít za následek následující strukturu dokumentu:

A zde je kód se správným sémantickým dělením:

  
 
Vítejte na našich webových stránkách!
 
Zde je naše logo a slogan.
 
  
 
 
Název článku
 
Podnadpis článku
 
 
 
První logická část (např. "Teorie")
 
Odstavec 1 v první části
 
Některé další podpoložky v první sekci
 
Odstavec 2 v první části
 
 
 
Druhá logická část (např. „Praxe“)
 
Odstavec 1 ve druhé části
 
Odstavec 2 ve druhé části
 
  
    

Pokud se podíváte na výše uvedený úryvek kódu, uvidíte, že záhlaví a zápatí jsou volitelné, můžeme si vybrat, zda je chceme použít nebo ne, ale je to důrazně doporučujeme, abyste do každé sekce vždy zahrnuli nadpis, jinak bude sekce “Nepojmenovaná” v obrysu dokumentu.

Naštěstí existuje mnoho skvělých nástrojů po celém internetu, které nám umožňují kontrolovat obrys dokumentu, tentokrát použijeme nástroj Outliner nástroje html5.org.

Pokud vložíme fragment kódu do formuláře poskytnutého outlinerem a klikneme na tlačítko “Tento přehled!” zobrazí se následující výsledek:

To je dokument náčrt našeho ukázkového kódu, To je to, jak to vyhledávače vidí, a čtenáři si je přečetli svým zrakově postiženým uživatelům. Je to sémantická, dobře strukturovaná a není tam žádná ošklivá “Nepojmenovaná” v něm.

Chcete-li se podívat, jak vypadá sekce Untitled v Outlineru, stačí smazat některé značky nadpisů v příkladu kódu..

Další aspekty webové sémantiky

Sémantické HTML tagy a obrysy dokumentu jsou jen malou částí webové sémantiky. Obsah webové stránky může být ještě užitečnější pomocí protokolu přístupnosti WAI-ARIA a strukturovaných dat, která mohou být použita společně s protokolem RDFa, mikrodaty nebo značkami JSON-LD.