Glava in noga
Z uporabo elementov header in footer je mogoče določiti glavo in nogo. Za določitev glave se uporablja head-element. Pri tem gre mimogrede lahko tudi za glavo celotne strani. Prav tako je mogoče z uporabo elementa head označiti glavo drugih elementov, na primer sekcij in člankov.
Opozorilo: Ne zamenjujte elementa header z znanim elementom head, ki služi za določitev glave HTML-dokumentov, v kateri so naslov dokumenta ter klice za stilsko oblikovanje in JavaScript.
Za celoten dokument bi uporaba elementa header izgledala tako:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
Če bi se uporabil element header z elementom section, bi se predstavilo naslednje:
<section>
<header>
<h1> Ustvarjanje spletnih aplikacij (Del 09): jQuery mobile (1)</h1>
<p> jQuery je nedvomno eno izmed najbolj znanih JavaScript ogrodij.</p>
</header>
<p>
Na "klasičnih" spletnih mestih je jQuery že uporabljen tisočkrat. Posebej za uporabo v spletnih aplikacijah je bilo ustvarjeno sestrsko ogrodje jQuery mobile (jQM). To ogrodje vam pomaga, da vašo spletno aplikacijo z lahkoto spremenite v pravo aplikacijo. Dovolj razlogov, da si podrobneje ogledate jQM.
</p>
<footer>
<p>Avtorske pravice: PSD-Tutorials.de</p>
</footer>
</section>V vsakem primeru pazite, da elementa footer in header ne vsebujeta dodatnih elementov header in footer.
Združevanje naslovov
V povezavi s sekcijami so pomembni naslovi. Pri teh naslovih gre lahko najprej za klasične elemente h1 do h6. V HTML5 pa je dovoljen tudi element hgroup. Znotraj teh elementov hgroup pa je lahko več naslovov.
Najprej si poglejmo klasičen HTML dokument, v katerem je struktura "običajna" z uporabo elementov hx.
<h1>
Knjiga
</h1>
<h2>
Poglavje 1
</h2>
<h2>
Poglavje 2
</h2>
<h3>
Podpoglavje 2.1
</h3>
<h3>
Podpoglavje 2.2
</h3>
<h2>
Poglavje 3
</h2>
Ta definicija pomeni naslednjo strukturo:
Knjiga
Poglavje 1
Poglavje 2
Podpoglavje 2.1
Podpoglavje 2.2
Poglavje 3
V brskalniku pa so naslovi prikazani brez zamika.
Element hgroup je zanimiv predvsem v povezavi z novinarskimi besedili. Ta besedila običajno sestavljata dvojni naslov, ki ga tvorita glavni naslov in strešni ali podnaslov. Primer bo to razjasnil.
<hgroup> <h1>Oblak OS</h1> <h2>Splet kot operacijski sistem</h2> </hgroup> <p>Tukaj se začne vsebina članka ...</p>
Iz tega primera je razvidno, da podnaslov ne uvaja lastnega odstavka znotraj članka. Gre prej za del naslova članka. Ravno to lahko dosežemo z uporabo elementa hgroup.
V elementu hgroup so dovoljeni elementi h1 do h6.
Koncept orisa
V HTML5 je predstavljen koncept orisa, pri katerem gre za sodelovanje elementa section z različnimi elementi hx. Pri tem konceptu se, kot doslej, naslovi s pomočjo elementov h1 do h6 delijo v različne ravni. Pri tem ustreza h1 najvišji ravni, medtem ko h6 predstavlja najnižjo raven. Tukaj torej ni spremembe v primerjavi s prejšnjimi pristopi. Enako je zdaj mogoče določiti elemente hx znotraj elementov section. Pri tem se vsaka številka začne znova, vendar se vedno premakne za eno raven nižje.
Koncept orisa je v specifikaciji HTML5 precej zapleten, vendar je ideja za to zelo preprosta. Z njim je namreč mogoče določiti vsebino, ki strukturo dokumenta pretvori v strojno berljiv obrazec.
Spodaj je podan še en primer:
<h1>
Poglavje 1
</h1>
<section>
<h1>
Poglavje 2
</h1>
<section>
<h1>
Poglavje 3
</h1>
</section>
</section>
S konceptom orisa HTML5 se oblikuje naslednja struktura:
1. Poglavje 1
- Poglavje 2
- Poglavje 3
- Poglavje 3
Še en primer bo razjasnil učinek. Tudi tukaj najprej izhodiščni dokument.
<section>
<h1>Namestitev in konfiguracija</h1>
<section>
<h2>Namestitev</h2>
<p>Vse v zvezi z namestitvijo
</section> <section>
<h2>Konfiguracija</h2>
<p>Tukaj boste našli vse o konfiguraciji
</section>
<aside>
<p>Zanimive knjige na temo...
</aside>
</section>
<footer>
<p>(c) by PSD-Tutorials.de
</footer>
</section>
Iz tega izhaja naslednja struktura:
1. Odsek (Namestitev in konfiguracija)
1.1 Odsek (Namestitev)
1.2 Odsek (Konfiguracija)
1.3 Odsek (aside)
- Odsek (footer)
In še en primer:
<body>
<h1>Namestitev in konfiguracija</h1>
<h2>Namestitev</h2>
<p>Vse o temi namestitve
...še več vsebine...
<section>
<h3>Pogoji</h3>
<p>Vse o pogojih namestitve
...še več vsebine...
<h3>Priprave</h3>
<p>Vse o pripravah
...še več vsebine...
<h2>Konfiguracija</h2>
<p>Vse o konfiguraciji
...še več vsebine...
</section>
</body>
Iz rezultirajoče strukture izgleda takole:
1. Namestitev in konfiguracija
1.1 Namestitev
1.1.1 Pogoji
1.1.2 Priprave
1.2 Konfiguracija
Notranje štetje se torej začne vsakič znova pri 1. Iz koncepta orisa so prizadeti le ti elementi:
• article
• aside
• nav
• section
Elementa header in footer pa ostajata izven tega.
Prosimo, upoštevajte, da trenutno koncepta orisa brskalniki še ne podpirajo.
Vendar je le vprašanje časa, kdaj bodo proizvajalci brskalnikov ukrepali. Prednosti koncepta orisa bi bile prevelike. Denimo samodejno generirane navigacijske vrstice. Toda tudi tako velja: Čeprav brskalniki trenutno prezirajo strukturo na naveden način, bi morali že zdaj poskusiti logično strukturirati svoje dokumente. Tako boste takoj pridobili določeno varnost za prihodnost svojih spletnih strani.
