Správna sémantika je must

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ý

Pridaj komentár

Vaša e-mailová adresa nebude zverejnená.