-s a -s, ako nemusíte ich úplne zbaviť. Stále sú tou najlepšou voľbou pre zoskupovanie obsahu výlučne na účely stylingu av iných prípadoch poslednej inštancie.

Textový sémantika v jazyku HTML5

HTML5 predstavil mnoho nových sémantických prvkov, ktoré umožňujú jednoduchú organizáciu obsahu. Nielen, že vám pomôžu usporiadať obsah na úrovni celého dokumentu (pozri podrobnejšie v ďalšej časti), ale aj vo vnútri textových blokov ako inline tagy.

Pravdepodobne najznámejšie sémantické tagy na úrovni textu sú a , ale existovali pred HTML5. Medzi novými sémantickými prvkami inline môžeme nájsť napr , tag pre ľudsky čitateľné dátumové časy, a pre zvýraznený text.

Pozrite si tento zoznam pre všetky sémantické prvky na úrovni textu, ktoré sa momentálne používajú.

Obrys dokumentu v HTML5

Obrys dokumentu je štruktúra dokumentu HTML. Zobrazuje, ako sú prvky vzájomne prepojené. Obrys dokumentu bol vygenerovaný výlučne mapovacími prvkami, ako sú názvy, názvy tabuliek, názvy formulárov a iné v starších verziách HTML, ako sú HTML4.01 a XHTML.

V HTML5 bol algoritmus načrtnutý novými prvkami rozdelenia, a to:

• pre sekcie zoskupené okolo konkrétnej témy
• pre úplné alebo samostatné kompozície ako napríklad blogový príspevok alebo widget
• pre navigačné bloky
• pre komplementárny obsah, ako napríklad postranné lišty.

V HTML5 je prvý prvok pre delenie, ale nie je to nové, je to tag.

a tagy sú tiež nové, nevytvárajú však nové sekcie v dokumente, rozdeľujú obsah vnútri sekcií. To znamená, že každý prvok rezu (telo, článok, sekcia, nav a stranou) môže mať vlastnú hlavičku a pätu.

Tipy pre sémanticky štruktúrovaný obsah

Ak chceme vytvoriť prehľadný štruktúrovaný dokument, musíme venovať pozornosť nasledujúcim pravidlám:

1. Najvzdialenejší rezací prvok je vždy štítok.

2. Sekcie v HTML5 môžu byť vnorené.

3. Každá sekcia má vlastnú hierarchiu nadpisov. Každá z nich (dokonca aj najvnútornejšia vnorená časť) môže mať h1 štítok.

4. Zatiaľ čo obrys dokumentu je primárne vymedzený 5 prvkami rezov, potrebuje aj príslušné nadpisy pre každú sekciu.

5. Je to vždy prvý prvok nadpisu (nechajte ho označiť h1 alebo nižšiu pozíciu), ktorý definuje nadpis danej sekcie. Nasledujúce značky v rámci tej istej sekcie musia byť relatívne k tomu. (Ak je prvý nadpis h3 vo vnútri prvku na rezanie, po tom neumiestňujte h3.)

6. Sekcie definované v

, a tagy nepatria do hlavnej osnovy dokumentu HTML, zvyčajne nie sú vykresľované na začiatku asistenčnými technológiami.

7. Každá časť (telo, sekcia, článok, stranou, nav) môže mať svoje vlastné

a tagy, ktoré definujú záhlavie (napríklad logo, meno autora, dátumy, meta info atď.) a pätu (autorské práva, poznámky, odkazy atď.) tejto sekcie.

Príklad: Sémantický obrys

Pozrime sa na príklad pre sémantický obrys dokumentov, aby sme zistili, ako to funguje. Náš príkladový kód bude mať nasledujúcu štruktúru dokumentu:

A tu je kód s riadnym sémantickým rezom:

  
 
Vitajte na našich webových stránkach!
 
Tu je naše logo a slogan.
 
  
 
 
Názov článku
 
Podtitul článku
 
 
 
Prvá logická časť (napr. "Teória")
 
Odsek 1 v prvej časti
 
Niektoré ďalšie podpoložky v prvej časti
 
Odsek 2 v prvej časti
 
 
 
Druhá logická časť (napr. "Prax")
 
Odsek 1 v druhej časti
 
Odsek 2 v druhej časti
 
  
    

Ak sa pozriete na úryvok kódu vyššie, uvidíte, že záhlavia a päty sú voliteľné, môžeme si slobodne vybrať, či ich chceme použiť alebo nie, ale je to dôrazne odporúčame, aby vždy obsahoval nadpis pre každú sekciu, inak bude sekcia “Untitled” v dokumente.

Našťastie existuje veľa skvelých nástrojov po celom internete, ktoré nám umožňujú skontrolovať prehľad dokumentov, tentokrát použijeme nástroj Outliner na stránke html5.org.

Ak vložíme náš útržok kódu do formulára poskytnutého načrtávačom, kliknite na “Nakreslite to!” , zobrazí sa nasledujúci výsledok:

To je dokumentovať náš vzorový kód, ako to vidia vyhľadávacie nástroje, a čítačky obrazovky si ju prečítajú pre svojich zrakovo postihnutých používateľov. Je to sémantický, dobre štruktúrovaný a nie je to škaredé “Untitled” časti v ňom.

Ak chcete pozrieť ako vyzerá sekcia s názvom Untitled, kliknite na tlačidlo Odstrániť len niektoré z nadpisov nadpisu v príklade kódu.

Iné aspekty sémantiky webu

Semantické HTML značky a obrysy dokumentov sú len malou časťou sémantiky webu. Obsah webovej stránky môže byť ešte dôležitejší pomocou protokolu prístupnosti WAI-ARIA a štruktúrovaných údajov, ktoré je možné použiť spolu s protokolom RDFa, mikrodatami alebo značkou JSON-LD.