Hx: Skillnad mellan sidversioner

Nuvarande version från 2 april 2025 kl. 19.11

<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 den 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.

Använd rubriker konsekvent

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änds ej för layout

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`

Det ska enbart finnas en <h1>-tagg per dokument. Det ska vara huvudtiteln för hela sidan, ungefär som framsidan på en bok. Webbläsare är som vanligt snälla och tillåter att man kan ha flera <h1> i en sida. Standarden säger dock att det enbart ska finnas en enda <h1>. Däremot finns det inga begränsningar för hur ofta man kan använda övrig <hn>-taggar.

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

Taggens definition i WHATWGs levande HTML-standard

http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements

Taggens definition i HTML5-standarden

http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements

@@ Rad 1: / Rad 1: @@
 <code>&lt;h1></code>, <code>&lt;h2></code>, <code>&lt;h3></code>, <code>&lt;h4></code>, <code>&lt;h5></code>, <code>&lt;h6></code>
-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. <code>&lt;h1></code> kan ses som titelrubrik eller överskriftsrubrik. <code>&lt;h1></code> är även den viktigaste rubriknivån och bör finnas på alla sidor.
+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 den in informationen. Där t.ex. <code>&lt;h1></code> kan ses som titelrubrik eller överskriftsrubrik. <code>&lt;h1></code> är även den viktigaste rubriknivån och bör finnas på alla sidor.
+== Använd rubriker konsekvent ==
 Skippa inte över rubriknivåer. Gå inte direkt ifrån <code>&lt;h1></code> till <code>&lt;h3></code>, utan använd dem i ordning, så det byggs upp en logisk struktur i ditt dokument.
+== Används ej för layout ==
 Använd inte rubrikerna för deras utseendes skull. <code>&lt;h1></code> ä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 <code>&lt;span></code>-tagg kopplad till en [[CSS-regel]].
 == Användning av <code>h1</code> ==
-Tidigare sa man ofta att det enbart skulle finnas en <code>&lt;h1></code>-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 [[semantik|semantiska]] sätt att dela upp en webbsida i olika regioner, t.ex. <code>&lt;section></code> och <code>&lt;article></code>. 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 <code>&lt;h1></code>-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 <code>&lt;section></code>-taggen för sånt som är så distinkt att det förtjänar en egen <code>&lt;h1></code>-tagg.
+Det ska enbart finnas en <code>&lt;h1></code>-tagg per dokument. Det ska vara huvudtiteln för hela sidan, ungefär som framsidan på en bok. Webbläsare är som vanligt snälla och tillåter att man kan ha flera <code>&lt;h1></code> i en sida. Standarden säger dock att det enbart ska finnas en enda <code>&lt;h1></code>. Däremot finns det inga begränsningar för hur ofta man kan använda övrig <code>&lt;hn></code>-taggar.
 == Tillgänliga attribut ==
@@ Rad 14: / Rad 16: @@
 == Exempel ==
+<codepen pen="JdvKVw" tab="html,result" height="300">
 <syntaxhighlight lang="html5">
 <h1>Överskrift</h1>
@@ Rad 19: / Rad 22: @@
 <h3>Rubriknivå tre</h3>
 </syntaxhighlight>
+</codepen>
 Ovanstående exempel visar en minimal rubrikstruktur. Överskriften har två steg med underrubriker.