Co jsou to sémantické prvky v HTML a k čemu slouží?

Semantické prvky v HTML jsou značky (<header>, <nav>, <article>, <aside>, <footer>, <section>, <main>, <figure>, <figcaption>, <time>, <mark>, <summary>, <details>), které popisují sémantický účel obsahu, který obklopují, nikoliv pouze jeho vzhled.

Hlavní účel:

• Přístupnost: Pomáhají asistenčním technologiím (například čtečkám obrazovky) pochopit strukturu a obsah stránky, čímž činí obsah přístupným pro uživatele s omezeními.
• SEO (Optimalizace pro vyhledávače): Stránky s sémantickým označením jsou lépe indexovány a řazeny vyhledávači, protože mohou přesněji určit hlavní obsah a jeho relevanci k dotazům.
• Vývoj a údržba: Zlepšují čitelnost a udržovatelnost kódu, což činí strukturu stránky srozumitelnější pro jiné vývojáře (a pro vás v budoucnu).
• Lepší pochopení struktury: Umožňují jasně oddělit logické bloky stránky (navigace, hlavní obsah, zápatí atd.).

Příklad ne-sémantického označení:

<div>
  <h2>Nadpis článku</h2>
  <p>Obsah článku...</p>
</div>
<div>
  <h3>Postranní panel</h3>
  <p>Informace o postranním panelu...</p>
</div>

Příklad sémantického označení:

<article>
  <h2>Nadpis článku</h2>
  <p>Obsah článku...</p>
</article>
<aside>
  <h3>Postranní panel</h3>
  <p>Informace o postranním panelu...</p>
</aside>

Použití sémantických prvků přispívá k vytváření strukturovanějších, přístupnějších a pro vyhledávače optimalizovaných webových stránek.