Om strukturelle tags

I HTML5 findes <header> <footer> <nav> <article> <section> <aside> som bruges til at strukturer HTML koden bedre

Introduktion

I HTML5 er der nye strukturelle tags som kan hjælpe med at opdele siden i dele som ofte er at finde på en hjemmeside.

Lad os sige vi har en navigations menu med links til hjemmesidens forskellige sider.

I stedet for at skrive <div class="nav"> </div> omkring sin menu (som man gjorde før HTML5) så kan man i HTML5 skrive <nav> </nav>.

Fordelen ved det er at koden bliver mere overskuelig og det er lettere at se hvornår tagget slutter.
Når der er mange </div> i koden kan det være svært og se hvor slut tagget hører til.

De strukturelle tags har ikke noget bestemt udseende i browseren.
Som standard er de inline elementer.
Udseendet kan bestemmes med CSS.

Nye strukturelle tags i HTML5

<header> indeholder det øverste på hjemmesiden. Kan også bruges i <article>.

<footer> indeholder det nederste på hjemmesiden. Kan også bruges i <article>.

<nav> indeholder hjemmesidens menu hvor man vælger side og eventuelt søgefunktion.

<article> indeholder et for-sig-selv-stående-stykke-indhold som også giver mening hvis det kun bliver vist for sig selv. For eksempel et forum indlæg, avis artikel, blog besked, bruger kommentar som også giver mening hvis det vises for sig selv i et RSS feed.

<section> kan både bruges til at indeholde flere <article> og inden i <article> til at opdele den i flere dele.

<aside> indeholder noget som kun har lidt relation til hovedindholdet men ikke direkte handler om det. For eksempel information om hvem der har skrevet artiklen, hvornår og kontakt oplysninger.

<hgroup> bruges til at samle en gruppe af et eller flere <h1> til <h6> overskrifter men er fjernet fra HTML5 specifikationen (w3.org), så undlad at bruge elementet.

Browserunderstøttelse af nye strukturelle tags i HTML5

Browserunderstøttelse fra caniuse.com :

Eksempel

Her er et eksempel på hvordan man kan bruge nogen af de nye strukturelle tags.

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.