Galvas un apakšdaļas joma
Galvas un apakšdaļas var tikt definētas, izmantojot elementus header un footer. Lai definētu galvas daļu, tiek izmantots head-elements. Starp citu, tas ne vienmēr jāattiecas uz visu lapas galvdaļu. Arī ar head var apzīmēt citu elementu galvdaļu, piemēram, sekcijas un rakstus.
Uzmanību! Nejauši nelietojiet header ar zināmo head-elementu, ar kuru tiks definēta HTML dokumenta galvdaļa, kurai pievienoti dokumenta nosaukums, stilu lapas un JavaScript izsaukumi.
Visam dokumentam header izskatītos šādi:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
Pielietojot section elementu, iegūsies šādu attēlu:
<section>
<header>
<h1> Web-Apps izveide (Daļa 09): jQuery mobile (1)</h1>
<p> Noteikti jQuery ir viens no pazīstamākajiem JavaScript rīkkopu.
</header>
<p>
Tāpēc "klasiskajās" vietnēs jQuery jau tūkstošiem reižu ir izmantots. Tieši mājaslapām paredzēta tika mājaslapām paredzēta mājaslapām paredzēta mājaslapām paredzēta mājaslapās paredzēta mājaslapās mājaslapās konstruēta šis puisis. Šis ietvars palīdzēs jums ātri pārvērst savu tīmekļa aplikāciju par izskatīgu reālu aplikāciju. Pamatotu no iegājieniem iegāja garš skatījumu jūsu jQM.
</p>
<footer>
<p>Autortiesības pieder PSD-Tutorials.de</p>
</footer>
</section>Noteikti parūpējieties, lai footer un header nesaturētu papildu header un footer elementus.
Apakšvirsrakstu grupēšana
Sekciju kontekstā parādās virsraksti. Šie virsraksti sākumā var būt klasiskie elementi h1 līdz h6. HTML5 ir atļauts arī hgroup-elements. Šajos hgroup-elementos var iekļaut vairākus virsrakstus.
Sāciet ar klasisku HTML dokumentu, kur struktūra, izmantojot hx elementus, tiek definēta.
<h1>
Grāmata
</h1>
<h2>
Nodaļa 1
</h2>
<h2>
Nodaļa 2
</h2>
<h3>
Apakšnodaļa 2.1
</h3>
<h3>
Apakšnodaļa 2.2
</h3>
<h2>
Nodaļa 3
</h2>
Šī definīcija nozīmē sekojošu struktūru:
Grāmata
Nodaļa 1
Nodaļa 2
Apakšnodaļa 2.1
Apakšnodaļa 2.2
Nodaļa 3
Pārlūkprogrammā virsraksti tiek atstāti bez atkāpes.
Īpaši interesants ir hgroup kontekstā ar žurnālistiskiem tekstiem. Šie teksti bieži sastāv no virsraksta, kas sastāv no galvenā virsraksta un jumta vai apakšvirsraksta. Piemērs parāda šo aspektu skaidri.
<hgroup> <h1>Cloud OS</h1> <h2>Tīmeklis kā darbvirsraksts</h2> </hgroup> <p>Šajā raksta sākas satura daļa…</p>
No šī piemēra ir skaidri redzams, ka apakšvirsraksts nesākas ar savu sadaļu raksturu. Tas drīzāk ir raksta virsraksta daļa. Šādas lietas var apkopot, izmantojot hgroup-elementu.
Šajos hgroup elementos atļauti elementi h1 līdz h6.
Kontūru koncepts
Papildus HTML5 ir parādījies kontūru koncepts, kas saistīts ar section- elementu un dažādiem hx-elementiem. Šajā konceptā, kā līdz šim, virsrakstus veido elementi h1 līdz h6, sadalot tos dažādās līmeņos. h1 atbilst augstākajam līmenim, kamēr h6 ir zemākais līmenis. Līmenis turpina skaitīšanu katru reizi, kad tiek definēti hx-elementi iekš section-elementa, tādējādi vienmēr pāriet uz zemāku līmeni.
Kontūru koncepts HTML5 specifikācijā izskatās diezgan sarežģīts, bet tā ideja patiesībā ir diezgan vienkārša. Patiesībā tas ļauj definēt satura aprakstu, kas padara dokumenta struktūru lasāmu datoriem.
<h1>
Nodaļa 1
</h1>
<section>
<h1>
Nodaļa 2
</h1>
<section>
<h1>
Nodaļa 3
</h1>
</section>
</section>
Ar HTML5 kontūra koncepta izriet šāda struktūra:
1. Nodaļa 1
- Nodaļa 2
- Nodaļa 3
- Nodaļa 3
Vēl viens piemērs parādīs efektu. Arī šeit atkal sākotnējais dokumenta variants.
<section>
<h1>Uzstādīšana un konfigurācija</h1>
<section>
<h2>Uzstādīšana</h2>
<p>Viss par uzstādīšanu
</section> <section>
<h2>Konfigurācija</h2>
<p>Šeit jūs atradīsiet visu par konfigurēšanu
</section>
<aside>
<p>Interesantas grāmatas par tēmu...
</aside>
</section>
<footer>
<p>(c) izdo PSD-Tutorials.de
</footer>
</section>
Iegūtā struktūra izskatās šādi:
1. Sadaļa (Uzstādīšana un konfigurācija)
1.1 Sadaļa (Uzstādīšana)
1.2 Sadaļa (Konfigurācija)
1.3 Sadaļa (aside)
- Sadaļa (footer)
Un vēl viens piemērs:
<body>
<h1>Uzstādīšana un konfigurācija</h1>
<h2>Uzstādīšana</h2>
<p>Viss par uzstādīšanu
...vēl vairāk satura...
<section>
<h3>Priekšnosacījumi</h3>
<p>Viss par uzstādīšanas priekšnosacījumiem
...vēl vairāk satura...
<h3>Sagatavošanās</h3>
<p>Viss par sagatavošanos
...vēl vairāk satura...
<h2>Konfigurācija</h2>
<p>Viss par konfigurēšanu
...vēl vairāk satura...
</section>
</body>
Iegūtā struktūra izskatās šādi:
1. Uzstādīšana un konfigurācija
1.1 Uzstādīšana
1.1.1 Priekšnosacījumi
1.1.2 Sagatavošanās
1.2 Konfigurācija
Iekšējais skaitītājs atkal sākas no 1. Konceptuālo kontūru skar tikai šīs elementi:
• article
• aside
• nav
• section
No otras puses, elementi header un footer pagaidām paliek ārpus tā.
Lūdzu, ņemiet vērā, ka HTML kontūra koncepts pagaidām vēl nav atbalstīts pārlūkos.
Taču ir tikai laika jautājums, līdz pārlūku ražotāji rīkosies. Kontūra koncepts nesītu ievērojamus priekšrocības. Piemēram, iedomājieties automātiski radītas navigācijas joslas. Bet pat ja šobrīd pārlūki neņems vērā minēto struktūru, jums jau tagad vajadzētu censties loģiski strukturēt savus dokumentus. Tādējādi jūs arī tagad iegūsiet noteiktu nākotnes drošību savam tīmekļa vietnēm.
