# 2. Szöveges elemek HTML-ben

2025. november 13. • 15 perc olvasás • HTML5 alapok

A HTML szöveges elemei az alapjai minden weboldalnak. Ebben a cikkben megismerheted a címsorok hierarchiáját, a bekezdések helyes használatát, a szöveges kiemelések különbségeit, valamint a sortörések és elválasztó vonalak alkalmazását.

#### Érettségi információ

Ez a lecke EMELT SZINTŰ érettségi anyag!

A címek (h1-h6) és bekezdések (p) használata alapvető érettségi követelmény. Ismerned kell a HTML címkék fontosabb jellemzőit.

## Címsorok: <h1>–<h6> EMELT SZINT

A HTML hat szintű címsort biztosít, `<h1>`-től `<h6>`-ig. Ezek hierarchikus struktúrát adnak az oldalnak, és kritikus fontosságúak a SEO és az akadálymentesség szempontjából.

### A címsor hierarchia

HTML - Címsor szintek
`<h1>Fő cím - A legfontosabb</h1> <h2>Második szintű cím</h2> <h3>Harmadik szintű cím</h3> <h4>Negyedik szintű cím</h4> <h5>Ötödik szintű cím</h5> <h6>Hatodik szintű cím - A legkisebb</h6>`

#### Élő példa - Címsorok megjelenítése:

# h1 - Fő cím

## h2 - Második szintű cím

### h3 - Harmadik szintű cím

#### h4 - Negyedik szintű cím

##### h5 - Ötödik szintű cím

###### h6 - Hatodik szintű cím

### Címsorok helyes használata

#### Legjobb gyakorlatok

- Egy h1 oldalanként: Minden oldalon csak egyetlen `<h1>` elem legyen, amely az oldal fő témáját jelöli
- Logikus hierarchia: Ne ugord át a szinteket (h1 után ne h3 következzen közvetlenül)
- Tartalom strukturálás: Használd a címsorokat a tartalom logikus felosztására
- SEO optimalizálás: A címsorokban szerepeljenek kulcsszavak, de természetes módon

#### Gyakori hibák

- ❌ Méret miatt választás: Ne azért használj h5-öt, mert kisebb betűméretet szeretnél - használj CSS-t a formázáshoz
- ❌ Többszörös h1: Régi szabály alapján kerüld, bár a HTML5-ben megengedett (SEO szempontból nem javasolt)
- ❌ Szint ugrás: h2 után ne jöjjön h4, tartsd meg a természetes hierarchiát

### Példa: Jól strukturált tartalom

HTML - Címsor hierarchia példa
`<article> <h1>HTML5 útmutató</h1> <h2>Bevezetés</h2> <p>Az alapok...</p> <h2>Szöveges elemek</h2> <p>A HTML szöveges elemei...</p> <h3>Címsorok</h3> <p>A címsorok használata...</p> <h3>Bekezdések</h3> <p>A bekezdések formázása...</p> <h2>Összefoglalás</h2> <p>Ebben a cikkben...</p> </article>`

## Bekezdések: <p> EMELT SZINT

A `<p>` (paragraph) elem a leggyakrabban használt szöveges elem. Bekezdésekbe szervezi a szöveget, automatikus térközt ad előtte és utána.

HTML - Bekezdések
`<p>Ez az első bekezdés. A bekezdések automatikusan térközt kapnak egymás között, így olvashatóbb a szöveg.</p> <p>Ez a második bekezdés. A HTML figyelmen kívül hagyja a kódban lévő sortöréseket és extra szóközöket.</p> <p>Harmadik bekezdés, több szóköz is egy szóközzé alakul a megjelenítéskor.</p>`

#### Élő példa - Bekezdések:

Ez az első bekezdés. A bekezdések automatikusan térközt kapnak egymás között, így olvashatóbb a szöveg.

Ez a második bekezdés. A HTML figyelmen kívül hagyja a kódban lévő sortöréseket és extra szóközöket.

Harmadik bekezdés, több szóköz is egy szóközzé alakul a megjelenítéskor.

#### Tudnivalók a bekezdésekről

- A böngésző automatikusan eltávolítja a felesleges szóközöket és sortöréseket
- Alapértelmezetten margin (külső térköz) kerül a bekezdés elé és után
- A CSS-sel testre szabható a bekezdés megjelenése (térköz, igazítás, betűméret)
- Rövid szövegekhez is használd, ne csak hosszú tartalmakhoz

## Kiemelések: <strong>, <em>, <b>, <i> EMELT SZINT

A HTML különböző elemeket kínál a szöveg kiemelésére. Fontos megérteni a különbségeket a szemantikus és a vizuális kiemelések között.

### Szemantikus kiemelések: <strong> és <em>

Ezek az elemek jelentéssel bírnak, nem csak vizuális formázást adnak:

#### <strong> - Erős hangsúly

A `<strong>` elem erős fontosságot jelöl. Alapértelmezetten félkövér betűvel jelenik meg.

HTML - Strong elem
`<p>Ez egy <strong>nagyon fontos</strong> információ!</p> <p><strong>Figyelem:</strong> Az alábbi lépések kötelezőek.</p>`

#### <em> - Hangsúlyozott szöveg

Az `<em>` (emphasis) elem hangsúlyt ad a szövegnek. Alapértelmezetten dőlt betűvel jelenik meg.

HTML - Em elem
`<p>Ezt <em>nem</em> szabad elfelejteni.</p> <p>A találkozó <em>holnap délután</em> lesz.</p>`

### Vizuális kiemelések: <b> és <i>

Ezek az elemek csak formázásra szolgálnak, nincs szemantikus jelentésük:

#### <b> - Félkövér szöveg

A `<b>` (bold) elem félkövér betűt ad, de nincs különleges jelentése.

HTML - B elem
`<p>A termék neve: <b>HyperX Cloud II</b></p> <p><b>Következtetés:</b> A teszt sikeresen lezárult.</p>`

#### <i> - Dőlt szöveg

Az `<i>` (italic) elem dőlt betűt ad, de nincs hangsúlyozó jelentése.

HTML - I elem
`<p>Az <i>Avengers: Endgame</i> film címe.</p> <p>Idegen kifejezés: <i>et cetera</i> (stb.)</p>`

### Összehasonlító táblázat

Elem | Megjelenés | Szemantikus? | Használat
--- | --- | --- | ---
`<strong>` | Félkövér | ✅ Igen | Erős fontosság, figyelmeztetés
`<em>` | Dőlt | ✅ Igen | Hangsúly, kiemelés
`<b>` | Félkövér | ❌ Nem | Terméknevek, vizuális kiemelés
`<i>` | Dőlt | ❌ Nem | Filmcímek, idegen szavak

#### Mikor melyiket használd?

- <strong>: Fontos információk, figyelmeztetések, kulcsszavak
- <em>: Hangsúlyos szavak, fontos részletek kiemelése
- <b>: Terméknevek, címek, vizuális elkülönítés jelentés nélkül
- <i>: Filmcímek, könyvcímek, idegen nyelvű kifejezések

#### Élő példa - Kiemelések kombinálva:

Ez egy erősen hangsúlyozott szöveg.

Ez egy hangsúlyozott szöveg.

Ez egy félkövér szöveg.

Ez egy dőlt szöveg.

Figyelem: A határidő 2025. december 31.

## A <span> elem - Inline konténer EMELT SZINT

A `<span>` egy általános inline konténer, amely szövegen belüli részek kiemeléséhez és stílusozásához használatos. Önmagában nem hordoz szemantikus jelentést, csak CSS osztályokkal vagy JavaScript számára szolgál célpontként.

HTML - Span elem alapok
`<!-- Szövegrész kiemelése CSS-sel --> <p>Az ár: <span class="price">249 990 Ft</span></p> <!-- Különböző színű szöveg --> <p>Státusz: <span style="color: green; font-weight: bold;">Készleten</span></p> <!-- Ikon melletti szöveg --> <button> <span class="icon">🛒</span> <span>Kosárba</span> </button> <!-- Nyelvi jelölés --> <p>A <span lang="en">hardware</span> szó angolul vasárut jelent.</p>`

### Span elem jellemzői

Tulajdonság | Érték | Magyarázat
--- | --- | ---
Megjelenítés | `display: inline` | Folyamatos szövegben, nem töri meg a sort
Szemantika | Nincs | Nem hordoz jelentést, csak stílusoz
Tartalmazhat | Inline elemeket | Szöveg, képek, kis inline elemek
Használat | Szöveg stílusozás | Szövegrészek kiemeléséhez, formázásához

#### Mikor használj span elemet?

- ✅ Szövegrész stílusozása: Ár kiemeléséhez, szín változtatáshoz
- ✅ Inline ikonok: Szövegben elhelyezett kis ikonok
- ✅ JavaScript célpont: Szövegrész dinamikus módosításához
- ✅ CSS hook: Amikor nincs megfelelő szemantikus elem
- ❌ NE használd: Ha van rá szemantikus alternatíva (strong, em, mark)

### Gyakorlati példák span használatára

Példa 1 - Ár kiemelése
`<!-- HTML --> <p> Intel Core i9-14900K processzor <span class="eredeti-ar">299 990 Ft</span> <span class="akcios-ar">249 990 Ft</span> </p> <!-- CSS --> <style> .eredeti-ar { text-decoration: line-through; color: #999; } .akcios-ar { color: #e74c3c; font-weight: bold; font-size: 1.2em; } </style>`
Példa 2 - Státusz jelzés színekkel
`<!-- HTML --> <ul> <li>Termék A - <span class="keszleten">Készleten</span></li> <li>Termék B - <span class="hamarosan">Hamarosan</span></li> <li>Termék C - <span class="elfogyott">Elfogyott</span></li> </ul> <!-- CSS --> <style> .keszleten { color: #27ae60; font-weight: bold; } .hamarosan { color: #f39c12; font-weight: bold; } .elfogyott { color: #e74c3c; font-weight: bold; } </style>`
Példa 3 - JavaScript célpont
`<!-- HTML --> <p>Kosárban: <span id="kosar-szam">0</span> termék</p> <button onclick="novelKosar()">Kosárba</button> <!-- JavaScript --> <script> function novelKosar() { const kosarElem = document.getElementById('kosar-szam'); const aktualisSzam = parseInt(kosarElem.textContent); kosarElem.textContent = aktualisSzam + 1; } </script>`

### Span vs szemantikus elemek

Helyzet | ❌ Rossz (span) | ✅ Jó (szemantikus)
--- | --- | ---
Fontos szöveg | `<span class="fontos">` | `<strong>`
Hangsúly | `<span class="hangsuly">` | `<em>`
Kiemelt szöveg | `<span class="kiemelt">` | `<mark>`
Idézet | `<span class="idezet">` | `<q>`
Egyedi stílus (ár) | `<span class="ar">` ✅ | Nincs szemantikus elem

#### Span használati szabályok

- Mindig nézd meg először: Van-e megfelelő szemantikus elem (strong, em, mark, code, etc.)
- Csak akkor használd: Ha nincs szemantikus alternatíva
- Adj osztályt: Használj beszédes class neveket (pl. "ar", "statusz", "highlight")
- Ne túlzásba vidd: Ha túl sok span van, valószínűleg rossz struktúrát választottál

#### Élő példa - Span stílusozással:

Az ár: 249 990 Ft

Státusz: ✓ Készleten

A kiemelt szövegrész.

## Vonalak és sortörések EMELT SZINT

### <hr> - Horizontális elválasztó vonal

A `<hr>` (horizontal rule) elem tematikus szünet vagy tartalmi elválasztást jelöl. Egy horizontális vonalat jelenít meg.

HTML - HR elem
`<h2>Első fejezet</h2> <p>Az első fejezet tartalma...</p> <hr> <h2>Második fejezet</h2> <p>A második fejezet tartalma...</p>`

#### Élő példa - HR elem:

Szöveg az elválasztó előtt.

Szöveg az elválasztó után.

#### HR elem tulajdonságai

- Önzáró tag: Nincs záró elem (`<hr>` vagy `<hr />`)
- Block elem: Saját sorban jelenik meg
- CSS stílusozható: Szín, vastagság, stílus módosítható
- Szemantikus jelentés: Tematikus váltást jelez a keresőmotoroknak

### <br> - Sortörés

A `<br>` (break) elem sortörést hoz létre a szövegen belül, anélkül hogy új bekezdést kezdene.

HTML - BR elem
`<p> Elit Hardver Kft.<br> 1234 Budapest<br> Fő utca 10.<br> Magyarország </p> <p> Ez egy bekezdés<br> két sorban. </p>`

#### Élő példa - BR elem:

Elit Hardver Kft.
1234 Budapest
Fő utca 10.
Magyarország

#### BR elem használata

- ✅ Használd: Címeknél, verseknél, postaszeretnél (ahol fontos a sorok pontos törése)
- ❌ Ne használd: Bekezdések közötti térköz növelésére - erre a CSS-t használd!
- ❌ Ne használd: Layout formázásra - erre Flexbox vagy Grid alkalmas

### BR vs P - Mikor melyiket?

HTML - BR vs P összehasonlítás
`<!-- ❌ ROSSZ: BR használata bekezdések helyett --> Ez az első bekezdés.<br><br> Ez a második bekezdés.<br><br> Ez a harmadik bekezdés. <!-- ✅ JÓ: P használata bekezdésekhez --> <p>Ez az első bekezdés.</p> <p>Ez a második bekezdés.</p> <p>Ez a harmadik bekezdés.</p> <!-- ✅ JÓ: BR használata címeknél --> <p> John Smith<br> Webfejlesztő<br> john@example.com </p>`

## Összetett példa: Minden elem kombinálva EMELT SZINT

Íme egy valós példa, amely minden eddig tanult szöveges elemet használ:

HTML - Teljes szöveges példa
`<article> <h1>HTML5 Szöveges Elemek Útmutatója</h1> <p>A <strong>HTML5</strong> gazdag eszköztárat kínál a szöveg formázásához és strukturálásához. Ebben a cikkben megismerkedhetsz a <em>legfontosabb</em> szöveges elemekkel.</p> <hr> <h2>1. Bevezetés</h2> <p>A weboldal tartalma elsősorban szövegből áll. A <b>HTML</b> különböző elemeket biztosít a szöveg szemantikus jelöléséhez.</p> <h3>Miért fontos a szemantika?</h3> <p><strong>Fontos:</strong> A szemantikus HTML segíti a keresőmotorokat és a képernyőolvasókat.</p> <hr> <h2>2. Elérhetőség</h2> <p> <b>Elit Hardver Kft.</b><br> 1234 Budapest<br> Fő utca 10.<br> Email: <i>info@elithardver.hu</i> </p> <p><em>Köszönjük, hogy meglátogattál!</em></p> </article>`

## Összefoglalás

Ebben a cikkben megismerkedtél a HTML legfontosabb szöveges elemeivel:

- Címsorok (h1-h6): Hierarchikus struktúra, SEO és akadálymentesség
- Bekezdések (p): Szöveg bekezdésekbe szervezése
- Szemantikus kiemelések (strong, em): Jelentéssel bíró hangsúlyozás
- Vizuális kiemelések (b, i): Formázás szemantika nélkül
- Span elem: Inline konténer szövegrészek stílusozásához és JavaScript célpontként
- Elválasztó vonal (hr): Tematikus szünet jelölése
- Sortörés (br): Sor törése bekezdésen belül

#### Példák a weboldalunkon

Nézd meg, hogyan használjuk a szöveges elemeket a gyakorlatban:

- Processzor oldal - Címsorok hierarchia (h1-h3), bekezdések és kiemelések
- Videokártya oldal - Strong és em elemek a fontos információknál
- Blog cikkek - Strukturált szöveges tartalom span elemekkel

#### Következő lépések

Gyakorold az itt tanultakat: hozz létre egy blog bejegyzést, amely minden szöveges elemet használ. Figyelj a helyes szemantikára és a hierarchikus struktúrára!

Következő cikk: Listák HTML-ben - Ismerd meg a rendezett (ol) és rendezetlen (ul) listákat, tanuld meg a lista attribútumokat és a beágyazott listák használatát. Készíts professzionális navigációs menüket!