5.5.2 Skapa rubriker med h-element
Rubriker ska formateras på rätt sätt. I HTML används h-elementet för detta ändamål. h1 signalerar huvudrubrik, h2 att det finns en underrubrik till en föregående huvudrubrik, och h3 en underrubrik till underrubriken. Den hierarkiska ordningen är viktig.
Korrekt användning av rubriker bidrar till:
- Att få en enhetlig formatering av alla sidor på webbplatsen.
- Att det blir lättare att läsa dokumentet utan stilmallar.
- Att sökmotorer hittar relevant information på sidorna. Sökmotorer utnyttjar var i ett dokument ett ord hittats för att avgöra hur relevant dokumentet är. Om ett ord tillhör ett h1- eller h2-element så anses det mer relevant än om det klassas som brödtext.
- Användaren får en överblick över dokumentet. Hjälpmedel behöver en korrekt strukturkod för att kunna avgöra vad som är en rubrik. Dokument ska till exempel inte börja med en rubrik märkt h2.
Formatera rubrikernas utseende med hjälp av stilmallar
Rubrikernas utseende formateras med hjälp av stilmallar.
Det går att ha flera rubriker som visuellt ser olika ut, men som har samma rubriknivå, till exempel h1 (huvudrubriker), se exempel nedan. På samma sätt kan underrubriker hanteras om det finns behov av att de till exempel ser olika ut på startsidor och underliggande sidor.
I exemplet nedan blir informativa h1-rubriker blå och varningar röda:
h1.informativ {color:#00f}
h1.varning {color:f00}
Mätbarhet
Kontrollera att publiceringsverktyget skapar korrekt rubrikkod och att det är möjligt att skapa rubriker med olika nivåer. Då behöver den som publicerar enbart koncentrera sig på att formulera bra rubriker och att markera den önskade rubriknivån.
Kontrollera att rubrikerna följer en hierarkisk ordning, att det finns en h1 före h2:or och en h2 före h3:or. För att testa om rubrikerna har en hierarkisk ordning, lista webbsidans rubrikstruktur med hjälp av gratis tilläggsprogram till webbläsaren.
Kommentarer
Ska den viktigaste rubriken på sidan vara h1 eller ska de vara h2?
Från HTML-specifikationen: "There are six levels of headings in HTML with H1 as the most important and H6 as the least."
Får man ha flera h1 på en sida? Eller ska man bara ha en h1?
Hur hanterar man rubriker i en global sidfot? Eftersom sidfoten är global innebär det att rubrikstrukturen på på de sidor som den hamnar under varierar. Ibland övriga sidan kanske bara innehåller h1 och h2:or, ibland h1 och h2:or samt några h3:or.
Om vi använder h4 i sidfoten blir det rätt på vissa sidor fel på andra. Är det då ok att hitta på en egen class för rubriker i sidfoten?
Henrik, har ni verkligen innehåll i sidfoten som hör till huvudinnehållet på ett sätt som gör den till en underrubrik? I så fall får man programmatiskt justera rubriknivån så att det blir korrekt. Mer rimligt kanske är att identifiera sidfoten med en WAI ARIA role?
Kommentera