Čo je sémantické HTML? Význam, príklad a použitie

Sémantické HTML je používanie značiek podľa toho, aký význam má obsah, a nie podľa toho, ako vyzerá. Napríklad značka h1 označuje hlavný nadpis stránky a nav navigáciu. Vzhľad zabezpečuje CSS.

Aký je rozdiel medzi sémantickou a nesémantickou značkou?

Značka	Význam
`h1`	Hlavný nadpis stránky
`nav`, `main`, `article`, `header`, `footer`	Navigácia, hlavný obsah, samostatný článok, hlavička a pätička
`div`, `span`	Všeobecné kontajnery bez významu, používajú sa, keď nesedí žiadna sémantická značka

Sémantické a nesémantické značkyZdroj: MDN Web Docs: Semantics (Glossary)

Prečo je dôležité?

Prístupnosť. Čítačky obrazovky využívajú značky ako orientačné body, takže nevidiaci vedia stránkou lepšie prechádzať. Viac pri pojme prístupnosť webu.
SEO. MDN uvádza, že vyhľadávače berú obsah sémantických značiek ako dôležitý pre poradie stránky. Zrozumiteľná štruktúra uľahčuje interpretáciu stránky.
Údržba. Zmysluplné bloky kódu sa hľadajú ľahšie než nekonečné rady značiek div.

Aká je základná zásada?

MDN radí zapísať HTML tak, aby reprezentovalo údaje, ktoré sa doň vložia, a nie ich štandardný vzhľad. Prezentáciu má na starosti výlučne CSS. Pri výbere značky sa preto pýtame, ktorá značka najlepšie opisuje obsah. Tak postupujeme aj pri nadpisoch.

Čo si zapamätať o pojme sémantické HTML?

Sémantické HTML používa značky podľa významu obsahu a prináša lepšiu prístupnosť, zrozumiteľnú štruktúru pre vyhľadávače aj prehľadnejší kód. Je základom kvalitnej stavby webu. Ak chcete skontrolovať kód vášho webu, kontaktujte nás.

Ako to rieši webstrankanamieru.sk: Pojem sémantické HTML patrí do technickej časti optimalizácie. Postup nájdete v sekcii SEO na mieru, zistenia z praxe v novinkách a ceny v cenníku. Ak chcete skontrolovať svoj web, napíšte nám.

Súvisiace pojmy: HTML, Nadpisy H1 až H6, Prístupnosť webu, CSS, Technické SEO, JSON-LD, Alt text, W3C

Často kladené otázky o pojme sémantické HTML

Čo je sémantické HTML?

Je to používanie značiek HTML podľa významu obsahu, nie podľa vzhľadu. Vzhľad zabezpečuje CSS.

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

Napríklad h1, nav, main, article, header a footer. Značky div a span sú všeobecné kontajnery bez významu.

Pomáha sémantické HTML SEO?

MDN uvádza, že vyhľadávače berú obsah sémantických značiek ako dôležitý pre poradie stránky, a štruktúra uľahčuje jej interpretáciu.

Prečo je sémantika dôležitá pre prístupnosť?

Čítačky obrazovky využívajú značky ako orientačné body, takže nevidiaci používatelia sa na stránke lepšie orientujú.

Kedy použiť div?

Keď žiadna sémantická značka nevyhovuje, napríklad ako háčik pre štýly.

Zdroje

MDN Web Docs: Semantics (Glossary)Definícia sémantiky v HTML, príklady, prístupnosť, SEO a údržba.
MDN Web Docs: HTML (Glossary)Úvod do HTML.
W3C Web Accessibility Initiative: Accessibility Standards OverviewPokyny pre prístupnosť webového obsahu.

Všetky pojmy v slovníku