HTML ja CSS algajatele (Osa 20): Veebisemantika (3)

Päise- ja jaluseala

Üle header ja footer elementide saab määrata pea- ja jalusealad. Peaala defineerimiseks kasutatakse head elementi. Muide, see ei pea tingimata olema kogu lehe peaala. Samuti saab head abil määrata peaala ka teistele elementidele nagu sektsioonid ja artiklid.

Hoiatus: ärge segage header tuntud head elemendiga, mille kaudu määratakse HTML-dokumentide peaala, mis sisaldab dokumenti pealkirja, stiililehe ja JavaScripti kutsed.

Terve dokumendi korral oleks header kasutamine järgmine:

<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>

Rakendatuna section elemendile näeks see välja järgmine:

<section>
   <header>
      <h1> Veebirakenduste loomine (Osa 09): jQuery mobiil (1)</h1>
      <p> jQuery on kahtlemata üks tuntumaid JavaScripti raamistikke.</p>
   </header>
   <p>
  "Tavalistel" veebisaitidel on jQuery juba tuhandeid kordi kasutatud. Spetsiaalselt veebirakendustes kasutamiseks loodi õde-raamistik jQuery mobiil (jQM). See raamistik aitab teil muuta oma veebirakenduse tõelise rakenduse välimuseks hetkega. Põhjust piiluda jQM-i põhjalikumalt on piisavalt.
   </p>
   <footer>
      <p>© Autoriõigus PSD-Tutorials.de </p>
   </footer>
</section>

Veenduge igal juhul, et footer ja header ei tohi sisaldada lisahdraid ja jaluselemendeid.

HTML & CSS algajatele (Osa 20): Semantika veebis (3)

Pealkirjade grupeerimine

Sektsioonidega seotud olulised osad on pealkirjad. Need pealkirjad võivad olla klassikalised h1 kuni h6 elemendid. HTML5-s on aga lubatud ka hgroup element. Nende hgroup elementide sees võivad omakorda olla mitu pealkirja.

Alustuseks vaadake klassikalist HTML-dokumenti, kus "tavaline" struktuur on defineeritud hx elementide abil.

<h1>
    Raamat
 </h1>
 <h2>
    Peatükk 1
 </h2>
 <h2>
    Peatükk 2
 </h2>
 <h3>
    Alampeatükk 2.1
 </h3>
 <h3>
    Alampeatükk 2.2
 </h3>
 <h2>
    Peatükk 3
 </h2>

See definitsioon tähendab järgmist struktuuri:

Raamat
Peatükk 1
Peatükk 2
Alampeatükk 2.1
Alampeatükk 2.2
Peatükk 3

Brauseris ei jäta pealkirjad siiski tühikut.

HTML ja CSS algajatele (osa 20): Veebilehtede semantika (3)

Erilist tähelepanu väärivad hgroup elemendid eelkõige ajakirjanduslike tekstide kontekstis. Need koosnevad sageli kahest üldpealkirjast, mis koosnevad põhipealkirjast ja katte- või alapealkirjast. Näide selgitab seda aspekti.

<hgroup>
 <h1>Pilv OS</h1>
 <h2;>Võrgukeskkond operatsioonisüsteemina</h2>
</hgroup>
<p>Siin algab artikli sisu ...</p>

Sellest näitest on selgelt näha, et alapealkiri ei alusta artiklis omaette jaotist. Pigem on see osa artikli pealkirjast. Sellist asja annab kokku võtta hgroup elemendiga.

HTML ja CSS algajatele (Osa 20): Veebi semantika (3)

hgroup sees on lubatud elementid h1 kuni h6.

Ülevaatlik kontseptsioon

Lisaks tuleb HTML5-s esile kontseptsioon nimega ülevaatlik kontseptsioon, kus käsitletakse section elementide koostoimet erinevate hx elementidega. Selles kontseptsioonis, nagu seni tavaks, jaotatakse pealkirjad elementide h1 kuni h6 abil erinevateks tasanditeks. Sealjuures vastab h1 kõrgeimale tasandile, samas kui h6 esindab madalaimat taset. Siin pole võrreldes varasemaga muutust. Sest nüüd saab hx elemendid defineerida section elementide sees. Ja iga kord hakkab loendamine uuesti, kuid alati ühe astme võrra sügavamalt.

Ülevaatlik kontseptsioon tundub HTML5 spetsifikatsioonis üsna keeruline, kuid selle idee on tegelikult väga lihtne. Tegelikult saab sellega määratleda kokkuvõtte, mis muudab dokumendistruktuuri masinloetavaks.

Ka siin on näide:

<h1>
    Peatükk 1
 </h1>
 <section>
    <h1>
       Peatükk 2
    </h1>
    <section>
       <h1>
          Peatükk 3
       </h1>
    </section>
 </section>

HTML5 kontuuri kontseptsioonist tuleneb järgmine struktuur:

1. Peatükk 1

Peatükk 2
1. Peatükk 3

Järgmine näide peaks efekti selgitama. Siin on jälle algdokument.

<section>
  <h1>Paigaldus ja seadistamine</h1>
  <section>     
    <h2>Paigaldus</h2>     
      <p>Kõik paigalduse teemal
  </section>     <section>     
    <h2>Seadistamine</h2>
      <p>Siin leiate kõike seadistamise teemal
    </section>
    <aside>
      <p>Huvitavad raamatud teemal...
    </aside>
  </section>
  <footer>
    <p>(c) PSD-Tutorials.de poolt
  </footer>
</section>

Sellest tulenev struktuur näeb välja järgmine:

1. Sektsioon (Paigaldus ja seadistamine)

1.1 Sektsioon (Paigaldus)

1.2 Sektsioon (Seadistamine)

1.3 Sektsioon (kõrvalsaade)

Sektsioon (jalus)

Ja veel üks näide:

<body>
   <h1>Paigaldus ja seadistamine</h1>
   <h2>Paigaldus</h2>
   <p>Kõik paigalduse teema kohta
      ...veel rohkem sisu...
   <section>
     <h3>Eeldused</h3>  
     <p>Kõik paigalduse eelduste kohta
       ...veel rohkem sisu...
     <h3>Ettevalmistused</h3>
       <p>Kõik ettevalmistuste kohta
          ...veel rohkem sisu...
     <h2>Seadistamine</h2>
       <p>Kõik seadistuse kohta
           ...veel rohkem sisu...
   </section>
</body>

Saadud struktuur näeb välja järgmine:

1. Paigaldus ja seadistamine
1.1 Paigaldus
1.1.1 Eeldused
1.1.2 Ettevalmistused
1.2 Seadistamine

Sisemine loendamine algab seega igal juhul uuesti arvust 1. Kontuuri kontseptsioonist mõjutatud on ainult järgmised elemendid:

• artikkel

• kõrvaleht

• nav

• sektsioon

Kuid pealkiri ja jalg jäetakse siiski välja.

Palun pange tähele, et praegu ei toeta brauserid kontuuri kontseptsiooni veel.

HTML ja CSS algajatele (Osa 20): Semantika veebis (3)

Ent see on vaid aja küsimus, millal brauwsitootjad siin tegutsevad. Kontuuri kontseptsiooni eelised oleksid liiga suured. Mõelge näiteks automaatselt genereeritud navigeerimisribadele. Kuid ka praegu kehtib: isegi kui brauserid hetkel struktureerimist ignoreerivad, peaksite juba praegu proovima oma dokumente loogiliselt korraldada. Nii saate oma veebisaitidele kindlustada tulevikku.

HTML ja CSS algajatele (Osa 19): Veebi semantika (2)

HTML & CSS algajatele (osa 21): Semantika veebis (4)