9. Szemantikus HTML

• 20 perc olvasás • HTML5 alapok

A szemantikus HTML olyan elemek használatát jelenti, amelyek nemcsak megjelenítik a tartalmat, hanem jelentést is hordoznak. Ebben a cikkben megismered a legfontosabb szemantikus elemeket, és megtudod, miért kulcsfontosságúak a modern webfejlesztésben a keresőoptimalizálás (SEO) és az akadálymentesség szempontjából.

Érettségi információ

Ez a lecke BÓNUSZ anyag!

A szemantikus HTML elemek (header, nav, section, article, aside, footer) NEM szerepelnek az érettségi követelményekben. A követelmények csak a hagyományos elemeket említik (címek, bekezdések, listák, táblázatok, hivatkozások). Ez hasznos tudás a modern webfejlesztéshez, de nem kötelező az érettségire.

Mi az a szemantikus HTML? BÓNUSZ

A szemantikus HTML olyan HTML elemeket használ, amelyek kifejezik a tartalom jelentését és szerepét, nem csak a megjelenését. Míg a <div> és <span> elemek semmilyen információt nem hordoznak a tartalmukról, addig a szemantikus elemek egyértelműen jelzik, hogy mi a funkciójuk.

HTML - Nem szemantikus vs Szemantikus
<!-- ❌ Nem szemantikus megközelítés --> <div class="header"> <div class="logo">Weboldal címe</div> <div class="menu"> <a href="#">Főoldal</a> <a href="#">Rólunk</a> </div> </div> <div class="content"> <div class="post"> <h2>Cikk címe</h2> <p>Tartalom...</p> </div> </div> <div class="footer"> <p>© 2025 Weboldal</p> </div> <!-- ✅ Szemantikus megközelítés --> <header> <h1>Weboldal címe</h1> <nav> <a href="#">Főoldal</a> <a href="#">Rólunk</a> </nav> </header> <main> <article> <h2>Cikk címe</h2> <p>Tartalom...</p> </article> </main> <footer> <p>© 2025 Weboldal</p> </footer>

Szemantikus elemek előnyei

  • Jobb SEO: Keresőmotorok könnyebben értelmezik az oldal struktúráját
  • Akadálymentesség: Képernyőolvasók pontosabban navigálnak az oldalon
  • Karbantarthatóság: A kód könnyebben olvasható és érthető
  • Jövőbiztos: Böngészők és eszközök könnyebben feldolgozzák

A <header> elem - Fejléc BÓNUSZ

A <header> elem egy dokumentum vagy szekció bevezető tartalmát képviseli. Általában tartalmaz címeket, logót, navigációt vagy keresőmezőt.

HTML - Header elem
<!-- Oldal főfejléce --> <header class="site-header"> <img src="logo.png" alt="Cég logó"> <h1>Elit Hardver</h1> <p>Számítógép alkatrészek szakértője</p> <nav> <a href="index.html">Főoldal</a> <a href="termekek.html">Termékek</a> <a href="kapcsolat.html">Kapcsolat</a> </nav> </header> <!-- Cikk fejléce --> <article> <header> <h2>Új CPU generáció bejelentve</h2> <p>Szerző: Kiss János • <time datetime="2025-11-14">2025. nov. 14.</time></p> <img src="cpu-hero.jpg" alt="Új processzor"> </header> <p>A cikk tartalma...</p> </article>
Jellemző Leírás
Használat Oldal vagy szekció elején bevezető tartalom
Tartalom Címek, logó, navigáció, keresőmező, szerző, dátum
Mennyiség Oldalanként több is lehet (pl. article-ekben)
Nem tartalmazhat <header> vagy <footer> elemet

A <nav> elem - Navigáció BÓNUSZ

A <nav> elem navigációs linkek gyűjteményét tartalmazza. Csak a fő navigációs blokkokhoz használd, nem minden egyes linkhez.

HTML - Nav elem
<!-- Fő navigáció --> <nav aria-label="Fő navigáció"> <ul> <li><a href="index.html">Főoldal</a></li> <li><a href="termekek.html">Termékek</a></li> <li><a href="rolunk.html">Rólunk</a></li> <li><a href="kapcsolat.html">Kapcsolat</a></li> </ul> </nav> <!-- Breadcrumb navigáció --> <nav aria-label="Breadcrumb"> <a href="index.html">Főoldal</a> › <a href="termekek.html">Termékek</a> › <span>CPU</span> </nav> <!-- Tartalomjegyzék --> <nav aria-label="Tartalomjegyzék"> <h2>Tartalomjegyzék</h2> <ol> <li><a href="#bevezetes">Bevezetés</a></li> <li><a href="#specifikaciok">Specifikációk</a></li> <li><a href="#osszegzes">Összegzés</a></li> </ol> </nav>

Nav elem használati szabályok

  • Csak fő navigációhoz: Menüsáv, breadcrumb, tartalomjegyzék
  • NE használd: Láblécben lévő közösségi média linkekhez
  • Aria-label: Több nav esetén add meg a szerepüket
  • Lista ajánlott: A linkeket ul vagy ol elemben rendezd

A <section> elem - Tematikus szekció BÓNUSZ

A <section> elem tematikusan összetartozó tartalmat csoportosít. Általában tartalmaz egy címet (heading).

HTML - Section elem
<main> <!-- Bevezető szekció --> <section> <h2>Üdvözöljük az Elit Hardver weboldalán</h2> <p>Magyarország legnagyobb számítógép alkatrész kínálata.</p> </section> <!-- Termékek szekció --> <section> <h2>Kiemelt termékeink</h2> <article> <h3>Intel Core i9-14900K</h3> <p>Csúcsteljesítményű processzor gaming és munkához.</p> </article> <article> <h3>RTX 4090</h3> <p>A legújabb generációs videokártya.</p> </article> </section> <!-- Kapcsolat szekció --> <section> <h2>Lépj kapcsolatba velünk</h2> <p>Email: info@elithardver.hu</p> <p>Telefon: +36 1 234 5678</p> </section> </main>

Section vs Div - Mikor melyiket használd?

  • ✅ Section: Ha a tartalom tematikusan összetartozik és van címe
  • ✅ Div: Ha csak stílusozáshoz vagy JavaScript-hez kell konténer
  • Szabály: Ha nem tudsz neki címet adni, valószínűleg div kell
  • Példa section: "Termékeink", "Rólunk", "Kapcsolat"

A <article> elem - Önálló tartalom BÓNUSZ

Az <article> elem önálló, független, újrafelhasználható tartalmat jelöl. A tartalomnak önmagában is értelmezhető kell lennie.

HTML - Article elem
<!-- Blog cikk --> <article> <header> <h2>Az új RTX 5000 sorozat bejelentve</h2> <p>Szerző: Nagy Péter • <time datetime="2025-11-14">2025. nov. 14.</time></p> </header> <p>Az NVIDIA bejelentette legújabb videokártya generációját...</p> <section> <h3>Specifikációk</h3> <ul> <li>CUDA magok: 16384</li> <li>VRAM: 24 GB GDDR7</li> </ul> </section> <footer> <p>Kategória: Videokártyák | Címkék: NVIDIA, RTX, Gaming</p> </footer> </article> <!-- Termék kártya --> <article> <h3>AMD Ryzen 9 7950X</h3> <img src="ryzen9.jpg" alt="AMD Ryzen 9 7950X"> <p>16 magos, 32 szálú prémium processzor.</p> <p>Ár: 249 990 Ft</p> <button>Kosárba</button> </article> <!-- Hozzászólás --> <article> <h4>Kovács János</h4> <time datetime="2025-11-14T14:30">2025. nov. 14. 14:30</time> <p>Nagyon hasznos cikk, köszönöm!</p> </article>
Használati eset Példa
Blog cikk Hír, útmutató, bejegyzés
Fórum hozzászólás Komment, válasz
Termék kártya E-commerce termék
Hírfolyam elem Közösségi média poszt
Widget Időjárás widget, részvény ticker

Article teszt - "Újrahasznosíthatóság"

Kérdezd meg magadtól: "Ez a tartalom értelmes lenne-e RSS feedben, vagy más weboldalon újrafelhasználva?"

Ha igen → <article>
Ha nem → <section> vagy <div>

A <aside> elem - Kiegészítő tartalom BÓNUSZ

Az <aside> elem a fő tartalomhoz kapcsolódó, de azzól elkülöníthető kiegészítő információt tartalmaz.

HTML - Aside elem
<!-- Oldalsáv --> <aside class="sidebar"> <section> <h3>Népszerű cikkek</h3> <ul> <li><a href="#">10 tipp GPU vásárláshoz</a></li> <li><a href="#">SSD vs HDD 2025-ben</a></li> </ul> </section> <section> <h3>Kategóriák</h3> <ul> <li><a href="#">Processzorok</a></li> <li><a href="#">Videokártyák</a></li> </ul> </section> </aside> <!-- Cikken belüli kiegészítés --> <article> <h2>Processzor vásárlási útmutató</h2> <p>A processzor a számítógép agya...</p> <aside> <h3>Tudtad?</h3> <p>Az első mikroprocesszor, az Intel 4004, 1971-ben jelent meg mindössze 2300 tranzisztorral.</p> </aside> <p>A cikk folytatódik...</p> </article> <!-- Kapcsolódó hivatkozások --> <aside> <h3>További olvasnivalók</h3> <ul> <li><a href="#">CPU benchmark eredmények</a></li> <li><a href="#">Hűtési megoldások</a></li> </ul> </aside>
Típus Példa használat
Oldalsáv (sidebar) Népszerű cikkek, kategóriák, reklámok
Kiegészítő információ "Tudtad?", pull quote, szójegyzék
Kapcsolódó tartalom "Kapcsolódó cikkek", "Ezt is érdemes elolvasni"
Hirdetés Banner hirdetések, szponzorált tartalom

A <footer> elem egy dokumentum vagy szekció záró részét tartalmazza. Általában metainformációkat, szerző adatokat, kapcsolatokat vagy jogi információkat tartalmaz.

HTML - Footer elem
<!-- Oldal lábléceje --> <footer class="site-footer"> <section> <h3>Rólunk</h3> <p>Az Elit Hardver 2005 óta szolgálja ki ügyfeleit minőségi alkatrészekkel.</p> </section> <section> <h3>Kapcsolat</h3> <p>Email: info@elithardver.hu</p> <p>Telefon: +36 1 234 5678</p> </section> <section> <h3>Kövess minket</h3> <a href="#">Facebook</a> <a href="#">Twitter</a> <a href="#">Instagram</a> </section> <p>© 2025 Elit Hardver. Minden jog fenntartva.</p> <p><a href="aszf.html">ÁSZF</a> | <a href="adatvedelem.html">Adatvédelem</a></p> </footer> <!-- Cikk lábléceje --> <article> <h2>CPU vásárlási útmutató</h2> <p>A processzor kiválasztása...</p> <footer> <p>Szerző: <a href="mailto:peter@elithardver.hu">Nagy Péter</a></p> <p>Utolsó frissítés: <time datetime="2025-11-14">2025. november 14.</time></p> <p>Kategória: Hardver | Címkék: CPU, Vásárlás, Útmutató</p> </footer> </article>

Teljes példa: Szemantikus oldal struktúra BÓNUSZ

HTML - Komplett szemantikus struktúra
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <title>Blog - Elit Hardver</title> </head> <body> <!-- Oldal fejléce --> <header> <h1>Elit Hardver Blog</h1> <nav aria-label="Fő navigáció"> <ul> <li><a href="index.html">Főoldal</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="termekek.html">Termékek</a></li> <li><a href="kapcsolat.html">Kapcsolat</a></li> </ul> </nav> </header> <!-- Fő tartalom --> <main> <!-- Blog cikk --> <article> <header> <h2>Hogyan válasszunk processzorat 2025-ben?</h2> <p>Szerző: Nagy Péter • <time datetime="2025-11-14">2025. nov. 14.</time></p> </header> <section> <h3>Bevezetés</h3> <p>A processzor választás kulcsfontosságú...</p> <aside> <h4>Tipp</h4> <p>Gaming célokra az egyszálú teljesítmény a legfontosabb.</p> </aside> </section> <section> <h3>Intel vs AMD</h3> <p>Mindkét gyártó kiváló termékeket kínál...</p> </section> <footer> <p>Kategória: Hardver | Címkék: CPU, Intel, AMD</p> </footer> </article> <!-- Hozzászólások szekció --> <section> <h3>Hozzászólások (2)</h3> <article> <h4>Kovács János</h4> <time datetime="2025-11-14T15:30">2025. nov. 14. 15:30</time> <p>Nagyon hasznos cikk!</p> </article> <article> <h4>Szabó Anna</h4> <time datetime="2025-11-14T16:00">2025. nov. 14. 16:00</time> <p>Köszönöm az összehasonlítást!</p> </article> </section> </main> <!-- Oldalsáv --> <aside> <section> <h3>Népszerű cikkek</h3> <ul> <li><a href="#">GPU vásárlási útmutató</a></li> <li><a href="#">SSD vagy HDD?</a></li> </ul> </section> </aside> <!-- Oldal lábléceje --> <footer> <section> <h3>Rólunk</h3> <p>Az Elit Hardver 2005 óta...</p> </section> <p>© 2025 Elit Hardver. Minden jog fenntartva.</p> </footer> </body> </html>

SEO előnyök - Keresőoptimalizálás BÓNUSZ

A szemantikus HTML használata jelentősen javítja az oldal keresőmotorokban való helyezését.

Hogyan értelmezik a keresőmotorok?

A Google és más keresőmotorok robotjai (crawlerek) végigpásztázzák a weboldalakat. A szemantikus elemek segítenek megérteni az oldal struktúráját és fontossági hierarchiáját.

Szemléltetés - Hogyan "látja" a Google
<!-- ❌ Google nehezen érti --> <div class="header"> <div class="title">Fontos cikk címe</div> </div> <div class="content">Tartalom...</div> <!-- ✅ Google pontosan érti --> <header> <h1>Fontos cikk címe</h1> <!-- Google: "Ez a FŐSÍM!" --> </header> <main> <article> <!-- Google: "Ez egy önálló cikk" --> <p>Tartalom...</p> </article> </main>
SEO előny Magyarázat Hatás
Tartalmi hierarchia Google érti, mi a fősím, alcím, tartalom Jobb rangsorolás
Tartalom típus <article> = cikk, <nav> = navigáció Rich snippets lehetősége
Releváns tartalom <main> jelzi a fő tartalmat Gyorsabb indexelés
Struktúrált adat Könnyebb structured data hozzáadása Featured snippets
Mobilbarát Tiszta struktúra = jobb mobil élmény Mobile-first indexelés előnye

SEO tippek szemantikus HTML-hez

  • Egy <h1> oldalanként: A fősím legyen az <header>-ben vagy <main>-ben
  • <main> egy darab: Jelöld meg egyértelműen a fő tartalmat
  • <article> egyedi tartalom: Blog posztok, termékek indexelhetők külön
  • Structured data: Szemantikus alapon könnyebb Schema.org használata
  • Breadcrumb a <nav>-ban: Segíti a Google-t az oldal hierarchia megértésében

Rich Snippets és Featured Snippets

A jól strukturált szemantikus HTML lehetővé teszi, hogy az oldal kiemelt formában jelenjen meg a keresési találatokban.

Példák Rich Snippets-re

  • Cikk: Megjelenhet szerző, dátum, értékelés
  • Recept: Főzési idő, kalória, értékelés csillagokkal
  • Termék: Ár, elérhetőség, vélemények
  • FAQ: Kérdés-válasz közvetlenül a találati listában

Akadálymentesség - Accessibility (a11y) BÓNUSZ

A szemantikus HTML elengedhetetlen a fogyatékkal élők számára is elérhető web létrehozásához.

Képernyőolvasók és segédtechnológiák

A képernyőolvasók (screen readers) olyan szoftverek, amelyek felolvassák a weboldal tartalmát látássérült felhasználók számára. A szemantikus elemek segítik őket a navigációban.

Szemantikus elem Amit a képernyőolvasó mond Előny
<nav> "Navigáció, 5 elem" Gyors ugrás a menühöz
<main> "Fő tartalom kezdete" Egyből a tartalomhoz ugrik
<article> "Cikk kezdete" Elkülöníti a cikket
<aside> "Kiegészítő információ" Ki lehet hagyni, ha nem érdekes
<header> "Banner" vagy "Fejléc" Azonosítja az oldal tetejét
<footer> "Tartalom info" vagy "Lábléc" Jogi infók gyors elérése

Landmark navigáció

A képernyőolvasók "landmark" módban tudnak navigálni, amely lehetővé teszi a gyors ugrást az oldal különböző részei között.

Landmark szerepek automatikusan
<!-- Szemantikus elem → ARIA landmark szerepek --> <header> <!-- role="banner" (ha oldal szinten) --> <nav> <!-- role="navigation" --> <main> <!-- role="main" --> <aside> <!-- role="complementary" --> <footer> <!-- role="contentinfo" (ha oldal szinten) --> <section> <!-- role="region" (ha van aria-label) --> <article> <!-- role="article" --> <!-- Képernyőolvasó gyorsbillentyűk (NVDA, JAWS): --> <!-- H = ugrás következő heading-re --> <!-- D = ugrás következő landmark-ra --> <!-- R = ugrás következő region-ra -->

Akadálymentességi előnyök összefoglalva

  • Gyors navigáció: Ugrás a fő tartalomra, menüre, láblécre egyetlen billentyűvel
  • Kontextus: Felhasználó tudja, hol van az oldalon (menü, fő tartalom, oldalsáv)
  • Kihagyható elemek: Ismétlődő navigáció, hirdetések kihagyása
  • Struktúra áttekintés: Képernyőolvasó felsorolja az oldal fő részeit
  • Jobb UX: Gyorsabb, hatékonyabb böngészés

Összehasonlítás: Div vs Szemantikus elemek akadálymentességben

Akadálymentesség - Div vs Szemantikus
<!-- ❌ Div-ekkel - képernyőolvasó nem érti --> <div class="header"> <div class="nav"> <a href="#">Főoldal</a> <a href="#">Blog</a> </div> </div> <div class="main"> <div class="article">Tartalom...</div> </div> <!-- Képernyőolvasó mondja: "Régió... Régió... Link... Link... Régió..." --> <!-- ❓ Felhasználó: "Hol van a fő tartalom? Hol a menü?" --> <!-- ✅ Szemantikus elemekkel --> <header> <nav aria-label="Fő navigáció"> <a href="#">Főoldal</a> <a href="#">Blog</a> </nav> </header> <main> <article>Tartalom...</article> </main> <!-- Képernyőolvasó mondja: "Banner... Fő navigáció, 2 elem... Fő tartalom... Cikk..." --> <!-- ✅ Felhasználó: "Világos! Gyorsan a fő tartalomhoz ugrók!" -->

WCAG és jogi kötelezettség

Sok országban jogi kötelezettség az akadálymentes weboldal készítése, különösen közintézmények és nagy cégek számára.

WCAG 2.1 útmutató

  • Perceivable (Észlelhető): Információ minden felhasználó számára elérhető
  • Operable (Működtethető): UI komponensek használhatók mindenki számára
  • Understandable (Érthető): Információ és kezelés egyértelmű
  • Robust (Robosztus): Kompatibilis különböző technológiákkal

Szemantikus HTML = WCAG megfelelés alapja!

Szemantikus elemek hierarchiája BÓNUSZ

Beágyazási szabályok
<!-- ✅ HELYES beágyazások --> <article> <header>...</header> <section>...</section> <footer>...</footer> </article> <section> <article>...</article> <article>...</article> </section> <main> <article> <aside>...</aside> </article> </main> <!-- ❌ HIBÁS beágyazások --> <header> <header>...</header> <!-- Header-ben nem lehet header --> </header> <footer> <footer>...</footer> <!-- Footer-ben nem lehet footer --> </footer> <main> <main>...</main> <!-- Csak 1 main lehet az oldalon --> </main>
Szabály Magyarázat
Egy <main> oldalanként Csak egy fő tartalom lehet
<header> nem tartalmazhat <header>-t Fejlécben nincs újabb fejléc
<footer> nem tartalmazhat <footer>-t Láblécben nincs újabb lábléc
<article> önálló tartalom Saját header, footer, section-t tartalmazhat
<section> vs <div> Section-nek legyen címe (heading)

Összefoglalás

Ebben a cikkben megismerkedtél a szemantikus HTML elemeivel és azok jelentőségével:

  • <header>: Oldal vagy szekció fejléce (logó, cím, navigáció)
  • <nav>: Fő navigációs blokkok (menü, breadcrumb, tartalomjegyzék)
  • <section>: Tematikusan összetartozó tartalom csoportosítása
  • <article>: Önálló, újrafelhasználható tartalom (blog poszt, termék, komment)
  • <aside>: Kiegészítő tartalom (oldalsáv, "tudtad?", kapcsolódó linkek)
  • <footer>: Lábléc metainformációkkal (szerző, dátum, kapcsolat, jogi infók)

Miért használj szemantikus HTML-t?

  • SEO: Google jobban érti az oldal struktúráját → jobb rangsorolás, rich snippets
  • Akadálymentesség: Képernyőolvasók gyorsabb navigáció landmark-okkal
  • Karbantarthatóság: Kód könnyebben olvasható, érthető
  • Jövőbiztos: Új böngészők és eszközök könnyebben feldolgozzák
  • Professzionális: Modern webfejlesztés alapkövetelménye

Legjobb gyakorlatok

  • ✅ Mindig használj szemantikus elemet, ha van rá megfelelő (ne mindig div-et!)
  • ✅ Egy <main> oldalanként, benne a fő tartalom
  • ✅ <nav>-hoz adj aria-label-t, ha több navigáció van
  • ✅ <article> legyen újrafelhasználható, tesztelje az "RSS feed" kérdéssel
  • ✅ Validáld az oldalt (validator.w3.org) a hibák elkerülésére

Példák a weboldalunkon

Nézd meg, hogyan használjuk a szemantikus HTML-t a gyakorlatban:

  • Főoldal - <header> a fejlécben, <nav> a navigációhoz, <footer> a láblécben
  • Blog főoldal - <article> elemek a blog bejegyzésekhez, <aside> az oldalsávhoz
  • Blog cikkek - <main> elem a fő tartalomhoz, <section> szakaszokhoz

Következő lépések

Gyakorold az itt tanultakat: alakítsd át egy meglévő div-es oldaladat szemantikus HTML-re. Teszteld képernyőolvasóval (pl. NVDA, JAWS), és ellenőrizd a Google Search Console-ban az indexelést. Figyeld meg, hogyan javul a SEO és akadálymentesség!

Következő cikk: CSS alapok és szelektorok - Ismerd meg a CSS alapjait: beágyazási módok, szelektorok típusai, pszeudo-osztályok és a kaszkád működése!