Dôležitým princípom vo webdizajne je myšlienka používať prvky HTML na označenie toho, čo v skutočnosti sú, a nie ako sa môžu predvolene zobrazovať v prehliadači. Toto sa nazýva sémantické HTML.

Čo je sémantické HTML?

Sémantické HTML alebo sémantické značenie je HTML, ktoré prináša webovej stránke zmysel, nie iba prezentáciu. Napríklad a

 značka označuje, že priložený text je odsek. Je to sémantické aj prezentačné, pretože ľudia vedia, čo sú odseky, a prehliadače ich vedia zobraziť.

Na odvrátenej strane tejto rovnice sú značky ako  a  nie sú sémantické. Definujú iba to, ako má text vyzerať (tučné alebo kurzíva), a značke nepripisujú žiadny ďalší význam.

Medzi príklady sémantických značiek HTML patria:

• Značky hlavičiek

   cez

Pri vytváraní webových stránok vyhovujúcich štandardom môžete použiť oveľa viac sémantických značiek HTML.

Prečo by vám mala záležať na sémantike

Výhoda písania sémantického HTML vyplýva z toho, čo by malo byť hlavným cieľom každej webovej stránky: túžba komunikovať. Pridaním sémantických značiek do dokumentu poskytnete ďalšie informácie o dokumente, ktoré uľahčujú komunikáciu. Konkrétne sémantické značky prehľadávaču objasnia, aký je význam stránky a jej obsahu. Táto jasnosť je tiež komunikovaná s vyhľadávacími nástrojmi, čo zaisťuje, že sa zobrazia správne stránky pre správne dotazy.

Sémantické značky HTML poskytujú informácie o obsahu týchto značiek, ktoré idú nad rámec toho, ako vyzerajú na stránke. Text, ktorý je priložený k  značka je prehľadávačom okamžite rozpoznaná ako nejaký typ kódovacieho jazyka. Namiesto pokusu o vykreslenie tohto kódu prehliadač pochopí, že tento text používate ako príklad kódu na účely článku alebo online výučby.

Používanie sémantických značiek vám dáva tiež oveľa viac možností na úpravu obsahu. Možno dnes dávate prednosť zobrazeniu vzorov kódu v predvolenom štýle prehliadača, ale zajtra ich možno budete chcieť vyvolať so šedou farbou pozadia; neskôr ešte možno budete chcieť definovať presnú jednopriestorovú rodinu fontov alebo zásobník písma použiť pre vaše vzorky. Všetky tieto veci môžete robiť ľahko pomocou sémantického označenia a inteligentne aplikovaného CSS.

Správne používanie sémantických značiek

Ak používate sémantické značky skôr na vyjadrenie významu než na prezentačné účely, dávajte pozor, aby ste ich nepoužívali nesprávne iba na svoje bežné vlastnosti zobrazenia. Medzi najčastejšie zneužívané sémantické značky patrí:

• blockquote - Niektorí používajú značka pre odsadenie textu, ktorý nie je citátom. Je to tak preto, lebo blokové úvodzovky sú predvolene odsadené. Ak chcete iba odsadiť text, ktorý nie je blokovaný, použite namiesto toho okraje CSS.
• p - Niektorí weboví editori používajú (neprerušiteľný priestor obsiahnutý v odseku), aby ste medzi prvky stránky pridali viac priestoru namiesto definovania skutočných odsekov pre text tejto stránky. Rovnako ako v predchádzajúcom príklade by ste na pridanie medzery mali namiesto toho použiť vlastnosť štýlu margin alebo padding.
• ul - Ako s

  , obklopujúci text vo vnútri a

   značka odsadí tento text vo väčšine prehliadačov. Toto je sémanticky nesprávny aj neplatný kód HTML, pretože iba
  •  značky sú platné v rámci a
    značka. Na odsadenie textu opäť použite štýl okraja alebo výplne.
  • hl, h2, h3, h4, h5 a h6 - Značky nadpisu môžete použiť na zväčšenie a výraznosť písma, ale ak text nie je nadpisom, použite namiesto toho vlastnosti CSS pre veľkosť písma a veľkosť písma.

  Použitím značiek HTML, ktoré majú význam, vytvárate stránky, ktoré poskytujú viac informácií ako tie, ktoré jednoducho obklopujú všetko

   značky.

  Ktoré značky HTML sú sémantické?

  Aj keď takmer každá značka HTML4 a všetky HTML5 značky majú sémantický význam, niektoré značky sú primárne sémantický.

  Napríklad HTML5 predefinoval význam súboru  a  značky musia byť sémantické. The  značka neprináša mimoriadny význam; označený text sa skôr vykresľuje tučným písmom. Rovnako tak  značka neprináša mimoriadny význam alebo dôraz; skôr definuje text, ktorý je zvyčajne vykreslený kurzívou.

  Sémantické značky HTML

  Skratka
  Skratka
  Dlhá citácia
  Definícia
  Adresa autora (autorov) dokumentu
  Citácia
  Odkaz na kód
  Teletypový text
  Logické rozdelenie
  Všeobecný vložený štýl kontajnera
  Text bol odstránený
  Bol vložený text
  Dôraz
  Silný dôraz
  Nadpis prvej úrovne
  Nadpis druhej úrovne
  Nadpis tretej úrovne
  Nadpis štvrtej úrovne
  Nadpis piatej úrovne
  Nadpis šiestej úrovne
  	Tematický zlom
  Text, ktorý má zadať používateľ
  Predformátovaný text
  Krátka vložená ponuka
  Ukážkový výstup
  Dolný index
  Horný index
  Variabilný alebo používateľom definovaný text