Top- og bundområde
Med de to elementer header og footer kan du definere top- og bundområdet. For at definere topområdet bruges head-elementet. I øvrigt behøver det ikke nødvendigvis at være topområdet for hele siden. Ligeledes kan du med head også markere topområdet for andre elementer såsom sektioner og artikler.
Advarsel: Forveksl ikke header med det velkendte head-element, som bruges til at definere topområdet af HTML-dokumenter, der indeholder dokumenttitel, stylesheet- og JavaScript-opkald.
For et komplet dokument ville brugen af header se sådan ud:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
Anvendt på et section-element ville det se sådan ud:
<section>
<header>
<h1> Oprettelse af webapps (Del 09): jQuery mobile (1)</h1>
<p> jQuery er utvivlsomt et af de mest kendte JavaScript-rammer.</p>
</header>
<p>
På "klassiske" websteder bruges jQuery derfor allerede tusindvis af gange. Specielt designet til brug i webapps er søster-rammen jQuery mobile (jQM). Denne ramme hjælper dig med at få din webapp til at se ud som en ægte app på ingen tid. God grund til at se nærmere på jQM.
</p>
<footer>
<p>Ophavsret af PSD-Tutorials.de</p>
</footer>
</section>Sørg i alle tilfælde for, at footer og header ikke må indeholde ekstra header- og footer-elementer.
Sammensæt overskrifter
I forbindelse med sektioner kommer overskrifterne i spil. Disse overskrifter kan være de klassiske elementer h1 til h6 i første omgang. I HTML5 er det også tilladt at bruge hgroup-elementet. Inden for disse hgroup-elementer kan der igen være flere overskrifter.
Lad os først se på et klassisk HTML-dokument, hvor den "normale" struktur defineres ved hjælp af hx-elementer.
<h1>
Bog
</h1>
<h2>
Kapitel 1
</h2>
<h2>
Kapitel 2
</h2>
<h3>
Underkapitel 2.1
</h3>
<h3>
Underkapitel 2.2
</h3>
<h2>
Kapitel 3
</h2>
Dette definition giver følgende struktur:
Bog
Kapitel 1
Kapitel 2
Underkapitel 2.1
Underkapitel 2.2
Kapitel 3
I browseren er overskrifterne dog ikke indrykket.
hgroup er især interessant i forbindelse med journalistiske tekster. Disse består ofte af en to-delt overskrift, som består af hovedlinjen samt taglinjen eller underlinjen. Et eksempel vil illustrere dette aspekt.
<hgroup> <h1>Cloud OS</h1> <h2>Internettet som operativsystem</h2> </hgroup> <p>Her begynder artiklens indhold …</p>
Det er tydeligt i dette eksempel, at underlinjen ikke starter en egen afsnit i artiklen. Derimod er den en del af overskriften. Netop noget sådant kan opsummeres ved hjælp af hgroup-elementet.
Inden for hgroup er elementerne h1 til h6 tilladt.
Outline-konceptet
I HTML5 kommer outline-konceptet desuden ind i billedet, hvor samarbejdet mellem section og de forskellige hx-elementer spiller en rolle. I dette koncept opdeles overskrifterne, som hidtil, ved hjælp af elementerne h1 til h6 i forskellige niveauer. Her svarer h1 til det øverste niveau, mens h6 udgør det laveste niveau. Her er der altså ingen ændring i forhold til før. For nu kan hx-elementerne defineres inden for section-elementer. Og i den forbindelse begynder tællingen hver gang igen, dog altid med et niveau lavere.
Outline-konceptet virker ret kompliceret i HTML5-specifikationen, men ideen bag det er faktisk ret enkel. Faktisk kan det bruges til at definere en indholdsfortegnelse, der gør dokumentstrukturen maskinlæselig.
Endnu et eksempel hertil:
<h1>
Kapitel 1
</h1>
<section>
<h1>
Kapitel 2
</h1>
<section>
<h1>
Kapitel 3
</h1>
</section>
</section>
Ved hjælp af Outline-konceptet i HTML5 resulterer det i følgende struktur:
1. Kapitel 1
- Kapitel 2
- Kapitel 3
- Kapitel 3
Et andet eksempel skal illustrere effekten. Her er igen det oprindelige dokument.
<section>
<h1>Installation og konfiguration</h1>
<section>
<h2>Installation</h2>
<p>Alt om installationsemnet
</section> <section>
<h2>Konfiguration</h2>
<p>Her finder I alt om konfigurationsemnet
</section>
<aside>
<p>Interessante bøger om emnet...
</aside>
</section>
<footer>
<p>(c) by PSD-Tutorials.de
</footer>
</section>
Den resulterende struktur ser således ud:
1. Section (Installation og konfiguration)
1.1 Section (Installation)
1.2 Section (Konfiguration)
1.3 Section (aside)
- Section (footer)
Og endnu et eksempel:
<body>
<h1>Installation og konfiguration</h1>
<h2>Installation</h2>
<p>Alt om installations tema
...mere indhold...
<section>
<h3>Forudsætninger</h3>
<p>Alt om installationsforudsætningerne
...mere indhold...
<h3>Forberedelser</h3>
<p>Alt om forberedelserne
...mere indhold...
<h2>Konfiguration</h2>
<p>Alt om konfigurationsemnet
...mere indhold...
</section>
</body>
Resultatstrukturen ser således ud:
1. Installation og konfiguration
1.1 Installation
1.1.1 Forudsætninger
1.1.2 Forberedelser
1.2 Konfiguration
Den interne tælling begynder derfor altid ved 1. Kun disse elementer er berørt af Outline-konceptet:
• article
• aside
• nav
• section
Mens elementerne header og footer forbliver udenfor.
Vær opmærksom på, at Outline-konceptet i øjeblikket ikke understøttes af browsere.
Det vil dog kun være et spørgsmål om tid, før browsere begynder at reagere her. Fordelene ved Outline-konceptet ville være for store at ignorere. Tænk for eksempel på automatisk genererede navigationslinjer. Selvom struktureringen i den nævnte form i øjeblikket ignoreres af browsere, bør I allerede nu forsøge at strukturere jeres dokumenter logisk. På den måde får I også en vis fremtidssikkerhed for jeres websider.
