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

Tällä hetkellä HTML-dokumentteja rakennetaan pääasiassa div-elementtien avulla. Näiden konttien muotoilu ja sijoittelu tapahtuvat yleensä CSS:n avulla. Tämä lähestymistapa on hyödytön esimerkiksi Screenreader-ohjelmille, koska ne eivät pysty tunnistamaan tiettyjen sisältöjen merkitystä. Uudet rakenteelliset elementit muuttavat tätä.

Kaksi tärkeintä uutta elementtiä ovat section ja article, jotka ovat tämän opetusohjelman keskiössä.

Artikkelin merkitseminen

Artikkelielementin avulla voidaan merkitä tekstit (keskustelupalstan viestit, sanomalehtiartikkelit jne.) artikkeleiksi. Seuraava esimerkki näyttää tyypillisen artikkelin määritelmän.

<article>
   <h1>Web-sovellusten luominen (osa 09): jQuery mobile (1)</h1>
   <p>jQuery on epäilemättä yksi tunnetuimmista JavaScript-kehyksistä. ”Perinteisillä” verkkosivustoilla jQueryä käytetään jo tuhansittain ...</p>
   ...
</article>

Artikkelielementin avulla voit siis jäsentää sisältöä semanttisesti.

Näitä voitaneen havainnollistaa erittäin hyvin blogiesimerkillä.

<article>
  <header>
    <h1>Web-sovellusten luominen (osa 09): jQuery mobile (1)</h1>
    <p>Julkaistu: <time pubdate="pubdate">24.05.2014</time></p>
  </header>
  <p>jQuery on epäilemättä yksi tunnetuimmista JavaScript-kehyksistä. ”Perinteisillä” verkkosivustoilla jQueryä käytetään jo tuhansittain ...</p>
  ...
  <footer>
    <p><small>Tekijänoikeus © PSD-Tutorials.de</small></p>
  </footer>
</article>

Tässä esimerkissä article-elementissä tehdään hyvin tyypillinen jako otsake-, pää- ja alaosan välillä. Tällainen jako on hyvin yleinen blogeissa.

Osa-alueiden luominen

Seuraavaksi käsitellään section-elementtiä. Section-elementti jakaa sivun eri osiin. Nämä osat voivat olla esimerkiksi osioita, lukuja, välilehtiä jne. Section avulla voidaan mm. loogisesti erottaa osiot kuten johdanto ja ajankohtaiset tiedotteet toisistaan.

section jakaa sisällön todellisten sisällöllisten näkökohtien perusteella. Puhun vielä erosta section- ja div-elementtien välillä tämän opetusohjelman lopussa.

Seuraava esimerkki näyttää tyypillisen blogirakenteen. Tässä rakenteessa on kuitenkin vielä jotain, mitä monissa blogeissa todella tarvitaan eli kommenttiosio. Tämä kommenttiosio on määritelty section-elementin sisällä. Yksittäiset kommentit section-osiossa puolestaan sijoitetaan article-elementtiin.

<article>
  <header>
    <h1>Web-sovellusten luominen (osa 09): jQuery mobile (1)</h1>
    <p>Julkaistu: <time pubdate="pubdate">24.05.2014</time></p>
  </header>
    <p>jQuery on epäilemättä yksi tunnetuimmista JavaScript-kehyksistä. ”Perinteisillä” verkkosivustoilla jQueryä käytetään jo tuhansittain...</p>
  ...

  <section>
    <h2>Kommentit</h2>
    <article>
      <header>
      <h3>Kommentoi käyttäjä: Uutiskaveri</h3>
      <p><time pubdate datetime="2024-10-05T20:10-07:00">Tunti sitten</time></p>
    </header>
    <p>Kiitos opetusohjeesta!</p>
    </article>
    <article>
      <header>
      <h3>Kommentoi käyttäjä: Becker</h3>
      <p><time pubdate datetime="2024-10-05T20:10-07:00">Kaksi tuntia sitten</time></p>
    </header>
    <p>Mahtavaa! Tämä auttaa minua eteenpäin.</p>
    </article>
  </section>
</article>

Tässä vielä huomautus, että puhun tässä käytetyistä elementeistä kuten header, footer jne. vielä yksityiskohtaisemmin. Tällä hetkellä mainittakoon vain, että näiden elementtien avulla sisällöt voidaan jakaa otsikko- ja alaosioihin, mikä mahdollistaa dokumenttien lisälogisen rakenteen.

Toinen esimerkki havainnollistaa article- ja section-elementtien yhdistämistä edelleen. Todellisuudessa section-elementtiä voidaan käyttää artikkelin jakamiseen loogisiin sisältöalueisiin, joilla on omat otsikot.

<article> 
  <h1>Sovelluskehitys</h1> 
  <p>Täältä saat tietoa siitä, miten Web-sovelluksia voidaan luoda.</p>
  <section> 
     <h2>Web-sovellusten luominen (osa 09): jQuery mobile (1)</h2> 
     <p>jQuery on epäilemättä yksi tunnetuimmista JavaScript-kehyksistä.</p> 
   </section> 
  <section> 
     <h2>Web-sovellusten luominen (osa 08): Pikakäynnistys jQueryssä</h2> 
     <p>JavaScript on hieno asia verkkosivustoilla, sillä sen avulla voidaan tehdä monenlaisia mielenkiintoisia asioita.</p> 
   </section> 
 </article>

On muuten myös mahdollista määritellä section-elementin sisälle article-elementtejä. Tyypillinen esimerkki voisi olla kommenttiosio, kuten aiemmin näytettiin. Kuitenkin myös mahdollista on jakaa osa-alueita, joita blogissa käsitellään.

Tässä jälleen asiaankuuluva esimerkki:

<section>
  <h1>Sovelluskehitys</h1>
  <article> 
     <h2>Web-sovellusten luominen (Osa 09): jQuery mobile (1)</h2> 
     <p>jQuery on epäilemättä yksi tunnetuimmista JavaScript-kehyksistä.</p> 
   </article> 
  <article> 
     <h2>Web-sovellusten luominen (Osa 08): Nopea aloitus jQuery:ssa</h2> 
     <p>JavaScript on hieno juttu verkkosivustoilla, koska sen avulla voi tehdä monenlaisia mielenkiintoisia asioita.</p> 
   </article>    
 </section>

Lisäksi section-elementissä voi olla muita section-elementtejä. Sulautukset ovat siis sallittuja. Myös tähän esimerkki:

<section>
    <h1>PSD-Tutorials.de</h1>
    <section>     
      <h2>Tervetuloa</h2>     
      <p>Olemme iloisia...</p>
    </section>   
    <section>     
      <h2>Ohjeet</h2>
      <P>Täältä löytyvät uusimmat ohjeemme...</p> 
    </section>
    <aside>
      <p>Yhteystiedot</p>
    </aside>
  </section>
  <footer>
    <p>(c) 2014 PSD-Tutorials.de</p>
  </footer>

Tämä section-sulautuminen johtaa seuraavaan rakenteeseen:

1. PSD-Tutorials.de

1.1 Tervetuloa

1.2 Ohjeet

1.3 Yhteystiedot

2. (c) 2014 PSD-Tutorials.de
   
   Tällaiset rakenteet ovat siis myös mahdollisia.
   
   

Erona div, article ja section välillä

Ero div, article ja section välillä ei ole aina helppo ymmärtää. Itse asiassa article-elementti on alun perin määritelty blogipostauksien rakenteelliseen järjestämiseen. Section-elementti on käytännössä tason article alla. Section-elementin sisällä tulisi myös aina määritellä otsikko. Vaikka otsikkoa ei varsinaisesti määritettäisikään, sen tulisi teoriassa olla mahdollista määrittää ko. elementissä.

Vaikka div-elementtejä ei pidä HTML5:ssä paheksua, niitä tulisi edelleen käyttää. Niitä voidaan käyttää esimerkiksi silloin, kun elementit halutaan ryhmitellä yhteen.

Lopuksi vielä maininta siitä, millaisia visuaalisia vaikutuksia tähän mennessä esiteltyillä elementeillä on. Itse asiassa tarvitset CSS:n asianmukaiseen muotoiluun, koska näillä elementeillä ei ole vaikutusta selaimessa. Tällä rakennat sisältöjä ainoastaan semanttisesti. Kaikki, mikä liittyy ulkonäköön, määritellään tyylitiedostoissa.