Sanan "semanttinen web" käyttö on nykyisin lähes inflaatiomaista. Monelle ei ole edes selvää, mitä tämä niin ylistetty semanttisuus tarkoittaa. Asia on oikeastaan hyvin yksinkertainen: Semantiikan ansiosta valtavista tietomassoista voidaan todellakin kaivaa tarvittavat/halutut tiedot.
Kädenlämpöinen esimerkki demonstroi semantiikan tärkeyttä. Digikuvat ovat hieno juttu. Ottamisen jälkeen niitä voi jakaa koko maailman kanssa Internetissä. Mitä pätee yksityiselämässä, on jo vakiintunutta myös ammatillisessa ympäristössä. Kuvatoimistot, museot, kirjastot ja valokuvaajat tarjoavat kuvia, maalauksia tai arvokkaiden tekstimateriaalien digitaaliversiota ammattimaisissa kuvatietokannoissa. Vastaavilla verkkosivustoilla on sitten hakupalkkeja, joiden avulla sivustoa voidaan selata. Web 2.0:n suosituin esimerkki kuvahakukoneesta on varmasti Flickr.
Jotka ovat käyttäneet tällaisia kuvahakukoneita, tuntevat niiden rajat: Jos esimerkiksi syöttää hakukenttään sanan Kohl, saa näytölle kuvia monilta eri aloilta. Yahoo!-kuvahaku esimerkiksi esittää kuvia kaalintalitiaisesta, tennispelaajasta nimeltä Kohl sekä entisestä liittokanslerista Helmut Kohlista.
Tässä kohdassa yksi klassisen WWW:n haitoista tulee ilmi: Tällä hetkellä tarjotut tiedot voidaan kyllä ymmärtää ihmisiltä, mutta koneet - tässä tapauksessa siis hakukoneet - eivät osaa tulkita niitä oikein.
Koneet voivat lukea tietoja ainoastaan silloin, kun niitä todella on olemassa. Ja juuri tässä kohtaa semantiikka astuu kuvaan.
Dokumenttien jäsentäminen
Aikaisemmissa HTML-versioissa ei yksinkertaisesti ollut mahdollista jäsentää dokumentteja semanttisesti. Jos halusi jäsentää verkkosivuston, oli käytettävissä oikeastaan vain otsikoita ja tekstikappaleita. Tässä on esimerkki perinteisen verkkosivuston rakenteesta:
<h1> Luku </h1> <p> Kappale </p> <h2> Alaluku </h2> <p> Kappale alaluvussa </h2> <h3>
HTML tarjoaa dokumenttien jäsentämiseen muun muassa elementit h1 aina h6 saakka. Näillä elementeillä ei kuitenkaan voi luoda todella syvästi lomittuvaa rakennetta. Nimittäin HTML:ssä ei ole varattu elementille h7 tai h8. Täsmälleen tähän HTML5 tarttuu ja tuo mukanaan joitakin lisäjäsentelyelementtejä.
• article
• aside
• dialog
• figure
• footer
• header
• nav
• section
Nämä elementit esitellään tässä oppaassa. Ennen sitä kuitenkin yksi huomautus: Älkää odottako visuaalisesti mitään ihmeitä näiltä elementeiltä. Myös semanttisilla elementeillä perustuvien verkkosivustojen on käytettävä CSS:ää näyttäkseen houkuttelevilta. Ja siihen palaamme tietenkin myöhemmin.
Joitakin semanttisia elementtejä olette jo oppineet tuntemaan, vaikka ne eivät välttämättä olekaan ensisilmäyksellä suorassa yhteydessä semantiikkaan. Tässä esimerkki yhdestä tällaisesta elementistä:
<progress min="0" max="100" value="40"></progress>
Tämä luo latauspalkin. (Muuten progress-elementti on esitelty jo tässä artikkelisarjassa perusteellisesti).
Tämä elementti osoittaa, miten vähällä vaivalla voidaan luoda sisältöjä, jotka voidaan liittää tiettyyn kontekstiin. Sovelluksille on nimittäin suoraan tunnistettavissa, että kyseessä on latauspalkki. Ratkaisuissa, joiden avulla latauspalkki generoidaan JavaScript-pohjaisesti, näin ei ole.
Semanttiset elementtirakenteet
"Normaaleissa" HTML-tiedostoissa rakenteen jäsentämiseen palataan div-elementteihin. Näille elementeille määritetään, jotta niitä voidaan muotoilla CSS:n avulla, luokkia tai tunnisteita. Tämä periaate on hyödynnetty myös HTML5:ssä. Itse asiassa Googlen tekemä kysely osoitti, että monissa dokumenteissa käytetään aina samoja luokkia.
Esimerkki:
<div class="nav"></div>
Monet kehittäjät käyttävät esimerkiksi nav navigoinnin sisällön sijoittamiseen tämän div-elementin sisään. HTLM5:ssä se näyttää kuitenkin tältä:
<nav>Sisältö</nav>
nav-elementin ansiosta käy selväksi, että kyseessä ei ole pelkästään hyperlinkkiluettelo. Itse asiassa tämä elementti kuvaa sisällöllistä lohkoa, jossa verkkosivuston navigointitiedot ovat tietyssä kontekstissa.
Moderni jäsentäminen
Miten tyypillinen HTML-dokumentin rakenne näyttää? Periaatteessa se on samanlainen, riippumatta siitä, mitä sisältöjä sivulle lopulta tulee. Useimmiten seuraavat osiot sisältyvät:
• Ylävalikko
• Päävalikko
• Sisältölohko
• Alalohko
Verkkosivusto, joka käyttää rakenteen jäsentelyssä div-elementtejä, voisi näyttää tältä:
<body>
<div id="header">
<div id="logo">Logo</div>
<div id="search">Haku</div>
<div id="nav">Päävalikko</div>
</div>
<div id="content">
<h1>Tämä on sisältöä</h1>
<div class="section">
<h2>Otsikko 1</h2>
<h3>Osio 1</h3>
<!-- Tässä on sisältöä -->
</div>
<div class="section">
<h2>Otsikko 2</h2>
<!-- Tässä on sisältöä -->
</div>
</div>
<div id="sidebar">
<div id="subnav">Alivalikko</div>
</div>
<div id="footer">Alatunniste</div>
</body>
Jo tunnette ehkä tällaiset div-rakenteet. Jotta rakenne olisi kehittäjille looginen, he antavat div-alueille asiaankuuluvat luokat tai tunnisteet, joilla on "puhuvat" nimet. Näin kehittäjille on esimerkiksi selvää, että footer-tunnisteella varustetussa div-alueessa on sisältöä, joka kuuluu sivuston alatunnisteeseen. Ongelmana on kuitenkin se, että nimet saattavat vihjata verkkosivuston rakenteeseen, mutta sivusto ei ole vielä semanttisesti rakennettu. Tässä uudet HTML-elementit tulevat kuvaan. Nämä mahdollistavat dokumenttien ja verkkosivujen todellisen rakenteen ensimmäistä kertaa.
Saadaksenne paremman käsityksen tarkastelkaa seuraavaa HTML5-dokumenttia:
<body>
<header>
<div id="logo">Logo</div>
<div id="search">Haku</div>
<nav>Päävalikko</nav>
</header>
<article>
<h1>Tämä on sisältöä</h1>
<section>
<h2>Otsikko 1</h2>
<h3>Osio 1</h3>
<!-- Tässä on sisältöä -->
</section>
<section>
<h2> Otsikko 2</h2>
<!-- Tässä on sisältöä -->
</section>
</article>
<aside>
<nav>Alivalikko</nav>
</aside>
<footer>Alatunniste</footer>
</body>
Tietysti perehdyn seuraavissa oppaissa käytettyihin elementteihin. Silti jo tämä esimerkki osoittaa, missä valitettavasti käytettyjen elementtien edut ovat. Nyt voidaan viimein merkitä sivuston osa-alueet elementeillä, jotka on tarkoitettu nimenomaan näitä varten. Kaikki, mikä kuuluu sivuston yläosaan, voidaan upottaa header-elementtiin.
Nyt on myös käytettävissä section- ja article-elementit, joiden avulla varsinaisia sivusisältöjä voidaan jäsentää huomattavasti paremmin. Näette siis, että on kannattavaa tutkia perusteellisesti HTML5:n tarjoamia mahdollisuuksia dokumenttien semanttiseen rakenteeseen liittyen.
