2. Szöveges elemek HTML-ben

• 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:

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!