Mi a szemantika a webfejlesztés kontextusában…

A webfejlesztésben a szemantika az HTML-címkék jelentés szerinti használatát jelenti, nem csupán a stílus kialakítását. Segít leírni a tartalom szerkezetét és értelmét, így a weboldal érthetőbbé válik a böngészők, keresőmotorok, képernyőolvasók és más parszerek számára.

A szemantikus jelölés fő előnyei:

Hozzáférhetőség: Javítja a weboldallal való interakciót fogyatékkal élő személyek számára, akik képernyőolvasókat használnak.
SEO: Segít a keresőmotoroknak jobban megérteni az oldal szerkezetét és tartalmát, ami pozitívan befolyásolja a rangsorolást.
Karbantarthatóság: Olvashatóbbá és érthetőbbé teszi a kódot más fejlesztők számára.
Kompatibilitás: Biztosítja a tartalom helyes megjelenítését különböző eszközökön és böngészőkben.

HTML5-ben szemantikus címkék példái:

<header>: A dokumentum vagy egy szekció bevezetőjét vagy navigációját jelöli.
<nav>: Navigációs linkcsoportot jelöl.
<main>: A dokumentum fő tartalmát jelöli.
<article>: Egy önálló, önmagában is értelmezhető tartalmi egységet képvisel (pl. blogbejegyzés, hír).
<section>: Egy önálló tartalmi szekciót jelöl a dokumentumban.
<aside>: Olyan tartalmat jelöl, amely közvetve kapcsolódik a fő tartalomhoz (pl. oldalsáv).
<footer>: A dokumentum vagy szekció alsó része, lábléce.
<figure> és <figcaption>: Médiaelemet (kép, diagram stb.) és annak leírását jelöli.
<time>: Dátumot és időt jelöl.

A szemantikus és nem-szemantikus megközelítés összehasonlítása:

Nem-szemantikus megközelítés	Szemantikus megközelítés
`<div>` és `<span>` használata mindenhez	Specifikus címkék használata (`<header>`, `<nav>`, `<article>`)
A struktúra leírása osztályokkal (`class="header"`)	A címkék, amelyek inherent módon írják le a struktúrát
A CSS-től függ a struktúra értelmezése	A struktúra HTML-kódból érthető

Nem-szemantikus jelölés példája:

<!-- non-semantic.html -->
<div class="header">
  <div class="logo"></div>
  <div class="nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </div>
</div>
<div class="content">
  <div class="article">
    <h2>Title</h2>
    <p>Content...</p>
  </div>
</div>
<div class="footer">
  <p>&copy; 2023</p>
</div>

Szemantikus jelölés példája:

<!-- semantic.html -->
<header>
  <img src="logo.png" alt="Logo">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h2>Title</h2>
    <p>Content...</p>
  </article>
</main>
<footer>
  <p>&copy; 2023</p>
</footer>

A szemantikus jelölés nem helyettesíti a CSS-t a stílus kialakításában, de informatívabbá és hasznosabbá teszi a HTML-dokumentumot a különböző tartalomfogyasztók számára.

Mi a szemantika a webfejlesztés kontextusában?