Důležitým principem webového designu je myšlenka použití prvků HTML k označení toho, co ve skutečnosti jsou, spíše než jak se mohou ve výchozím nastavení objevit v prohlížeči. Toto se označuje jako používání sémantického HTML.

Co je sémantický HTML?

Sémantické HTML nebo sémantické značení je HTML, které přináší webové stránce smysl, nikoli jen prezentaci. Například a

 tag označuje, že přiložený text je odstavec. To je sémantické i prezentační, protože lidé vědí, co jsou odstavce, a prohlížeče vědí, jak je zobrazit.

Na druhou stranu této rovnice jsou značky jako  a  nejsou sémantické. Definují pouze to, jak by měl text vypadat (tučně nebo kurzívou), a značce nepřidávají žádný další význam.

Mezi příklady sémantických značek HTML patří:

• Značky záhlaví

   přes

Při vytváření webu vyhovujícího standardům je možné použít mnohem více sémantických značek HTML.

Proč by vám měla záležet na sémantice

Výhoda psaní sémantického HTML pramení z toho, co by mělo být hlavním cílem každé webové stránky: touha komunikovat. Přidáním sémantických značek do dokumentu poskytnete další informace o tomto dokumentu, které pomáhají při komunikaci. Sémantické značky konkrétně objasňují prohlížeči, jaký je význam stránky a jejího obsahu. Tato jasnost je také komunikována s vyhledávači, což zajišťuje, že jsou poskytovány správné stránky pro správné dotazy.

Sémantické značky HTML poskytují informace o obsahu těchto značek, které jdou nad rámec toho, jak vypadají na stránce. Text, který je uzavřen v souboru  tag je prohlížeč okamžitě rozpoznán jako nějaký typ kódovacího jazyka. Místo toho, aby se pokusil vykreslit tento kód, prohlížeč chápe, že tento text používáte jako příklad kódu pro účely článku nebo online kurzu.

Používání sémantických značek vám dává mnohem více možností pro styling vašeho obsahu. Možná dnes dáváte přednost zobrazení ukázek kódu ve výchozím stylu prohlížeče, ale zítra je možná budete chtít vyvolat pomocí šedé barvy pozadí; později možná budete chtít definovat přesnou rodinu monoprostorových písem nebo zásobník písem použít pro vaše vzorky. Všechny tyto věci můžete dělat snadno pomocí sémantického značení a chytře aplikovaného CSS.

Správné používání sémantických značek

Pokud používáte sémantické značky k vyjádření významu, nikoli pro účely prezentace, dejte pozor, abyste je nepoužívali nesprávně jednoduše pro své běžné vlastnosti zobrazení. Mezi nejčastěji zneužívané sémantické značky patří:

• blockquote - Někteří lidé používají tag pro odsazení textu, který není citací. Důvodem je, že blokové uvozovky jsou ve výchozím nastavení odsazeny. Pokud chcete jednoduše odsadit text, který není blockquote, použijte místo toho okraje CSS.
• p - Někteří weboví editori používají (nerozbitný prostor obsažený v odstavci), který přidává další mezeru mezi prvky stránky, místo aby definoval skutečné odstavce pro text této stránky. Stejně jako v předchozím příkladu byste měli místo toho použít vlastnost margin nebo padding style.
• ul - Stejně jako u

  , uzavírající text uvnitř a

   značka odsadí tento text ve většině prohlížečů. Toto je sémanticky nesprávný i neplatný HTML, protože pouze
  •  značky jsou platné v rámci
    štítek. K odsazení textu opět použijte styl okraje nebo výplně.
  • h1, h2, h3, h4, h5 a h6 - Pomocí značek nadpisu můžete písma zvětšit a zvýraznit, ale pokud text není nadpisem, použijte místo toho vlastnosti CSS pro velikost písma a velikost písma.

  Pomocí značek HTML, které mají význam, vytvoříte stránky, které poskytují více informací než ty, které jednoduše obklopují vše

   značky.

  Které značky HTML jsou sémantické?

  Ačkoli téměř každá značka HTML4 a všechny HTML5 značky mají sémantický význam, některé značky jsou především sémantický.

  Například HTML5 předefinoval význam  a  značky mají být sémantické. The  značka nepřináší zvláštní důležitost; spíše je označený text obvykle vykreslen tučně. Stejně tak  značka nevyjadřuje zvláštní důležitost ani důraz; spíše definuje text, který je obvykle vykreslen kurzívou.

  Sémantické značky HTML

  Zkratka
  Akronym
  Dlouhá nabídka
  Definice
  Adresa autora (autorů) dokumentu
  Citace
  Odkaz na kód
  Teletype text
  Logické rozdělení
  Generický vložený styl kontejneru
  Smazaný text
  Byl vložen text
  Důraz
  Silný důraz
  Nadpis první úrovně
  Nadpis druhé úrovně
  Nadpis třetí úrovně
  Nadpis čtvrté úrovně
  Nadpis páté úrovně
  Nadpis šesté úrovně
  	Tematický zlom
  Text, který má zadat uživatel
  Předformátovaný text
  Krátká vložená nabídka
  Ukázkový výstup
  Dolní index
  Horní index
  Variabilní nebo uživatelem definovaný text