Sådan Bruger man Article, Section, Header og Footer i HTML

Article, header og footer er elementer til sektions inddeling. De bliver brugt sammen med overskrifts elementerne h1-h2 til at skabe struktur i HTML sider.

2091 visninger
d

Af. Jacob

Edited: 2018-01-21 04:20

I HTML5 er der kommet en række nye elementer til sektions-opdeling, som er med til at danne struktur i vores HTML kode. Hvor man tidligere kun skulle tænke på elementerne h1-h6, skal man nu overveje en masse nye elementer. Det drejer sig primært om article, section, header og footer. Der er også andre elementer, men dem vil vi tage op i en anden artikel.

Det er i lang tid blevet anbefalet, at man udelukkende bruger h1 i forbindelse med de nye sektions elementer, det vil dog kunne give problemer for skærmoplæsere. Derfor anbefales det, at man bruger h1-h2, svarende til det niveau en sektion befinder sig på.

Præcist hvordan de nye sektions elementer skal benyttes, kan nogle gange være svært at afgøre, og der er ikke altid noget klart svar. Jeg vil alligevel forsøge at komme nærmere ind på det i denne artikel. Men først vil jeg lige give en kort forklaring på hvert enkelt element.

Der er også en video til sidst i artiklen, hvor elementerne bliver kort forklaret.

Sektions elementer i HTML5

Sektions elementer er elementer, som bliver brugt til at opdele en side i sektioner. Det er en funktion som endnu ikke er implementeret i browseren, men elementerne har stadig andre funktioner. Selvom man altså bruger de nye elementer, så vil det stadig være h1-h2 som danner sidens outline. Overordnet set kan de nye elementer være en stor hjælp for skærmoplæsere, og udviklere der skal arbejde med styling af siden.

Article elementet bliver brugt til sidens primære indhold. Det vil ofte være en artikel, men behøver altså ikke nødvendigvis at være det. Det kan eksempelvis også være en video eller en kontaktformular. En ting som kan gøre det nemmere at forstå, er at indholdet i article skal kunne stå alene fra det øvrige indhold på siden og stadig give mening. Det er blandt andet nyttigt, hvis indholdet skal syndikeres (udgives i flere forskellige medier). I realiteten er der nok ikke mange værktøjer, som går ind og henter indhold ud af HTML på denne måde.

Section bliver typisk brugt til at opdele article i undersektioner. Den første overskrift (h1) kan man eksempelvis placere i en header inde i article, sammen med en kort beskrivelse af indholdet. Efterfølgende overskrifter (h2) placere man i section elementerne.

Header bruges nok oftest to steder i koden på en side. Første sted er uden for article, i body delen af koden, denne header danner sidens globale header. Her kan man eksempelvis placere et logo og en navigations menu. Det andet sted man kan placere en header er inden i article elementet. Man kan også placere den i de individuelle undersektioner – men det vil nok sjældent give mening at gøre det.

Footer elementet bliver brugt på samme måde som header. Vi kan placere en global footer uden for article, og vi kan placere en inden i vores article. Normalt vil en footer indeholde mindre vigtige, supplerende materiale til en sektion. Det kan eksempelvis være ekstra navigation (Om os, Kontakt, Privatlivspolitik. Osv.).

En lille tilføjelse til brugen af header og footer vil være, at man normalt kun vil bruge header til navigation. En footer der er placeret i article, vil det være nærliggende at bruge til informationer om forfatteren.

Kodning med Article, header og footer

Rækkefølgen af de forskellige elementer (header, footer og article) i koden er underordnet. Man kan godt placere footer før header, men det vil dog give mest mening, hvis man så også flytter placeringen visuelt ved hjælp af CSS. Det er en af fordelene ved semantiske elementer.

En standard HTML side kan eksempelvis se sådan her ud:

<!doctype html>
<html lang="da">

 <head>
  <title>Sådan bruger du article, header og footer | beamtic.dk</title>
 <head>

 <body>
  <header id="site_header">
   <a href="/"><img src="billeder/sidens-logo.png" alt="Logo"></a>
   <nav id="site_navigation">
    <ol>
     <li><a href="portfolio.html">Portfolio</a></li>
     <li><a href="cv.html">CV</a></li>
     <li><a href="kontakt.html">Kontakt</a></li>
    </ol>
   </nav>
  </header>

  <article>
    <header>
     <h1>Sådan bruger du Article, header og Footer</h1>
     <p>På denne side kan du lære hvordan man bruger de nye sektions elementer i HTML5.</p>
    </header>

    <p>Her har vi selve artiklens indhold :-)</p>

    <footer>
     <img src="billeder/personer/knud.jpg" alt="Knud">
     <p>Artiklen blev skrevet af Knud Andersen. Knud er uddannet IT-supporter og arbejder til dagligt med IT og kundesupport hos Knud Mobile Aps.</p>
    </footer>
  </article>

  <footer>
   <ol>
    <li><a href="om.html">Om os</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
    <li><a href="privatliv.html">Privatlivspolitik</a></li>
   </ol>
  </footer>
 </body>

</html>

Det komplette eksempel, som vist ovenfor, er nok en lidt stor mundfuld for de fleste. Så vi kan i stedet prøve at forklare enkelte dele af koden. Ovenstående skulle give et godt udgangspunkt, for dem som ønsker at arbejde videre selv.

Vær også opmærksom på, at man altså godt kan placere forfatter oplysningerne i sin header i stedet for at have dem i en footer. Hvis man også har links til sociale medier, så kan det dog være en fordel at bruge footer, da header elementet allerede indeholder både en overskrift og en kort beskrivelse.

Video

Fortæl os hvad du tænker:

  1. Der er flere måder at indsætte billeder på i HTML, her kan du læse om nogle af dem.
  2. Sådan styrker du dit design med hover-effekter i CSS.
  3. Når man laver links i HTML er der en række overvejelser man bør gøre sig, læs hvilke her i artiklen.
  4. Hvordan man skriver nyttige kommentarer, når man koder HTML.
  5. GDPR.. Fra notifikationer til indholds-blokerende popups og cookie-walls.

Flere i: Webdesign