Szemantikus HTML5 Elemek
Az előző leckében megtanultuk, hogy a <div> tag tökéletes arra, hogy dobozokat hozzunk létre a weboldalon. A 2010-es évek elejéig a fejlesztők mindent div-ekkel oldottak meg. A kód így nézett ki: <div id="fejlec">, <div id="menu">, <div id="lablec">. Ezt hívták "Div-levesnek" (Div soup).
A probléma? A Googlebot és a képernyőolvasó szoftverek nem értették, hogy a sok ezer egyforma <div> közül melyik tartalmazza a lényegi információt, és melyik csak a menüt.
Mi az a Szemantikus HTML?
A "szemantikus" szó jelentéssel bírót jelent. A HTML5 szabvány bevezetett egy sor új taget, amik pontosan ugyanúgy viselkednek, mint egy blokk szintű <div>, de van saját jelentésük. Megmondják a böngészőnek és a keresőmotoroknak, hogy milyen típusú tartalom van bennük.
A legfontosabb Szemantikus Tagek
1. <header> (A Fejléc)
Az oldal vagy egy cikk bevezető része. Általában ide kerül a logó, a főcím és az oldal tetején lévő keresőmező.
2. <nav> (A Navigáció)
Kizárólag a weboldal fő navigációs linkjeit (a menüt) szabad beletenni. A Google ebből tudja, hogyan térképezze fel az aloldalaidat.
3. <main> (A Fő tartalom)
Egy oldalon csak egyetlen <main> tag lehet. Ez jelöli az oldal egyedi, legfontosabb tartalmát. A képernyőolvasók (vakok és gyengénlátók számára) van egy "Ugrás a fő tartalomra" funkciójuk, ami egyenesen ehhez a taghez ugrik, átugorva a menüt.
4. <article> (A Cikk)
Egy önálló, független tartalom, aminek önmagában is van értelme (például egy blogposzt, egy újságcikk, vagy egy fórum bejegyzés). Ha a tartalmat kitépnéd az oldalról és feltennéd egy másik oldalra, akkor is érthető maradna.
5. <aside> (Az Oldalsáv)
Olyan tartalom, ami kapcsolódik a fő tartalomhoz, de nem része annak szorosan. Tipikusan ilyenek a weboldalak jobb vagy bal szélén lévő oldalsávok (ahol a reklámok, vagy a "Legolvasottabb cikkek" listája van).
6. <footer> (A Lábléc)
Az oldal vagy egy szekció legalja. Ide kerülnek a szerzői jogi információk (Copyright), az ÁSZF linkek és a kapcsolati adatok.
Hogyan néz ki egy modern HTML5 váz?
Ha a régi "Div-leves" helyett szemantikus tageket használsz, a kódod sokkal tisztább és olvashatóbb lesz:
<body>
<header>
<h1>A Cégem Logója</h1>
<nav>
<ul>
<li><a href="/">Főoldal</a></li>
<li><a href="/kapcsolat">Kapcsolat</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>A mai nap legfontosabb híre</h2>
<p>Itt van a cikk szövege...</p>
</article>
<aside>
<h3>Hírlevél feliratkozás</h3>
<!-- Űrlap kódja -->
</aside>
</main>
<footer>
<p>© 2026 Minden jog fenntartva.</p>
</footer>
</body>SEO Titok: A Google algoritmusa imádja a szemantikus HTML-t. Ha a cikkedet egy <article> tagbe teszed, sokkal nagyobb eséllyel kerülsz be a Google Hírekbe vagy a kiemelt találatok (Rich Snippets) közé, mintha egy sima div-ben hagynád.