Fejléc és lábléc
Az header és footer elemek segítségével lehet definiálni a fejlécet és a láblécet. A fejléc meghatározásához a head elemet használjuk. Ezzel kapcsolatban fontos megjegyezni, hogy ez nem szükségszerűen a teljes oldal fejlécét jelenti. A head segítségével más elemek, például szekciók és cikkek fejlécét is jelölhetjük.
Figyelem: Ne keverjétek össze a header és a HTML-dokumentumok fejlécét definiáló ismert head elemet, amely tartalmazza az oldalcím, a stíluslap és a JavaScript hivatkozásokat.
Egy teljes dokumentum esetén a header használata így néz ki:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
Ha a kódot egy section elemre alkalmazzuk, az így festene:
<section>
<header>
<h1> Web-alkalmazások létrehozása (Rész 09): jQuery mobile (1)</h1>
<p> A jQuery kétségtelenül az egyik legismertebb JavaScript keretrendszer.</p>
</header>
<p>
A "hagyományos" weboldalakon a jQuery ezért már ezerszer használatos. A webalkalmazásokban való használatra kifejlesztett testvéroldal a jQuery mobile (jQM). Ez a keretrendszer segít abban, hogy az alkalmazást rögtön olyannak tűnjön, mint egy valódi alkalmazás. Elegen ok, hogy alaposan megnézzük a jQuery mobile-ot.
</p>
<footer>
<p>Szerzői jog PSD-Tutorials.de által</p>
</footer>
</section>Mindig ügyeljetek arra, hogy a footer és a header elemek ne tartalmazzanak további header és footer elemeket.
Címek csoportosítása
A szekciókkal kapcsolatban a címek is fontosak. Ezek a címek lehetnek az alapvető h1 és h6 elemek, de az HTML5-ben engedélyezett a hgroup elem is. Ezek a hgroup elemek több címet tartalmazhatnak.
Először tekintsünk egy olyan hagyományos HTML-dokumentumra, amelyben a "szokásos" struktúra hx elemek segítségével van meghatározva.
<h1>
Könyv
</h1>
<h2>
1. fejezet
</h2>
<h2>
2. fejezet
</h2>
<h3>
2.1 Alfejezet
</h3>
<h3>
2.2 Alfejezet
</h3>
<h2>
3. fejezet
</h2>
Ez a definíció a következő struktúrát jelenti:
Könyv
1. fejezet
2. fejezet
2.1 Alfejezet
2.2 Alfejezet
3. fejezet
A böngészőben azonban a címek nem lesznek beljebb húzva.
A hgroup elem különösen érdekes a publicisztikai szövegekkel kapcsolatban. Ezek gyakran két részes címmel rendelkeznek, amelyek a főcímet és a tető vagy alcímet tartalmazzák. Egy példa ezt a szempontot világosítja fel.
<hgroup> <h1>Cloud OS</h1> <h2> Az Internet mint operációs rendszer</h2> </hgroup> <p>Itt kezdődik a cikk tartalma…</p>
Ebből a példából jól látható, hogy az alcím nem indít új részt az anyagban. Inkább az cikk címének része. Pontosan erre szolgál a hgroup elem.
A hgroup elemen belül az h1 és h6 elemek engedélyezettek.
A vázlatkoncepció
A HTML5-ben az Outline-Konzept kerül bejátszásra, ami a section és a különféle hx elemek együttműködéséről szól. Ebben a koncepcióban, ahogy eddig szokásos volt, a címeket a h1 és h6 elemek különböző szintekre osztják fel. A h1 jelenti a legfelső szintet, míg a h6 a legalsó szintet. Itt nincs változás a korábbihoz képest. Az újdonság az, hogy mostantól a hx elemek a section elemekben is definiálhatók. Minden alkalommal, amikor ez megtörténik, az szint mindig egyel lejjebb kezdődik.
A vázlatkoncepció meglehetősen bonyolultnak tűnhet a HTML5 specifikációjában, de az ötlet mögötte rendkívül egyszerű. Valójában ezáltal lehet meghatározni egy tartalomjegyzéket, ami a dokumentum struktúráját gép által olvashatóvá teszi.
Itt egy további példa:
<h1>
1. fejezet
</h1>
<section>
<h1>
2. fejezet
</h1>
<section>
<h1>
3. fejezet
</h1>
</section>
</section>
A HTML5 kontúrvázlat-koncepciójából következő struktúra alakul ki:
1. Fejezet 1
- Fejezet 2
- Fejezet 3
- Fejezet 3
Egy további példa szemlélteti az hatást. Itt ismét az eredeti dokumentum.
<section>
<h1>Telepítés és konfiguráció</h1>
<section>
<h2>Telepítés</h2>
<p>Minden az telepítés témájáról
</section> <section>
<h2>Konfiguráció</h2>
<p>Itt található minden a konfigurációról
</section>
<aside>
<p>Érdekes könyvek a témában...
</aside>
</section>
<footer>
<p>(c) by PSD-Tutorials.de
</footer>
</section>
Ennek eredményeként az alábbi struktúra alakult ki:
1. Szakasz (Telepítés és konfiguráció)
1.1 Szakasz (Telepítés)
1.2 Szakasz (Konfiguráció)
1.3 Szakasz (aside)
- Szakasz (footer)
És még egy példa:
<test>
<h1>Telepítés és konfiguráció</h1>
<h2>Telepítés</h2>
<p>Minden a telepítés témájáról
...még több tartalom...
<section>
<h3>Előfeltételek</h3>
<p>Minden az telepítés előfeltételeiről
...még több tartalom...
<h3>Felkészülés</h3>
<p>Minden a felkészülés témájáról
...még több tartalom...
<h2>Konfiguráció</h2>
<p>Minden a konfigurációról
...még több tartalom...
</section>
</test>
Az eredménystruktúra a következőképpen néz ki:
1. Telepítés és konfiguráció
1.1 Telepítés
1.1.1 Előfeltételek
1.1.2 Felkészülés
1.2 Konfiguráció
A belső számozás tehát mindig újra 1-nél kezdődik. Az Outline-koncepciót csak a következő elemek érintik:
• article
• aside
• nav
• section
A header és footer elemek azonban kívül esnek.
Figyeljetek arra, hogy az Outline-koncepció jelenleg még nincs támogatva a böngészők által.
A böngészőgyártók azonban csak idő kérdése, hogy itt lépjenek. A Kontúrvázlat-koncepció előnyei túl nagyok lennének. Gondoljatok például az automatikusan generált navigációs sávokra. De az is igaz, hogy: Még akkor is, ha a böngészők jelenleg figyelmen kívül hagyják a megadott formában való strukturálást, már most érdemes logikusan struktúrálni a dokumentumokat. Így egyfajta jövőbiztonságot biztosítotok webhelyeitek számára.
