Hoppa till: navigering, sök

Hx

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Detta är de olika rubriknivåerna som man använder för att dela in sin information i logiska delar. Dessa kan jämföras med olika rubriknivåer i en bok eller rapport. Samma regler som gäller för rubriknivåer i vanliga dokument gäller även här. Desto lägre rubriknivå, desto grövre delar det in informationen. Där t.ex. <h1> kan ses som titelrubrik eller överskriftsrubrik. <h1> är även den viktigaste rubriknivån och bör finnas på alla sidor.

Skippa inte över rubriknivåer. Gå inte direkt ifrån <h1> till <h3>, utan använd dem i ordning, så det byggs upp en logisk struktur i ditt dokument.

Använd inte rubrikerna för deras utseendes skull. <h1> är inte till för att visa stor text, det är till för att markera en titelrubrik och inget annat! Vill du ha en stor text finns det bättre sätt att lösa det på, t.ex. med en <span>-tagg kopplad till en CSS-regel.

Användning av h1

Tidigare sa man ofta att det enbart skulle finnas en <h1>-tagg per dokument. Vilket kan jämföras med att man enbart har en titelsida på en bok eller en framsida på en rapport. Dock är det inte så längre. I och med HTML5 har man infört flera semantiska sätt att dela upp en webbsida i olika regioner, t.ex. <section> och <article>. Innehållet inom dessa taggar är att ses som egna dokument, då meningen är att de ska definiera upp regioner som skulle kunna fungerat som egna, separata sidor. Här bör man använda sig av <h1>-taggar för att tala om vad de olika regionerna har för innehåll. Man brukar till och med säga att man enbart ska använda sig av <section>-taggen för sånt som är så distinkt att det förtjänar en egen <h1>-tagg.

Tillgänliga attribut

Enbart de globala attributen är tillgängliga för denna tagg.

Exempel

See the Pen JdvKVw by Patrik Grip-Jansson (@PGJ) on CodePen.

Ovanstående exempel visar en minimal rubrikstruktur. Överskriften har två steg med underrubriker.

Referenser