HTML Címsorok (Heading Tags)

A HTML címsorok (H1-H6) logikai hierarchiája és SEO szerepe

Képzelj el egy napilapot vagy egy tankönyvet. Nem csak egyetlen, végtelenül hosszú szövegtömbből áll. Vannak benne főcímek, alcímek és bekezdések, amik segítik az olvasót a tájékozódásban. A weboldalakon pontosan ugyanezt a szerepet töltik be a HTML címsorok.

A 6 szintű címsor rendszer

A HTML nyelv hat különböző szintű címsort biztosít számunkra. Ezeket az angol "Heading" szó kezdőbetűje után <h1>-től <h6>-ig számozzuk.

A legfontosabb, legnagyobb címsor a H1, a legkevésbé fontos, legkisebb pedig a H6. Így néznek ki a kódban:

<h1>Ez az 1. szintű (legfőbb) címsor</h1>
<h2>Ez a 2. szintű címsor (alcím)</h2>
<h3>Ez a 3. szintű címsor (al-alcím)</h3>
<h4>Ez a 4. szintű címsor</h4>
<h5>Ez az 5. szintű címsor</h5>
<h6>Ez a 6. szintű címsor</h6>

Hogyan jelennek meg a böngészőben?

Ha a fenti kódot beírod a weboldalad <body> részébe, azt fogod látni, hogy a böngésző automatikusan különböző méretűre és vastagságúra formázza őket. A <h1> hatalmas és vastag betűkkel jelenik meg, míg a <h6> sokkal kisebb, szinte már a normál szövegnél is apróbb lesz.

Ezen kívül a böngésző automatikusan üres helyet (margót) tesz a címsorok elé és után, hogy jól elkülönüljenek a többi szövegtől.

A leggyakoribb kezdő hiba

Sok kezdő weboldalkészítő elköveti azt a hibát, hogy a címsorokat csak arra használja, hogy nagy és vastag szöveget csináljon. Például, ha egy sima mondatot ki akarnak emelni, beteszik egy <h2> tagbe, csak azért, mert tetszik nekik a mérete.

Ezt soha ne tedd! A HTML címsorok feladata a struktúra megadása, nem a dizájn. Ha egy normál szöveget akarsz naggyá tenni, azt később a CSS (stíluslapok) segítségével fogjuk megoldani.

Hogyan használd őket helyesen? (A Könyv Szabály)

Gondolj a weboldaladra úgy, mint egy könyvre. A címsorokat logikai sorrendben kell használnod:

<h1> - A Könyv Címe: Egy oldalon (általában) csak egyetlen H1-es címsor lehet. Ez mondja meg a látogatónak és a Google-nek, hogy miről szól az egész oldal.
<h2> - A Fejezetek: A fő témát H2-es alcímekkel bontjuk nagyobb részekre.
<h3> - Az Alfejezetek: Ha egy H2-es fejezeten belül további bontásra van szükség, ott használjuk a H3-at.

Soha ne ugorj át szinteket! Ne tegyél be egy <h4>-et közvetlenül egy <h2> alá, mert az összezavarja a dokumentum logikáját.

← Előző lecke Következő lecke: Bekezdések →