HTML & CSS aloittelijoille (Osa 20): Semantiikka webissä (3)

Otsikko- ja alaosa

Määritelläksesi otsikko- ja alaosa-elementit käytä header- ja footer-elementtejä. Otsikon määrittämiseen käytetään head-elementtiä. Tässä yhteydessä kyse ei välttämättä ole sivun koko otsikosta. Samoin voit merkitä head-elementillä myös muiden elementtien, kuten osioiden ja artikkelien, otsikot.

Huomioi: Älä sekoita header-elementtiä tunnettuun head-elementtiin, jolla määritellään HTML-dokumenttien otsikkotiedot, tyylitiedostot ja JavaScript-kutsut.

Koko dokumentissa header-elementin käyttö olisi seuraava:

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

Käytettynä section-elementtiin, tilanne näyttäisi seuraavalta:

<section>
   <header>
      <h1> Web-Apps erstellen (Teil 09): jQuery mobile (1)</h1>
      <p> jQuery ist zweifellos eines der bekanntesten JavaScript-Frameworks.</p>
   </header>
   <p> "Tavanomaisilla" verkkosivuilla jQueryä käytetään jo tuhansittain kertoja. Erityisesti Web-sivujen sovelluksille suunniteltu sisko-ohjelmisto jQuery mobile (jQM) auttaa sinua tekemään Web-sivustostasi näyttävän aivan kuin aito sovellus. Riittävä syy tarkastella jQM:ää perusteellisesti.
   </p>
   <footer>
      <p>Tekijänoikeus PSD-Tutorials.de</p>
   </footer>
</section>

Varmista, että footer- ja header-elementit eivät saa sisältää ylimääräisiä header- tai footer-elementtejä.

HTML & CSS aloittelijoille (Osa 20): Semantiikka verkkoon (3)

Otsikkojen ryhmittely

Osioihin liittyen otsikot ovat tärkeitä. Nämä otsikot voivat aluksi olla perinteiset elementit h1 - h6. HTML5:ssä on kuitenkin myös sallittua käyttää hgroup-elementtiä. Nämä hgroup-elementit voivat sisältää useita otsikoita.

Aloita tutustumalla perinteiseen HTML-dokumenttiin, jossa "tavallinen" rakenne määritellään käyttämällä hx-elementtejä.

<h1>
    Kirja
 </h1>
 <h2>
    Luku  1
 </h2>
 <h2>
    Luku 2
 </h2>
 <h3>
    Alaotsikko 2.1
 </h3>
 <h3>
    Alaotsikko 2.2
 </h3>
 <h2>
    Luku 3
 </h2>

Tämä määritelmä vastaa seuraavaa rakennetta:

Kirja
Luku 1
Luku 2
Alaotsikko 2.1
Alaotsikko 2.2
Luku 3

Selaimessa otsikoita ei kuitenkaan sisennetä.

HTML & CSS aloittelijoille (osa 20): Semantiikka webiin (3)

Erityisen mielenkiintoinen on hgroup erityisesti journalististen tekstien yhteydessä. Nämä koostuvat usein kahdesta osasta, päätunnusta ja harvinaisemmin käytetystä kattotunnuksesta. Esimerkki selventämään tätä näkökulmaa.

<hgroup>
 <h1>Pilvi-OS</h1>
 <h2>Web käyttöjärjestelmänä</h2>
</hgroup>
<p>Artikkelin sisältö alkaa tästä...</p>

Tästä esimerkistä on selvää, että kattotunnus ei johdata omaa osiota artikkelissa. Päinvastoin, kyseessä on osa artikkelin otsikkoa. Tällaista voidaan tiivistää hgroup-elementin avulla.

HTML & CSS aloittelijoille (osa 20): Semantiikka verkkoon (3)

hgroup-elementissä sallitaan elementit h1 - h6.

Outline-konsepti

Lisäksi HTML5:ssä tulee mukaan Outline-konsepti, jossa puhutaan section- ja erilaisten hx-elementtien yhteisvaikutuksesta. Tässä konseptissa otsikot jaetaan h1- ja h6-elementeillä eri tasoille, kuten aiemmin. h1 vastaa ylimmälle tasolle, kun taas h6 edustaa alinta tasoa. Tässä ei siis ole muutosta verrattuna aikaisempaan. Nyt kuitenkin hx-elementit voidaan määrittää section-elementtien sisällä. Ja joka kerta laskenta alkaa alusta, mutta aina yhden tason alempana.

Outline-konsepti voi näyttää HTML5-spesifikaatiossa monimutkaiselta, mutta sen takana oleva idea on yksinkertainen. Tämä mahdollistaa sisällysluettelon määrittämisen, joka tekee dokumentin rakenteesta koneen luettavissa.

Tässä myös esimerkki.

<h1>
    Luku 1
 </h1>
 <section>
    <h1>
       Luku 2
    </h1>
    <section>
       <h1>
          Luku  3
       </h1>
    </section>
 </section>

HTML5:n ääriviivakonseptin ansiosta seuraa seuraava rakenne:

1. Luku 1

Luku 2
1. Luku 3

Toinen esimerkki havainnollistaa vaikutusta. Tässä ensin alkuperäinen asiakirja.

<section>
  <h1>Asennus ja määritys</h1>
  <section>     
    <h2>Asennus</h2>     
      <p>Kaikki asennukseen liittyvä
  </section>     <section>     
    <h2>Määritys</h2>
      <p>Täältä löydät kaiken määrityksestä
    </section>
    <aside>
      <p>Mielenkiintoisia kirjoja aiheesta...
    </aside>
  </section>
  <footer>
    <p>(c) by PSD-Tutorials.de
  </footer>
</section>

Tästä seuraava rakenne näyttää seuraavalta:

1. Osa (Asennus ja määritys)

1.1 Osa (Asennus)

1.2 Osa (Määritys)

1.3 Osa (sivupalkki)

Osa (alaosa)

Ja vielä yksi esimerkki:

<body>
   <h1>Asennus ja määritys</h1>
   <h2>Asennus</h2>
   <p>Kaikki aiheeseen liittyvä asennus
      ...vielä enemmän sisältöä...
   <section>
     <h3>Edellytykset</h3>  
     <p>Kaikki asennusedellytykset
       ...vielä enemmän sisältöä...
     <h3>Valmistelut</h3>
       <p>Kaikki valmisteluihin liittyvä
          ...vielä enemmän sisältöä...
     <h2>Määritys</h2>
       <p>Kaikki määrityksestä
           ...vielä enemmän sisältöä...
   </section>
</body>

Tulosturakenne näyttää seuraavalta:

1. Asennus ja määritys
1.1 Asennus
1.1.1 Edellytykset
1.1.2 Valmistelut
1.2 Määritys

Sisäinen numeroitu laskenta alkaa joka kerta uudestaan 1. Ääriviivakonseptista vaikuttavat vain nämä elementit:

• article

• aside

• nav

• section

Kuitenkin header ja footer jäävät ulkopuolelle.

Huomioikaa, että selaimet eivät vielä tue ääriviivakonseptia.

HTML ja CSS aloittelijoille (osa 20): Semantiikkaa verkkoon (3)

Näin ei kuitenkaan kestä kauan ennen kuin selainvalmistajat toimivat tässä asiassa. Ääriviivakonseptin edut olisivat liian suuret. Ajattele esimerkiksi automaattisesti luotuja navigointipalkkeja. Mutta joka tapauksessa pätee: Vaikka selaimet toistaiseksi ohittavat sivurakenteen mainitussa muodossa, kannattaa jo nyt yrittää järkevästi strukturoita dokumentteja. Niin saat samalla tietyn tulevaisuuteen suuntautuvan turvallisuuden sivustoillesi.

HTML & CSS aloittelijoille (Osa 19): Semantiikka verkkoon (2)

HTML & CSS aloittelijoille (Osa 21): Semantiikka verkkoon (4)