Kaip HTML5 įsisenėjusį skaudulį nuėmė
Jau kokius du su puse metų vis ruošiausi parašyti įrašą apie h1
-h6
žymų naudojimą ir jų nepakankamumą. Gerai, kad tingėjau – dabar nebereikia net sukti dėl to galvos.
Antraščių problema HTML 4.01
HTML4 specifikacija apie h?
antraštes kalba gana abstrakčiai. Jų esmė – pristatyti toliau einačios dokumento dalies turinį. Paminėta, kad h1
yra svarbiau negu h6
, taipogi, kad iš to galima sukurti dokumento “apžvalgą” ar “turinio rodyklę”. Dar rašoma, kad “kai kurie žmonės” laiko, kad “peršokti” lygius (t.y. h1 h3 h5
) yra neteisinga, tačiau neteikia jokių rekomendacijų šiuo klausimu.
Be jau paminėto komentaro pačioje specifikacijoje, toks aprašymas palieka begalybę kitų klausimų, kad ir pvz. kiek puslapyje gali būti h1
žymų? Kaip atskirti skirtingą jų kontekstą? Viena iš SEO strategijų (kol robotai nebuvo to išmokę pažinti), buvo sukišti vos ne visą puslapio turinį į h1
, taip raktažodžiams suteikiant papildomą vertę. Kita problema buvo, kad ir tai, kad pvz. dokumento skiltis skirta navigacijai (blog’o sidebar) taipogi buvo suskirstyta į dalis – tokiu atveju norėtųsi atskirti, kad sidebar poskyriai (pažymėti h3
) nėra vienos iš įrašo pastraipų (pažymėtų h2
) dalis.
Interpretacija: h1
yra svarbiausias ir vienintelis
Negana to, mano asmeniniu požiūriu, puslapyje derėtų derėjo naudoti tik vieną h1
tipo elementą (WCAG rekomendacija) – tą, kuris daugiau mažiau sutaptų su puslapio pavadinimu, nurodytu title
. Taigi titulinis eilinio blog’o puslapis atrodytų maždaug taip:
h1
: blog’o pavadinimash2
: navigacijah3
: sidebar skiltish3
: sidebar skiltis
h2
: įrašash3
: įrašo pastraipah3
: įrašo pastraipa
h2
: įrašash3
: įrašo pastraipah3
: įrašo pastraipa
Ką daryti kai antraštės “šokinėja”?
Aukštesnis suskirstymas tinka tik pirmąjam puslapiui. Jeigu kalbame apie individualaus įrašo puslapio sužymėjimą, tai situacija lyg ir keistųsi – blog’o pavadinimas jau nebėra h1
svarbos, nes svarbiausia antraštė tokiu atveju yra įrašo pavadinimas! Įrašo pastraipos taipogi turėtų kylti lygiu aukščiau – iki h2
. Kas tokiu atveju atsitinka su sidebar skiltimis? Nežinau.
Taip iki galo ir neišsprendžiau tos problemos, nors ir labai norėjosi. Viena iš minčių buvo išvis atsisakyti pašalinės navigacijos. Lankytojų tai per daug nenuskriaustų – pagal mano duomenis didžioji dalis lankytojų iš Google patekę tiesiai į konkretų įrašą arba tiesiog išeidavo (aš gal rašyt nemoku?), arba po to keliaudavo į titulinį puslapį (o gal vistik moku?), o ne tiesiogiai į kitus įrašus.
HTML5 dokumento skilčių apibrėžimai į pagalbą!
Nepaisant to, kad iš aukščiau apibrėžtos problemos grafomanas išspaustų tris įrašus, o internetas pilnas nesibaigiančių diskusijų, man tai nebėra aktualu! HTML5 apibrėžia dokumento skiltis – joms sužymėti galima naudoti section
, nav
ir article
elementus (aside
taipogi laikoma atskiru, susijusiu poskyriu). Visi šie elementai gali turėti savo antraštes ir paraštes (header
ir footer
). Tokiu atveju, kiekviena antraštė įgauna savo individualų kontekstą (body
viduje esanti antraštė aprašo puslapį, gi tuo tarpu article
viduje – tik tą įrašą) ir savo individualią hierarchiją.
Nepaisant to, kad specifikacijoje gana daug teksto yra skiriama rodyklės (outline) formavimo algoritmui, paprastam blog’ui, o turbūt ir daugeliui kitų svetainių, tai yra neaktualu, nes antraščių hierarchija visada gaunasi elementari – praktiškai bet kurios dokumento dalies antraštės apsirašo tiesiog <header><h1> pavadinimas </h1></header>
, t.y. h1
šiuo atveju nebereiškia tiesiog “svarbiausia antraštė”, o interpretuotina kaip “svarbiausia antraštė šioje dokumento dalyje”. Naudojant tokią logiką, individualus įrašo puslapis jau nebeturi kitokio globalaus antraščių lygmenų išsidėstymo, nei sąrašuose – dabar aš drąsiai galiu savo įrašų poskilčius žymėti tiesiog h2
.
Desertas
- HTML5 neberiboja antraščių gilumo (anksčiau buvo maks. 6) – nors ir nelabai žinau kam to gali prireikti
hgroup
elementas leidžia grupuoti antraštes su paantraštėm, kaip pvz. aš esu padaręs su blog’o pavadinimu – View source naudoti mokat?- ARIA
banner
rolė leidžia atskirti “svetainės” ir “dokumento” pavadinimus – apie ARIA apskritai dar reiktų daugiau man pasiskaityti…
Papildomas skaitymas
- Introducing the
<hgroup>
element - Headings in HTML 5 and accessibility
- More than one H1 on a page: good or bad?
PS neturiu laiko ieškoti, bet gal kas turit pasiūlymą, kaip WordPress priversti nedėti aside
į p
?