Viršus ir apačia
Per dvi elementus header ir footer yra apibrėžiamas viršus ir apačia. Norint apibrėžti viršų, naudojamas head-elementas. Beje, tai nebūtina būtinai turi būti visos puslapio viršaus dalis. Taip pat su head galima pažymėti kitų elementų, tokius kaip sekcijų ir straipsnių, viršų.
Dėmesio: Neperkraukite header su gerai žinomu head-elementu, kuriame nurodomas HTML dokumentų viršus, kuriame yra dokumento pavadinimas, stiliaus lapai ir JavaScript skriptai.
Visam dokumentui header naudojimas atrodytų taip:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
Taikant section-elementui, rezultatas būtų toks:
<section>
<header>
<h1> Kūrėjas internetinių programėlių (Dalis 09): jQuery mobile (1)</h1>
<p> jQuery yra vienas iš geriausiai žinomų JavaScript karkasų.</p>
</header>
<p>
"Klasikinėse" svetainėse jau tūkstančius kartų naudojamas jQuery. Specialiai sukurtas naudoti internetinių programėlių karkasą, vadinamąjį jQuery mobile (jQM). Šis karkas padeda jums per akimirksnį jūsų internetinę programėlę paversti į tikrąją programėlę. Tiek daug pagrindo atidžiau pažvelgti į jQM.
</p>
<footer>
<p>Autorių teisės priklauso PSD-Tutorials.de</p>
</footer>
</section>Visada atkreipkite dėmesį, kad footer ir header neturi turėti papildomų header ir footer elementų.
Antraščių grupavimas
Sekcijų kontekste atsiranda antraštės. Šios antraštės gali būti klasikiniai elementai h1 iki h6. Tačiau HTML5 taip pat leidžia naudoti hgroup-elementą. Šių hgroup-elementų viduje taip pat gali būti keletos antraščių.
Pirmiausia pažiūrėkite į klasikinį HTML dokumentą, kuriame "įprastinė" struktūra apibrėžta naudojant hx elementus.
<h1>
Knyga
</h1>
<h2>
1 skyrius
</h2>
<h2>
2 skyrius
</h2>
<h3>
2.1 poskyris
</h3>
<h3>
2.2 poskyris
</h3>
<h2>
3 skyrius
</h2>
Šis apibrėžimas reiškia tokį struktūrą:
Knyga
1 skyrius
2 skyrius
2.1 poskyris
2.2 poskyris
3 skyrius
Naršyklėje antraštės taip pat nebus įtrauktos.
Įdomu, kad hgroup yra ypač svarbus žurnalistinių tekstų kontekste. Toks tekstas dažnai susideda iš dviejų dalis antraštės, kuri sudaryta iš pagrindinio antraštės ir papildomos viršvalandės arba žemvalandės. Pavyzdys padės suprasti šį aspektą.
<hgroup> <h1>Debesų OS</h1> <h2>Tinklas kaip operacinė sistema</h2> </hgroup> <p>Čia prasideda straipsnio turinys ...</p>
hgroup elemento pagalba.
Šioje hgroup elementų nuo h1 iki h6 leidžiama.
Santraukos koncepcija
Papildomai, HTML5 naudoja santraukos koncepciją, kuri apima sąveikos tarp section- su įvairiais hx elementais. Šiame koncepte, kaip ir anksčiau, antraštės, naudojant h1 iki h6 elementus, yra suskirstytos į skirtingas lygi. Čia h1 atitinka viršiaus lygį, o h6 žemiausią lygį. Todėl neiš esminių pokyčių lyginant su praeitimi. Nuo šiol hx elementai gali būti apibrėžiami section elementuose. Kiekvieną kartą pradedama numeracija iš naujo, bet kiekviena karta lyg tiek tampa žemesnė.
Santraukos koncepcija HTML5 specifikacijoje gali atrodyti gana sudėtinga, bet jos idėja yra paprasta. Iš tikrųjų, tai apibrėžia turinio santrauką, kuri padaro dokumento struktūrą mašinoms skaitymui suprantamą.
Turime čia taip pat pavyzdį:
<h1>
Skyrius 1
</h1>
<section>
<h1>
Skyrius 2
</h1>
<section>
<h1>
Skyrius 3
</h1>
</section>
</section>
Pasirinkus HTML5 koncepciją, iš jo kyla toks struktūros modelis:
1. Skyrius 1
- Skyrius 2
- Skyrius 3
- Skyrius 3
Kitas pavyzdys aiškiai parodyti efektą. Taip pat čia vėl pradžioje šaltinis dokumentas.
<section>
<h1>Diegimas ir konfigūravimas</h1>
<section>
<h2>Diegimas</h2>
<p>Viskas apie diegimo temą
</section>
<section>
<h2>Konfigūravimas</h2>
<p>Čia rasite viską apie konfigūravimo temą
</section>
<aside>
<p>Įdomios knygos apie šią temą...
</aside>
</section>
<footer>
<p>(c) by PSD-Tutorials.de
</footer>
</section>
Gauta struktūra atrodo taip:
1. Skyrius (Diegimas ir Konfigūravimas)
1.1 Skyrius (Diegimas)
1.2 Skyrius (Konfigūravimas)
1.3 Skyrius (aside)
- Skyrius (footer)
O ir dar vienas pavyzdys:
<body>
<h1>Diegimas ir konfigūravimas</h1>
<h2>Diegimas</h2>
<p>Viskas apie diegimo temą
...dar daugiau turinio...
<section>
<h3>Reikalavimai</h3>
<p>Viskas apie diegimo reikalavimus
...dar daugiau turinio...
<h3>Parengiamieji darbai</h3>
<p>Viskas apie parengiamuosius darbus
...dar daugiau turinio...
<h2>Konfigūravimas</h2>
<p>Viskas apie konfigūravimo temą
...dar daugiau turinio...
</section>
</body>
Gautos struktūros atrodo taip:
1. Diegimas ir konfigūravimas
1.1 Diegimas
1.1.1 Reikalavimai
1.1.2 Parengiamieji darbai
1.2 Konfigūravimas
Vidaus skaičiavimas prasideda čia visada iš naujo nuo 1. Iš HTML5 koncepcijos yra paveikti tik šie elementai:
• article
• aside
• nav
• section
Tuo tarpu elementai header ir footer lieka nepaveikti.
Prašome atkreipti dėmesį, kad šiuo metu naršyklės dar nepalaiko išsigryninimo koncepcijos.
Tačiau tai tik laiko klausimas, kada naršyklės gamintojai čia įsikiš. Išsigryninimo koncepcijos privalumai būtų per dideli. Pagalvokite apie automatiškai sugeneruotas naršymo juostas. Tačiau net jei naršyklės šiuo metu ignoruoja struktūravimą tokiu būdu, jūs turėtumėte jau dabar bandyti loginai išdėstyti savo dokumentus. Taip jūs iškart gausite tam tikrą ateities garantiją savo tinklalapiams.
