Ismerd meg Larát — a mesterséges intelligencia asszisztensedet mindenhez. 💬 Próbáld ki most.

HTML címsor elemek

A HTML címsorok (<h1> - <h6>) a dokumentum tartalmának strukturálására szolgálnak. Ezek segítenek logikusan tagolni a szöveget és kiemelni a fontos részeket, például főcímeket, alcímeket és szakaszcímeket.

Címsorok vizuális megjelenítése

Az alábbi példában láthatod, hogy a HTML címsor elemek hogyan jelennek meg különböző méretben és stílusban. A <h1> a legnagyobb, a <h6> a legkisebb.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Hierarchia és szerkezet

A címsorokat hierarchikusan kell használni. A <h1> jelzi az oldal legfőbb témáját, míg az <h2>-<h6> a különböző alfejezeteket és alpontokat képviselik. Ne ugorj át szinteket (például <h1> után <h4>), mert az megtöri a logikai szerkezetet.

Szemantikus jelentőség

A címsorok nem csak formázási célokat szolgálnak – a keresőmotorok, képernyőolvasók és más automatizált rendszerek is ezeket használják a tartalom értelmezéséhez. Egy jól szerkesztett címsorstruktúra növeli az oldal SEO értékét.

Felépítés egy gyakorlati példán keresztül

Az alábbi példa egy egyszerű weboldal tartalmi szerkezetét mutatja be különböző címsorszintek alkalmazásával.

Tippek címsor használathoz

Használj csak egyetlen <h1> elemet egy oldalon.
Tartsd be a logikus hierarchiát: ne ugorj át szinteket.
Ne használd címsorokat kizárólag stílus miatt – ha valami nem címsor, ne használd annak.
Törekedj arra, hogy minden <h2> alatt legalább egy további cím vagy tartalom legyen.

Feladat: Hozz létre egy <h1> címsort a 'Main Title' szöveggel!

<!DOCTYPE html>
<html>
  <head>
    <title>Headings</title>
  </head>
  <body>

  </body>
</html>

Előnézet

Hozzáférhetőség és keresőoptimalizálás

A jól strukturált címsorhasználat nem csak az olvasóknak segít, hanem a technológiáknak is. A képernyőolvasók például ezek alapján hoznak létre navigációs listákat, a keresőmotorok pedig előnyben részesítik a logikusan felépített tartalmat.

✨ Kérdezd Larát — a tanulási partnered

Fedezd fel a személyre szabott tanulási támogatást. Lara elmagyarázza az anyagot, összefoglalja a témákat és megválaszolja a kérdéseidet — az Go csomagtól elérhető.

Lara segít gyorsabban tanulni — kizárólag a ReadyTools Go, Plus és Max tagoknak.

HTML Attribútumok HTML Bekezdések