# 9. Szemantikus HTML

2025. november 14. • 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 - Lábléc BÓNUSZ

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!