Čo sú to sémantické prvky v HTML a na čo slúžia?

Semantické prvky v HTML sú značky (<header>, <nav>, <article>, <aside>, <footer>, <section>, <main>, <figure>, <figcaption>, <time>, <mark>, <summary>, <details>), ktoré opisujú sémantický účel obsahu, ktorý obklopujú, nie len jeho vzhľad.

Hlavný účel:

• Prístupnosť: Pomáhajú asistenčným technológiám (napríklad čítačkám obrazovky) pochopiť štruktúru a obsah stránky, čím robia obsah prístupnejším pre používateľov s obmedzeniami.
• SEO (Optimalizácia pre vyhľadávače): Stránky so sémantickou markupou sú lepšie indexované a zoradené vyhľadávačmi, pretože môžu presnejšie určiť hlavný obsah a jeho relevanciu k dopytom.
• Vývoj a údržba: Zlepšujú čitateľnosť a udržiavateľnosť kódu, čím robia štruktúru stránky jasnejšou pre iných vývojárov (a pre vás v budúcnosti).
• Lepšie pochopenie štruktúry: Umožňujú jasne oddeliť logické bloky stránky (navigácia, hlavný obsah, päta atď.).

Príklad ne-sémantického označenia:

<div>
  <h2>Nadpis článku</h2>
  <p>Obsah článku...</p>
</div>
<div>
  <h3>Bočný panel</h3>
  <p>Informácie o bočnom paneli...</p>
</div>

Príklad sémantického označenia:

<article>
  <h2>Nadpis článku</h2>
  <p>Obsah článku...</p>
</article>
<aside>
  <h3>Bočný panel</h3>
  <p>Informácie o bočnom paneli...</p>
</aside>

Použitie sémantických prvkov prispieva k vytváraniu štruktúrovanejších, prístupnejších a pre vyhľadávače optimalizovaných webových stránok.