Ved at bruge denne side acceptere du samtidig Brugbarts og vores partneres brug af cookies.

Læs mere

Sådan bruger du overskrifter i HTML LS

Hvordan man laver sektioner i HTML, og hvordan man anvender overskrift elementerne korrekt.

Redigeret: 2015-06-01 04:18

HTML living stadard logo anden orange udgave.

Sektioner er i HTML traditionelt blevet lavet med overskrifts elementerne h1-h2, hvor hvert element starter hver deres sektions-dybde. Det er derfor vigtigt, hvis man bruger h1-h2 metoden, at man husker at anvende dem i den rigtige rækkefølge. Dvs. Først h1 så h3 og så videre.

HTML Living Standard har dog introduceret en ny måde, at lave sektioner på. Det foregår ved brugen af section elementet, imens h1 bliver brugt til at lave overskrifter for sektionerne. En af de primære fordele er, at man kan lave lige så mange nivauer, som der er behov for.

I denne artikel vil vi koncentrere os om brugen af section elementet alene, for at undgå at det bliver for kompliceret. HTML LS har ellers også introduceret andre elementer, som kan bruges sammen med section elementet, og som igen har hver deres funktion – men dem vil vi ikke komme til at gennemgå her.

Overskrifter er lig med sektioner

Når man indsætter en overskrift i HTML sider, opstår der en naturlug sektion. Det er dog op til forfatteren at bestemme, hvornår der skal indsættes sub-sektioner, eller indsættes en sektion, som ligger på samme nivaue som den forrige – derfor havde man h1-h6 elementerne.

Problemet med den fremgangs metode var, at man så var begrænset til 6 niveauer. Med section elementet kan vi lave lige så mange niveauer som vi har lyst til.

Et eksempel på en HTML side der bruger section og h1, kan ses nedenfor:

<body>
 <h1>Første sektions nivaue</h1>

 <section>
   <h1>Andet sektions nivaue</h1>

   <section>
     <h1>Tredje sektions nivaue</h1> 
   </section>

 </section>
</body>

Traditionelle overskrifter og sektioner i HTML

Traditionelt har man angivet sektioner via HTML elementerne h1 til h6, og det kan man stadig gøre i LS. Selvom det er usandsynligt at hjemmesider, som har brugt den gamle metode, pludselig vil holde op med at virke, så anbefaler vi dog stadig, at man udelukkende bruger den nye metode – med henblik på fremtiden.

For at bruge den gamle metode, skal man helt enkelt, sørge for at placere overskrifterne i den rigtige rækkefølge. Det er dog også vigtigt at man bruger dem rigtigt. Nogle påstår fejlagtigt, at man kun skal have en h1 per side, men der altså intet galt i at have flere, så længe man blot sørge for at anvende dem korrekt.

Eksempelvis kunne overskriften for en artikel, begynde med h1, imens overskriften for andre sektioner på hjemmesiden – som ikke er en del af selve artiklen – også skrives med h1. Fordi de er på samme niveau.

Mange har fejlagtigt brugt h2 i stedet, hvilket reelt signalere, at menuerne på hjemmesiden er en sub-sektion til artiklen. Det kunne betyde, at visse fremvisere, ville tro at menuerne hørte til artiklen. Eks. En printer eller skærmoplæser.

Derfor vil det følgende eksempel, altså være en god skabelon til, hvordan man bruger de traditionelle elementer korrekt.

<body>
 <h1>Første sektions nivaue</h1>
 <h2>Andet sektions nivaue</h2>
 <h3>Tredje sektions nivaue</h3>
 <h1>Navigation menu</h1>
 <ol>
   <li>Link 1</li>
   <li>Link 2</li>
 </ol>
</body>

Potientielle problemer ved at bruge h1

Der har været en del usikkerhed omkring, hvordan det vil komme til at påvirke brugerene, og ikke mindst siders placering i søgemaskinerne, at man går over til at bruge nye HTML elementer, og ikke mindst den eksklusive brug af h1 til overskrifter.

Som udgangspunkt bør vi fokusere på fremtiden, frem for at tilpasse os enkelte brugeres behov. Web-standarderne er stadig i en relativ tidlig opstart, og der findes stadig meget "rod" som skal ryddes op. Når en standard som HTML derfor gennemgår en udvikling, er det vigtigt at vi også følger med. Eksisterende sider kan vi ofte roligt lade være som de er, men når vi skal til at lave nye sider, er det vigtigt vi overvejer at følge sidste nye standard – kun derved kan vi, være med til at lægge press på udviklerne af browsere og forskellige skærmoplæsere.

Problemet med skærmoplæsere

Den negative påvirkning af brugerne, er hovedsaligt omkring ”tilgængelighed” for mennesker med nedsat syn. Man har været bekymret for hvordan skærmoplæsere håndtere en side, som udelukkende bruger h1 til overskrifter.

Problemet med udelukkende at anvende h1, illustreres fint i eksemplet nedenfor, hvor man anvender følgende kode:

<body>
 <h1>Første sektions nivaue</h1>

 <section>
   <h1>Andet sektions nivaue</h1>

   <section>
     <h1>Tredje sektions nivaue</h1> 
   </section>

 </section>
</body>

Intentionen er selvfølgelig at skabe en outline, som den nedenfor:

– > Første sektions niveau
– – > Andet sektions niveau
– – – > Tredje sektions niveau

Men i virkeligheden opfatter browserne det dog som om, at der kun var et nivaue, opdelt i flere sektioner.

– > Første sektions niveau
– > Første sektions niveau
– > Første sektions niveau

Det kan skabe forvirring for brugere, som anvender skærmoplæsere.

Påvirkning af placering i søgemaskinerne

Der har også været en del tvivl omkring, hvordan brugen af flere h1 elementer, vil påvirke siders placering i søgemaskinerne. Det bedste råd at give i det tilfælde, vil være at prøve at bruge h1. Mange sider bruger allerede h1 eksklusivt, og de lader ikke til at opleve noget negativt forbundet med det.

Men det afhænger måske også af, hvilke søgemaskiner der er tale om. Google er eksempelvis fremragende til at se bort fra mange store ”kodnings fejl”, og ligger helt klart vægt på andre faktorer, til at bestemme siders placering.

Ikke fordi det er en fejl at bruge h1. Men de søgemaskiner der endnu ikke tolker HTML LS fuldt ud, kunne godt opfatte det som en ”fejl”. Det er her vigtigt at huske på – i hvert fald for Googles vedkommende – at en fejl i kodningen dog sjældent er nok til at påvirke en sides placering negativt.

Hvis man føler sig usikker, er det også tilladt at anvende h1-h6 i sine section elementer, nettop en mulighed der er givet os, for at sikre en blød og problemfri overgang til de nye sektioner. Her på Brugbart, har vi dog valgt udelukkende at bruge h1 – vi har dog sjældent artikler der går til et sektions niveau dybere end 2.