Mi az a szemantikus elemek az HTML-ben, és mire valók?

A HTML szemantikus elemei olyan tagek (<header>, <nav>, <article>, <aside>, <footer>, <section>, <main>, <figure>, <figcaption>, <time>, <mark>, <summary>, <details>), amelyek leírják a körülöttük lévő tartalom szemantikus célját, nem csak a megjelenését.

Fő cél:

• Hozzáférhetőség: Segítik a segédeszközöket (pl. képernyőolvasókat) megérteni az oldal szerkezetét és tartalmát, így a tartalom akadálymentessé válik a korlátozott képességű felhasználók számára.
• SEO (Keresőoptimalizálás): A szemantikus markup jobb indexelést és rangsorolást tesz lehetővé a keresőmotorok számára, mivel pontosabban tudják meghatározni a fő tartalmat és annak relevanciáját a lekérdezésekhez.
• Fejlesztés és karbantartás: Javítja a kód olvashatóságát és karbantarthatóságát, így a oldal szerkezete könnyebben érthető más fejlesztők (és a jövőbeni önmaga) számára.
• A szerkezet jobb megértése: Lehetővé teszi a logikai blokkok (pl. navigáció, fő tartalom, lábléc stb.) egyértelmű elkülönítését.

Nem szemantikus markup példája:

<div>
  <h2>Az oldal címe</h2>
  <p>Az oldal tartalma...</p>
</div>
<div>
  <h3>Oldalsáv</h3>
  <p>Az oldalsáv információi...</p>
</div>

Szemantikus markup példája:

<article>
  <h2>Az oldal címe</h2>
  <p>Az oldal tartalma...</p>
</article>
<aside>
  <h3>Oldalsáv</h3>
  <p>Az oldalsáv információi...</p>
</aside>

A szemantikus elemek használata segít strukturáltabb, hozzáférhetőbb és keresőmotorokra optimalizált weboldalak létrehozásában.