Pri tvorbe prístupných webových stránok je jednou z najdôležitejších vecí používanie správnej sémantiky – čo znamená, že na určitý prvok na webovej stránke použijeme tú správnu sémantickú HTML značku. Tá zároveň jasne vypovedá, aký je obsah daného prvku. Čiže napríklad <div> a <span> sémantickými prvkami nie sú.
Príklad – nadpisy
Vysvetlíme si to na príklade nadpisov. Ak máme na webstránke nadpis, musí byť v HTML kóde otagovaný nasledovnou párovou značkou: <h1> </h1>. A to len v prípade, že sa jedná o nadpis prvej úrovne – čiže ten najmocnejší nadpis na danej webstránke. Viac by ich nemalo byť, pretože potom už by neboli najmocnejšie, ale museli by sa deliť o nadvládu nad obsahom konkrétnej webstránky webového sídla. Ak budú na webstránke aj nadpisy druhej úrovne – teda priame podnadpisy nadpisu prvej úrovne – musia byť otagované značkou: <h2> </h2>.
<h1>Názov článku (napr. Správna sémantika je must)</h1>
<h2>Príklady nadpisy</h2>
<h2>Ďalšie príklady</h2>
<h3>Zoznamy</h3>
<h3>Citácie</h3>
...Ďalšie príklady
Uvediem zopár základných sémantických značiek a ako ich na webstránke použiť.
Zoznamy
Zoznamy musia byť označené značkou <ul></ul> ak sa jedná o neočíslovaný zoznam (na poradí jednotlivých prvkov zoznamu nazáleží), alebo značkou <ol></ol> ak sa jedná o očíslovaný zoznam (tam na poradí prvkov záleží). Zoznam nemôže byť vytvorený pomlčkami a Enterom (značkou <br>).
Citácie
Citácie musia byť označené značkou <blockquote>. End of story.
Tabuľky
Tabuľky musia byť označené značkou <table> a daná značka sa použije len na vytváranie tabuliek – nie na vytváranie výzoru. To sa často dialo v minulosti – webstránka bola nadizajnovaná v tabuľkách, aby bola vizuálne presná a atraktívna, teraz však už máme parádne CSS a webku si môžme naštýlovať aj bez použitia značiek pre tabuľky. Tento nešvár však do dnešných čias pretrval v newslettroch, čo značne znepríjemňuje ich čítanie nevidiacim ľuďom. Čítač obrazovky im totiž číta, že sa nachádzajú v tabuľke, hoci by tam tabuľka nemala byť – ak tam teda naozaj nemá byť, pokiaľ si rozumieme :). Je to niečo také, ako keby tie tabuľky boli viditeľné aj pre vidiacich – všade by boli čiary – a ešte oveľa horšie. Prosím, nepoužívajte tabuľky na štýlovanie ničoho – jedine ak ste Mondrian.
Články
Ak máte na webstránke článok, označte ho značkou <article>.
Sekcie
Ak máte na webstránke viacero celkov, v ktorých obsah má medzi sebou súvis, ale nie medzi jednotlivými sekciami, označte tieto sekcie značkou <section>.
Rozdiel medzi článkom a sekciou
Článok <article> by mal byť samostatne distribuovateľný a znovupoužiteľný, sekcia <section> je tématické zoskupenie obsahu.
<section>
<p>Top Stories</p>
<section>
<p>News</p>
<article>Story 1</article>
<article>Story 2</article>
<article>Story 3</article>
</section>
<section>
<p>Sport</p>
<article>Story 1</article>
<article>Story 2</article>
<article>Story 3</article>
</section>
</section>Navigácia
Navigáciu uzavrite do značky <nav>.
Zopár ďalších sémantických značiek
Medzi ďalšie sémantické značky patria napr. (a teraz správne použijem zoznam):
- <aside> – nie je hlavným obsahom webstránky, ale nejako k nemu predsa len patrí
- <details> – obsahuje podrobnosti, ktoré si môže používateľ otvoriť a zavrieť
- <summary> – viditeľný nadpis prvku <details>
- <figure> – označenie fotografie, obrázku, diagramu alebo kódu v dokumente
- <figcaption> – označenie popisku k <figure>
- <footer> – päta webstránky
- <header> – hlavička webstránky
- <main> – hlavná oblasť webstránky
- <time> – označuje špecifický čas alebo dátum
Výhody používania sémantických značiek
Okrem toho, že správne používanie sémantických značiek výrazne zvyšuje prístupnosť webovej stránky, kód webstránky bude zrozumiteľnejší a lepšie čitateľný