Szemantikus HTML elemek

A szemantikus HTML olyan elemeket használ, amelyek jelentéssel bírnak, és nemcsak vizuálisan, hanem funkcionálisan is segítik az oldal szerkezetét és értelmezhetőségét.

Miért fontos a szemantika?

A szemantikus elemek, mint a <header>, <article>, <footer>, stb. nemcsak a fejlesztőknek és böngészőknek segítenek, hanem a keresőmotoroknak és az akadálymentesítő technológiáknak is.

A <header> elem

A <header> egy szakasz vagy oldal bevezető részét jelöli, gyakran tartalmaz címet, logót vagy navigációt.

<header>
  <h1>My Website</h1>
  <p>Tagline goes here</p>
</header>

A <nav> elem

A <nav> a navigációs linkek tárolására szolgál. Külön jelzi a böngészőknek és olvasóknak, hogy ez a rész a weboldalon való mozgást szolgálja.

<nav>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

A <main> elem

A <main> az oldal fő tartalmát jelöli. Csak egyszer szabad használni egy oldalon, és nem tartalmazhat ismétlődő elemeket, mint pl. a navigáció vagy a lábléc.

A <section> elem

A <section> logikailag összetartozó tartalomcsoportot jelöl. Minden szakaszhoz ajánlott címet (pl. <h2>) adni.

<section>
  <h2>News</h2>
  <p>Latest updates and information.</p>
</section>

Az <article> elem

Az <article> önálló, független tartalmi egységet képvisel, például blogbejegyzést vagy hírcikket. Beágyazottan is használható, pl. hozzászólásoknál.

<article>
  <h2>How to Learn HTML</h2>
  <p>This article explains the basics of HTML...</p>
</article>

Az <aside> elem

Az <aside> olyan tartalmat jelöl, amely kapcsolódik a fő tartalomhoz, de nem része annak, például hivatkozások, reklám vagy idézetek.

A <footer> elem

A <footer> az oldal vagy egy szakasz lezáró része, gyakran tartalmaz szerzői jogi információkat, hivatkozásokat vagy kapcsolattartási adatokat.

Használati javaslatok

Használj szemantikus tageket minden strukturális célra, ne csak <div>-et! Ez segít az oldal olvashatóságában, fenntarthatóságában és SEO-ban is.