Hode- og fotområde
Med de to elementene header og footer kan man definere hode- og fotområde. For å definere hodeområdet brukes head-elementet. Det behøver forresten ikke nødvendigvis å være hodeområdet for hele siden. På samme måte kan man med head også markere hodeområdet for andre elementer som for eksempel seksjoner og artikler.
Pass på å ikke forveksle header med det kjente head-elementet som definerer hodeområdet i HTML-dokumenter, hvor dokumenttittel, stilark og JavaScript-kall er inkludert.
For et komplett dokument ville bruken av header se slik ut:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
Implementert på et section-element ville det se slik ut:
<section>
<header>
<h1> Opprett web-apper (Del 09): jQuery mobile (1)</h1>
<p> jQuery er utvilsomt et av de mest kjente JavaScript-rammeverkene.</p>
</header>
<p>
Derfor brukes jQuery allerede tusenvis av ganger på "klassiske" nettsteder. Spesielt designet for bruk i web-apper ble søster-rammeverket jQuery mobile (jQM) opprettet. Dette rammeverket hjelper deg med å få web-apper til å se ut som ekte apper på et øyeblikk. Det er god nok grunn til å se grundig på jQM.
</p>
<footer>
<p>Opphavsrett av PSD-Tutorials.de</p>
</footer>
</section>Vær oppmerksom på at footer og header ikke skal inneholde ekstra header- og footer-elementer.
Gruppere overskrifter
I forbindelse med seksjoner kommer overskriftene på banen. Disse overskriftene kan være de klassiske elementene h1 til h6hgroup-elementet tillatt. Innenfor disse hgroup-elementene kan det igjen være flere overskrifter.
Først se på et klassisk HTML-dokument der "vanlig" struktur defineres ved hjelp av hx-elementer.
<h1>
Bok
</h1>
<h2>
Kapittel 1
</h2>
<h2>
Kapittel 2
</h2>
<h3>
Underkapittel 2.1
</h3>
<h3>
Underkapittel 2.2
</h3>
<h2>
Kapittel 3
</h2>
Dette definerer følgende struktur:
Bok
Kapittel 1
Kapittel 2
Underkapittel 2.1
Underkapittel 2.2
Kapittel 3
På nettleseren er ikke overskriftene innrykket.
Interessant er hgroup spesielt i forbindelse med journalistiske tekster. Disse består ofte av en todelt overskrift som inneholder hovedoverskriften samt et tak- eller underoverskrift. Et eksempel vil klargjøre denne aspekten.
<hgroup> <h1>Sky OS</h1> <h2>Nettet som operativsystem</h2> </hgroup> <p>Her starter innholdet av artikkelen...</p>
I dette eksempelet er det tydelig at underoverskriften ikke starter et eget avsnitt innenfor artikkelen. Den utgjør heller en del av artikkeloverskriften. Nettopp slike ting kan oppsummeres ved hjelp av hgroup-element.
Innenfor hgroup tillates elementene h1 til h6.
Outline-konseptet
I tillegg til dette kommer Outline-konseptet i HTML5, som omhandler samspillet mellom section- og de ulike hx-elementene. I dette konseptet, som tidligere, er overskriftene delt inn i forskjellige nivåer ved hjelp av elementene h1 til h6. h1 tilsvarer det øverste nivået, mens h6 representerer det laveste nivået. Her er det altså ingen endring i forhold til før. Nå kan imidlertid hx-elementene defineres innenfor section-elementer. Og hver gang dette gjøres, starter tellingen på nytt, men alltid ett nivå lavere.
Outline-konseptet virker ganske komplisert i HTML5-spesifikasjonen, men ideen bak er faktisk veldig enkel. Faktisk kan man definere et innholdsreferat som gjør dokumentstrukturen maskinlesbar.
Her er et eksempel:
<h1>
Kapittel 1
</h1>
<section>
<h1>
Kapittel 2
</h1>
<section>
<h1>
Kapittel 3
</h1>
</section>
</section>
Gjennom HTML5 Outline-konseptet resulterer følgende struktur:
1. Kapittel 1
- Kapittel 2
- Kapittel 3
- Kapittel 3
Et annet eksempel skal illustrere effekten. Igjen vises det opprinnelige dokumentet først.
<section>
<h1>Installasjon og konfigurasjon</h1>
<section>
<h2>Installasjon</h2>
<p>Alt om installasjonsemnet
</section> <section>
<h2>Konfigurasjon</h2>
<p>Her finner du alt om konfigurasjonsemnet
</section>
<aside>
<p>Interessante bøker om temaet...
</aside>
</section>
<footer>
<p>(c) av PSD-Tutorials.de
</footer>
</section>
Den resulterende strukturen ser slik ut:
1. Seksjon (Installasjon og konfigurasjon)
1.1 Seksjon (Installasjon)
1.2 Seksjon (Konfigurasjon)
1.3 Seksjon (side)
- Seksjon (footer)
Og enda et eksempel:
<body>
<h1>Installasjon og konfigurasjon</h1>
<h2>Installasjon</h2>
<p>Alt om temaet installasjon
...enda mer innhold...
<section>
<h3>Forutsetninger</h3>
<p>Alt om installasjonsforutsetningene
...enda mer innhold...
<h3>Forberedelser</h3>
<p>Alt om forberedelser
...enda mer innhold...
<h2>Konfigurasjon</h2>
<p>Alt om konfigurasjon
...enda mer innhold...
</section>
</body>
Resultatstrukturen ser slik ut:
1. Installasjon og konfigurasjon
1.1 Installasjon
1.1.1 Forutsetninger
1.1.2 Forberedelser
1.2 Konfigurasjon
Den interne tellingen starter derfor alltid på nytt ved 1. Elementene påvirket av Outline-konseptet er bare disse:
• article
• aside
• nav
• section
Derimot forblir elementene header og footer ekskludert.
Vennligst vær oppmerksom på at Outline-konseptet for øyeblikket ikke støttes av nettleserne.
Imidlertid vil det bare være et spørsmål om tid før nettleserleverandørene handler her. Fordelene ved Outline-konseptet ville være enorme. Tenk for eksempel på automatisk genererte navigasjonsmenyer. Men selv om strukturen i den nevnte formen for øyeblikket blir ignorert av nettleserne, bør du allerede prøve å strukturere dokumentene dine logisk. På denne måten vil du også få en viss fremtidssikkerhet for nettstedene dine.
