Header och footer
Genom elementen header och footer kan header och footer definieras. För att definiera header, används elementet head. Förresten behöver det inte nödvändigtvis vara sidans header. På samma sätt kan man också markera header för andra element som till exempel sektioner och artiklar med head.
Observera: Förväxla inte header med det kända head-elementet som definierar sidans huvudinnehåll i HTML-dokument, där dokumentets namn, stylesheet- och JavaScript-anrop finns.
För en hel dokument skulle användningen av header se ut såhär:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
Applicerat på ett section-element skulle bilden se ut såhär:
<section>
<header>
<h1> Skapa webbapplikationer (del 09): jQuery mobile (1)</h1>
<p> jQuery är utan tvekan ett av de mest kända JavaScript-ramverken.</p>
</header>
<p>
På "klassiska" webbplatser används jQuery redan tusentals gånger. Speciellt utformat för användning i webbapplikationer är systerramverket jQuery mobile (jQM). Detta ramverk hjälper dig att snabbt få din webbapp att se ut som en riktig app. Tillräckligt för att ta en noggrann titt på jQM.
</p>
<footer>
<p>Upphovsrätt av PSD-Tutorials.de</p>
</footer>
</section>Se alltid till att footer och header inte får innehålla extra header och footer-element.
Gruppera rubriker
I samband med sektioner kommer rubrikerna in i bilden. Dessa rubriker kan först och främst vara de klassiska elementen h1 till h6. Men även i HTML5 är hgroup-elementet tillåtet. Inom dessa hgroup-element kan flera rubriker finnas.
Börja med att titta på ett klassiskt HTML-dokument där den "vanliga" strukturen definieras med hx-element.
<h1>
Bok
</h1>
<h2>
Kapitel 1
</h2>
<h2>
Kapitel 2
</h2>
<h3>
Underkapitel 2.1
</h3>
<h3>
Underkapitel 2.2
</h3>
<h2>
Kapitel 3
</h2>
Denna definition innebär följande struktur:
Bok
Kapitel 1
Kapitel 2
Underkapitel 2.1
Underkapitel 2.2
Kapitel 3
Men i webbläsaren är rubrikerna inte indragna.
hgroup är framför allt intressant i samband med journalistiska texter. Dessa består ofta av en tvådelad rubrik, som består av huvudrubriken och tak- eller underrubriken. Ett exempel ska illustrera detta.
<hgroup> <h1>Cloud OS</h1> <h2>Webben som operativsystem</h2> </hgroup> <p>Här börjar artikelinnehållet...</p>
I detta exempel är det tydligt att underrubriken inte inleder en egen sektion inom artikeln. Det är snarare en del av artikeltiteln. Precis sådant kan sammanfattas med hjälp av hgroup-elementet.
Inom hgroup tillåts elementen h1 till h6.
Outline-konceptet
I HTML5 kommer även Outline-konceptet in i bilden, där det handlar om samverkan mellan section- och olika hx-element. I detta koncept delas rubrikerna upp i olika nivåer med hjälp av elementen h1 till h6h1 representerar den högsta nivån medan h6 representerar den lägsta nivån. Så det finns ingen förändring jämfört med tidigare. Nu kan dock hx-elementen definieras inom section-elementen. Och varje gång börjar räkningen om, men alltid en nivå djupare.
Outline-konceptet kan verka ganska komplicerat i HTML5-specifikationen, men idén bakom det är faktiskt väldigt enkel. I praktiken kan det användas för att definiera en innehållsförteckning som gör dokumentstrukturen maskinläsbar.
Ett exempel:
<h1>
Kapitel 1
</h1>
<section>
<h1>
Kapitel 2
</h1>
<section>
<h1>
Kapitel 3
</h1>
</section>
</section>
Genom HTML5:s Outlinje-koncept uppstår följande struktur:
1. Kapitel 1
- Kapitel 2
- Kapitel 3
- Kapitel 3
Ett annat exempel för att klargöra effekten. Här är återigen det ursprungliga dokumentet.
<section>
<h1>Installation och konfiguration</h1>
<section>
<h2>Installation</h2>
<p>Allt om installation
</section> <section>
<h2>Konfiguration</h2>
<p>Här hittar ni allt om konfiguration
</section>
<aside>
<p>Intressanta böcker om ämnet...
</aside>
</section>
<footer>
<p>(c) av PSD-Tutorials.de
</footer>
</section>
Den resulterande strukturen ser ut som följer:
1. Avsnitt (Installation och konfiguration)
1.1 Avsnitt (Installation)
1.2 Avsnitt (Konfiguration)
1.3 Avsnitt (aside)
- Avsnitt (footer)
Och ännu ett exempel:
<body>
<h1>Installation och konfiguration</h1>
<h2>Installation</h2>
<p>Allt om installationsämnet
...mer innehåll...
<section>
<h3>Förutsättningar</h3>
<p>Allt om installationsförutsättningar
...mer innehåll...
<h3>Förberedelser</h3>
<p>Allt om förberedelser
...mer innehåll...
<h2>Konfiguration</h2>
<p>Allt om konfiguration
...mer innehåll...
</section>
</body>
Strukturen ser ut på följande sätt:
1. Installation och konfiguration
1.1 Installation
1.1.1 Förutsättningar
1.1.2 Förberedelser
1.2 Konfiguration
Den interna numreringen börjar alltså om från 1 varje gång. Följande element påverkas endast av Outlinje-konceptet:
• article
• aside
• nav
• section
Medan elementen header och footer inte tas med.
Observera att Outlinje-konceptet för närvarande ännu inte stöds av webbläsarna.
Men det är bara en tidsfråga innan webbläsartillverkarna agerar här. Fördelarna med Outlinje-konceptet är för stora. Tänk till exempel på automatiskt genererade navigeringsmenyer. Men även om struktureringen i den nämnda formen för närvarande ignoreras av webbläsarna, bör ni redan nu försöka strukturera era dokument logiskt. På så sätt får ni också en viss framtidssäkerhet för era webbplatser.
