HTML alapok › 2. modul: Szöveg › 2.1 lecke
HTML alapok · 2.1 lecke
Címsorok: a weboldal tartalomjegyzéke
A címsorok nemcsak nagybetűs feliratok: ők adják az oldal vázát, mint egy könyv fejezetei. A keresők és a vak felhasználók felolvasóprogramjai is ezek alapján tájékozódnak. Ebben a leckében megtanulod, hogyan építs helyes címsor-hierarchiát.
A lecke végére
- a h1–h6 címsorokkal tagolod az oldalt;
- helyes hierarchiát építesz: egy h1, és nem ugrasz szintet;
- tudod, hogy a címsor jelentést hordoz, a méretét pedig a CSS adja;
- megérted, hogyan használják a címsorokat a felolvasóprogramok és a keresők.
Mielőtt elkezded
Szükséged lesz egy szabályos HTML-vázra.
Hat szint, mint egy tartalomjegyzékben
<h1>A Naprendszer</h1> <h2>A belső bolygók</h2> <h3>Merkúr</h3> <h3>Vénusz</h3> <h2>A külső bolygók</h2> <h3>Jupiter</h3>
A h1 a legfontosabb, az oldal főcíme, a h6 a legkisebb alcím. A fenti kódban a behúzás csak az átláthatóságot segíti: a szinteket a címke száma adja. Ha kiírod a címsorokat, egy tartalomjegyzéket kapsz:
A helyes hierarchia két szabálya
Jósold meg!
Egy cikk szerkezete: főcím, két fejezet, az első fejezetben két alfejezet. Hány h1, h2 és h3 kell?
Megoldás
Egy h1 (főcím), két h2 (fejezetek) és két h3 (az első fejezet alfejezetei).
Kinek fontosak a címsorok?
Méret kontra jelentés
A böngésző alapból nagyobb betűvel írja a h1-et, mint a h2-t, de a címsort nem a mérete miatt választjuk, hanem a jelentése miatt. Ha csak nagyobb betű kell, azt a CSS-sel állítjuk be (erről a CSS-tanfolyamon tanulsz).
Így ne!
Ha egy szöveg csak azért lesz h4, mert „olyan szép kicsi”, vagy h1, mert „feltűnő legyen”, akkor összezavarod a tartalomjegyzéket, és a felolvasót használók eltévednek az oldalon.
Próbáld ki!
Nézd meg egy weboldal címsorait a fejlesztői eszközökben (F12, Elements), vagy telepítsd a böngésződbe a HeadingsMap bővítményt, ami kirajzolja a címsorok térképét. Helyes a hierarchia?
Hibavadászat
1. Szintugrás
<h1>Receptjeim</h1> <h4>Palacsinta</h4>
Mi a baj?
A h1 után h4 jön, két szintet ugrik. Helyesen: h2.
2. Címsor csak a méret miatt
<h1>AKCIÓ!</h1> <h1>Anna receptjei</h1>
Mi a baj?
Az „AKCIÓ!” nem az oldal főcíme, csak feltűnő szöveg. Az oldalnak egy h1-e legyen (Anna receptjei), a kiemelést pedig a CSS adja.
3. Üres címsor
<h2></h2>Mi a baj?
Az üres címsor térköznek tűnik, de a felolvasó bemondja, hogy „2. szintű címsor”, és utána nincs semmi. Térközt a CSS-sel adunk.
Projekt: címsorok a saját oldaladon
Folytasd a saját oldalad projektet!
- Az index.html legyen egy h1 (a neved vagy az oldalad címe) és legalább két h2 szakasz (például „Rólam”, „Kedvenceim”).
- Az egyik h2 alá tegyél két h3-at (például „Kedvenc könyvem”, „Kedvenc zeném”).
- Ellenőrizd a hierarchiát: egy h1, nincs szintugrás.
Kész vagy, ha…
…a címsoraidat kiírva értelmes tartalomjegyzéket kapsz, és nincs szintugrás.
Ellenőrizd magad!
Hány h1 legyen egy oldalon?
Általában egy, az oldal fő témája.
Mi jöhet egy h2 után?
Egy h3 (egy szinttel lejjebb), vagy újabb h2. h4 nem, mert az szintugrás.
Miért ne válassz címsort a mérete miatt?
Mert a címsor jelentést hordoz (a tartalom szerkezetét), a méretet a CSS adja.
Hogyan használják a címsorokat a felolvasóprogramok?
Egy billentyűvel címsorról címsorra ugranak, így átfutják az oldalt.
Tanároknak
Kerettantervi kapcsolódás
NAT 2020, Digitális kultúra, 9. évfolyam, Publikálás a világhálón: a weblap szerkezeti elemei, címsorok. Kapcsolódik a szövegszerkesztés stílusaihoz (címsorstílusok, automatikus tartalomjegyzék), ami erős transzfert ad.
Módszertan
A tartalomjegyzék-analógia és a fa rajz vizuális támaszt ad. A felolvasós szempont (WebAIM, W3C WAI) az akadálymentességet nem külön témaként, hanem a jó kódolás természetes részeként mutatja be. Érdemes egy képernyőolvasóval (például Windows Narrátor, H billentyű) bemutatni a címsor-navigációt.
Időterv
Hat szint: 8 perc. Hierarchia: 10 perc. Kinek fontos? (bemutatóval): 10 perc. Méret kontra jelentés: 6 perc. Hibavadászat és projekt: 11 perc.