HTML szemantika: teljes útmutató

A HTML szemantika azt jelenti, hogy minden tartalmi elemet a jelentésének megfelelő HTML elemmel jelölsz: a címsort címsor elemmel, a listát listával, a navigációt nav elemmel, a fő tartalmat main elemmel. A kereső és a képernyőolvasó így a kódból is megérti, mi a lap szerkezete, nem csak a megjelenésből. A szemantika nem rangsorolási trükk, hanem egyértelmű jelzés.

Alapfogalmak

A HTML elemeknek két tulajdonságuk van: hogyan néznek ki alapesetben, és mit jelentenek. A megjelenés CSS-sel bármikor felülírható, a jelentés viszont az elem nevéből következik. Egy div elem semmit nem jelent, csak egy doboz. Egy nav elem azt jelenti, hogy navigáció, egy ol elem azt, hogy rendezett lista, egy table elem azt, hogy táblázatos adat. A szemantikus jelölés arról szól, hogy a jelentést hordozó elemet válaszd, ne a kinézet alapján döntsd el, mit használsz.

Ennek azért van jelentősége, mert a gépi olvasók nem látják a lapot úgy, mint egy ember. A kereső robotja és a képernyőolvasó elsősorban a kódból dolgozik. Ha egy félkövér, nagy betűs div a lap címe, azt ember felismeri, gép nem feltétlenül. Ha ugyanez egy h1 elem, a gép is tudja.

A legfontosabb szemantikus elemek

Elem	Jelentés	Tipikus használat
header	Bevezető rész	A lap vagy egy cikk fejléce
nav	Navigáció	Főmenü, morzsamenü, lapozó
main	Fő tartalom	Laponként egyszer, a lap saját tartalma
article	Önálló tartalmi egység	Blogbejegyzés, cikk, hozzászólás
section	Tematikus szakasz	Egy címsorral kezdődő rész a cikken belül
aside	Kiegészítő tartalom	Oldalsáv, kapcsolódó cikkek, kiemelt doboz
footer	Zárórész	Lábléc, szerzői adatok
h1-h6	Címsorok szintjei	A tartalom vázlata
ul, ol, li	Felsorolás, rendezett lista	Tételek, lépések
table, th, td	Táblázatos adat	Összehasonlítás, adatsor
time	Időpont	Közzététel, frissítés dátuma gépileg olvasható formában

Szemantika és strukturált adat

A két fogalmat gyakran összekeverik. A HTML szemantika a lap szerkezetét jelöli: hol a navigáció, hol a fő tartalom, mi a címsor. A strukturált adat (például schema.org JSON-LD) a tartalom jelentését írja le: ez egy termék, ennek ennyi az ára, ez egy recept, ennyi ideig tart. A kettő kiegészíti egymást, de egyik sem helyettesíti a másikat. Egy lapnak lehet hibátlan strukturált adata és teljesen div alapú, jelentés nélküli HTML-je is.

Egy egyszerű próba segít eldönteni, mennyire szemantikus egy lap: kapcsold ki gondolatban a CSS-t. Ha a lap így is érthető, a címsorok címsornak, a listák listának, a táblázatok táblázatnak látszanak, akkor a jelölés jó. Ha egyetlen formázatlan szövegfolyam marad, akkor a szerkezet csak a stíluslapban létezett, a kódban nem.

Hogyan működik?

Amikor a kereső feldolgoz egy lapot, a HTML-ből építi fel a dokumentum képét. A szemantikus elemek ebben útjelzőként működnek: megmondják, melyik rész a lényeg, melyik a keret, és hogyan tagolódik a tartalom. Ezek a jelek nem egyetlen pontszámot adnak, hanem a lap megértését könnyítik.

Mit olvas ki a kereső a jelölésből

A fő tartalom határait. A main és az article elem egyértelművé teszi, hol kezdődik és hol ér véget a lap saját szövege.
A tartalom vázlatát. A címsorok szintjei megmutatják, melyik szakasz melyiknek az alrésze.
A kiemelhető blokkokat. Egy valódi ol lista vagy table elem könnyebben emelhető ki válaszként, mint ugyanez bekezdésekbe vagy képbe írva.
A navigációs linkek szerepét. A nav elemben lévő linkek a webhely szerkezetét mutatják, a szövegben lévők a tartalmi kapcsolatot.
A dátumokat. A time elem datetime attribútuma gépileg olvasható formában adja meg a közzététel idejét.

A képernyőolvasók és az akadálymentesség

A szemantikus HTML elsődleges haszna valójában az akadálymentesség. A képernyőolvasót használó látogató a címsorok között ugrálva, a navigációs területeket átugorva, a listák elemszámát hallva tájékozódik. Ha a lap csak div elemekből áll, ez a navigáció lehetetlen: a képernyőolvasó egyetlen hosszú szövegfolyamként olvassa fel az egészet.

Az akadálymentesség és a keresőoptimalizálás itt ugyanabba az irányba mutat. Amit a képernyőolvasó könnyen értelmez, azt a kereső robotja is. Ezért a szemantikus jelölés akkor is megéri, ha a rangsorolásra gyakorolt közvetlen hatása nem mérhető.

Mi történik, ha a jelölés hiányzik?

A kereső jelölés nélkül is megpróbálja megérteni a lapot: vizuális jelekből, a szövegméretből, az ismétlődő blokkokból következtet. Ez általában működik, de több a tévedési lehetőség. Egy nagy betűs, de nem címsorként jelölt szöveg lehet, hogy nem kap címsor súlyt. Egy képként beillesztett táblázat tartalmát a kereső nem olvassa. Egy JavaScripttel kattinthatóvá tett div nem link. A jelölés hiánya tehát nem büntetés, hanem egy félreértési lehetőség, amit te hagysz nyitva.

JavaScripttel épített lapok

Ha a lap tartalmát JavaScript rajzolja ki, a kereső a megjelenített változatot nézi. A szemantika itt is ugyanúgy számít, csak a hibák nehezebben látszanak, mert a forráskódban nincs semmi. Ilyenkor mindig a megjelenített HTML-t kell ellenőrizni: ott van-e a main elem, és a linkek valódi a elemek-e.

Fő módszerek

A szemantikus jelölés bevezetése sablonszintű munka. A legtöbb lap néhány sablonból épül fel, és ha a sablon jó, minden rá épülő lap jó lesz. Az alábbi módszerek a hatásuk sorrendjében következnek.

1. A lap vázának jelölése

Minden lap alapszerkezete legyen ugyanaz: header a fejlécnek, nav a navigációnak, main a fő tartalomnak, aside a kiegészítő blokkoknak, footer a láblécnek. A main elem laponként egyszer szerepeljen. Ez az a lépés, amely a legkevesebb munkával a legtöbbet adja, mert egyszer kell megcsinálni a sablonban.

<body>
  <header>...logó, főmenü (nav)...</header>
  <main>
    <article>
      <h1>A lap címe</h1>
      <p>Rövid válasz...</p>
      <section><h2>Első szakasz</h2>...</section>
    </article>
    <aside>...kapcsolódó cikkek...</aside>
  </main>
  <footer>...</footer>
</body>

2. Címsorok a tartalomhoz, nem a kinézethez

A címsor elem akkor legyen címsor, ha egy szakasz címe. Ha csak nagyobb betűt szeretnél, arra a CSS való. Gyakori sablonhiba, hogy a lábléc „Kapcsolat" felirata vagy az oldalsáv „Legújabb cikkek" címe h2 vagy h3, így ezek beépülnek a lap vázlatába, mintha a tartalom részei lennének. A címsorok szintjeinek pontos szabályait a heading struktúráról szóló útmutató tárgyalja.

3. Valódi listák és táblázatok

A lépéssor ol elem, minden lépés li.
A felsorolás ul elem, nem kötőjellel kezdődő bekezdések.
Az összehasonlítás table elem, fejlécsorral (th), nem kép és nem egymás mellé tett div dobozok.
A definíciós párok dl, dt és dd elemmel jelölhetők, ha a tartalom valóban fogalom és magyarázat párokból áll.

4. Linkek és gombok szétválasztása

Ami másik lapra visz, az a elem href attribútummal. Ami a lapon belül csinál valamit (lenyit, szűr, elküld), az button elem. A kattintható div vagy span sem linknek, sem gombnak nem számít a gépi olvasók számára. SEO szempontból ez különösen fontos: a kereső a href attribútumot követi, a JavaScripttel kezelt kattintást nem feltétlenül.

5. Kiemelés jelentéssel

A strong elem fontosságot jelent, az em hangsúlyt. A b és i elemek csak megjelenést. Ha egy mondatrész tartalmilag fontos, strong elemmel jelöld. Ha csak vizuálisan szeretnéd kiemelni, arra a CSS vagy a b elem való. Ez finom különbség, de a képernyőolvasók egy része a hangsúlyt a felolvasásban is jelzi.

6. Képek és médiatartalom

A tartalmi képnek legyen leíró alt szövege, a díszítő képnek üres alt attribútuma. Ha a képhez felirat tartozik, a figure és figcaption elem összeköti a kettőt. A dátumokat time elembe tedd datetime attribútummal, így a gépek egyértelműen olvassák, függetlenül attól, hogy a lapon „tegnap" vagy „2026. szeptember 30." látszik.

Döntési szabály: div vagy szemantikus elem?

Van-e a tartalomnak a HTML-ben megnevezett szerepe (navigáció, lista, táblázat, címsor, idézet)? Ha igen, azt az elemet használd.
Önálló egység, amelyet ki lehetne emelni a lapból? Akkor article.
Egy címsorral kezdődő tematikus rész? Akkor section.
A fő tartalomhoz kapcsolódik, de nélküle is érthető lenne a lap? Akkor aside.
Csak elrendezési vagy formázási célja van? Akkor div, és ez így rendben van.

Gyakori hibák

A szemantikai hibák többsége nem hanyagságból, hanem sablonokból és oldalépítő eszközökből származik, amelyek kényelmi okból mindent div elemmel oldanak meg. Ezért a javítás is sablonszinten a leghatékonyabb.

Szerkezeti hibák

Div leves. A teljes lap egymásba ágyazott div elemekből áll, szemantikus elem egyáltalán nincs. Ez oldalépítő bővítményeknél gyakori.
Több main elem. A sablon és egy beágyazott blokk is kiad main elemet, így a fő tartalom határa elmosódik.
Section mindenhol. Minden doboz section, címsor nélkül. A section elem akkor ad jelentést, ha egy címsorral kezdődő tematikus rész. Ha nincs címsora, valószínűleg div a helyes választás.
Címsor díszítésre. A „Hírlevél" vagy „Kövess minket" felirat h2, és így a lap vázlatának része lesz.

Tartalmi hibák

Táblázat képként. Az árlista vagy összehasonlítás egy kép, amelynek tartalmát a kereső nem olvassa.
Lista bekezdésekben. A lépések külön bekezdésekben állnak, kézzel beírt sorszámmal.
Kattintható div link helyett. A menüpontok vagy kártyák JavaScripttel navigálnak, href nélkül.
Hiányzó vagy semmitmondó alt szöveg. „kep1.jpg" vagy „kép" az alt attribútumban.

Oldalépítő eszközök

Az oldalépítő bővítmények többsége engedi, hogy egy blokk HTML elemét kiválaszd, csak alapesetben div marad. Mielőtt sablont cserélnél, érdemes megnézni ezeket a beállításokat: gyakran egy legördülő menüben a sorblokk section-re, a szövegdoboz címsorából pedig sima bekezdés tehető.

Tévhit: a szemantikus HTML rangsorolási tényező

Gyakran olvasni, hogy az article vagy a section elem használata jobb helyezést hoz. Ez így nem igaz. A kereső nem ad pontot azért, mert egy lapon article elem van. Amit a szemantika ad, az az egyértelműség: kisebb az esélye, hogy a kereső félreérti a lap szerkezetét, és nagyobb az esélye, hogy egy listát vagy táblázatot kiemel válaszként. Egy jól megírt lap div alapú HTML-lel is rangsorolhat, és egy tökéletes szemantikájú üres lap sem fog.

Ellenpélda: amikor a div a helyes választás

A szemantikus elemek túlhasználata is hiba. Egy rácsos elrendezés oszlopai, egy kártyát körülvevő keret, egy háttérszínt adó doboz nem hordoz jelentést, ezekre a div a megfelelő elem. Ha minden dobozból section vagy article lesz, a jelölés elveszíti az értelmét, mert már nem különbözteti meg a fontosat a formázástól.

Mérés

A szemantikus jelölés minőségét közvetlenül a kódban lehet mérni, a hatását pedig közvetetten, a kereső értelmezésén és az akadálymentességi teszteken keresztül.

Mit mérj és hol

Kérdés	Eszköz	Mit keresel
Megvan-e a lap váza?	Forráskód, böngésző fejlesztői eszköze	header, nav, main, footer elemek, a main laponként egyszer
Rendben van-e a címsor-vázlat?	Címsor-kiíró böngészőbővítmény vagy bejáró	Nincs-e díszítő címsor, kihagyott szint
Mit lát a kereső?	Search Console URL-ellenőrző, megjelenített HTML	A szemantikus elemek a megjelenített kódban is ott vannak-e
Akadálymentes-e?	Akadálymentességi auditor (például a böngésző beépített ellenőrzője)	Hiányzó alt, gomb és link szerepének hibái, tájékozódási pontok
Követhetők-e a linkek?	Webhely-bejáró	Href nélküli, JavaScripttel kezelt navigáció

Ellenőrzési eljárás egy sablonra

Nyiss meg egy jellemző lapot a sablonból, és nézd meg a megjelenített kódot, ne csak a forrást.
Keresd meg a main elemet: pontosan egy van-e, és a lap saját tartalmát foglalja-e magába.
Listázd ki a címsorokat: csak a tartalomhoz tartozók szerepelnek-e.
Nézd meg a listákat és táblázatokat: valódi elemek-e.
Futtass akadálymentességi auditot, és jegyezd fel a sablonszintű hibákat.
A javítást a sablonban végezd, majd ellenőrizd újra ugyanazon a lapon és egy másik, azonos típusú lapon.

Kidolgozott példa

Egy oldalépítő bővítménnyel készült webhelyen a cikkek teljesen div alapúak voltak. A címsor-kiíró szerint egy átlagos cikkben a tartalmi címsorok mellett ott volt a lábléc három és az oldalsáv két címsora is, mind h2 szinten, így a lap vázlatában a „Hírlevél" és a „Kövess minket" egyenrangú volt a cikk szakaszaival. Az árösszehasonlító táblázatok képként szerepeltek.

A javítás három lépésben történt. A sablonba bekerült a header, nav, main, article, aside és footer váz. A lábléc és az oldalsáv feliratai címsorból sima, formázott szöveggé váltak. A táblázatokat HTML táblázatként írták újra. A javítás után a címsor-vázlat csak a cikk szakaszait mutatta, és az akadálymentességi audit tájékozódási pontokra vonatkozó hibái eltűntek. A tanulság: a legtöbb hiba három-négy sablonelemből származott, nem a cikkekből.

Ellenőrzőlista

A lapon pontosan egy main elem van.
A navigáció nav elemben, a kiegészítő tartalom aside elemben áll.
Címsor csak tartalmi szakasz címe lehet.
A listák ul vagy ol elemek, a táblázatok table elemek fejlécsorral.
Minden navigáció valódi a elem href attribútummal.
A tartalmi képeknek leíró alt szövege van.
A dátumok time elemben, datetime attribútummal szerepelnek.

Kapcsolódó részletes útmutatók

Meta description: teljes útmutató