Izraz "spletni semantični splet" se zdaj uporablja skorajda inflacijsko. Pri tem mnogim sploh ni jasno, kaj je ta hvaljena semantika. V resnici je zelo preprosto: Zahvaljujoč semantiki se lahko iz ogromnih količin podatkov dejansko pridobijo potrebne/želene informacije.
Konkretni primer naj prikaže pomembnost semantike. Digitalne fotografije so super zadeva. Takoj po posnetku jih je mogoče predstaviti celemu svetu prek interneta. Tisto, kar velja v zasebnem življenju, je že dolgo uveljavljeno tudi v profesionalnem okolju. Agencije za slike, muzeji, knjižnice in fotografi ponujajo slike, slike ali tudi digitalne različice dragocenih besedil prek profesionalnih slikovnih baz podatkov. Na ustreznih spletnih straneh so na voljo iskalna polja, preko katerih lahko platformo pregledujemo. Najbolj priljubljen primer iskalnika za slike v spletu 2.0 je zagotovo Flickr.
Tisti, ki so že uporabljali takšne iskalnike za slike, poznajo njihove omejitve: Če vnesete na primer izraz zelje, vam pokažejo slike iz različnih področij. Tako Yahoo! iskalnik slik prikaže fotografije zeljnih sinic, teniškega igralca po imenu Kohl in nekdanjega kanclerja Helmuta Kohla.
V tem trenutku postane eden od pomanjkljivosti klasičnega spleta jasen: Trenutno lahko informacije, ki so na voljo, razumejo ljudje, stroji - na primer iskalniki, v prikazanem primeru - pa ne morejo pravilno tolmačiti.
Stroji lahko preberejo informacije le, če so dejansko prisotne. In točno tu pride v poštev semantika.
Strukturiranje dokumentov
V prejšnjih različicah HTML enostavno ni bilo mogoče semantično strukturirati dokumentov. Če ste želeli strukturirati spletno stran, so bile na voljo le naslovi in odstavki besedila. Tukaj je tipičen primer strukture klasične spletne strani:
<h1> Poglavje </h1> <p> Odstavek </p> <h2> Podpoglavje </h2> <p> Odstavek v podpoglavju </p> <h3>
HTML omogoča strukturiranje dokumentov z uporabo elementov h1 do h6. Z njimi ni mogoče ustvariti resnično globoko zasidrane strukture. Elementa h7 ali h8 v HTML preprosto ni. Prav tu vstopi HTML5 in uvaja nekaj dodatnih strukturnih elementov.
• article
• aside
• dialog
• figure
• footer
• header
• nav
• section
Te elemente bomo predstavili v tem vadnici. Pred tem pa še ena opomba: Ne pričakujte, da boste od teh elementov dobili čudeže glede videza. Da bodo spletne strani, ki temeljijo na semantičnih elementih, vizualno privlačne, moramo uporabiti CSS. In o tem bomo govorili pozneje.
Nekatere semantične elemente ste že spoznali, čeprav na prvi pogled morda nimajo nič skupnega s semantiko. Tukaj je primer takšnega elementa:
<progress min="0" max="100" value="40"></progress>
Z njim se ustvari vrstica napredka. (Element progress smo sicer že podrobno predstavili v tej seriji).
Ta element jasno pokaže, kako enostavno je ustvariti vsebine, ki jih je mogoče dodeliti ustreznemu kontekstu. Programska oprema namreč takoj prepozna, da gre za vrstico napredka. Pri rešitvah, ki temeljijo na JavaScriptu za ustvarjanje vrstice napredka, pa to ni tako očitno.
Semantične strukture elementov
V "običajnih" HTML dokumentih se za strukturiranje vsebin uporabljajo elementi div. Te elemente označimo z razredi ali identifikatorji, da jih lahko oblikujemo s CSS. To načelo se uporablja tudi v HTML5. Dejansko je anketa, ki jo je opravil Google, pokazala, da se v mnogih dokumentih vedno uporabljajo enaki razredi.
Primer:
<div class="nav"></div>
Veliko razvijalcev na primer uporablja element nav, da v tem elementu div umesti navigacijo. V HTML5 to izgleda takole:
<nav>Vsebina</nav>
Z elementom nav je jasno, da gre za več kot le seznam hiperpovezav. Dejansko ta element opisuje vsebinski blok, v katerem so informacije o navigaciji spletne strani v zelo določenem kontekstu.
Moderna strukturiranje
Kakšna je običajno struktura HTML dokumenta? V osnovi je ta struktura podobna, ne glede na to, kakšne vsebine končno vsebuje stran. Najpogosteje so vključeni naslednji deli:
• Glava
• Glavni meni
• Vsebinsko območje
• Noga
Spletna stran, ki se za strukturiranje zanaša na elemente div, bi lahko izgledala tako:
<body>
<div id="header">
<div id="logo">Logo</div>
<div id="search">Iskanje</div>
<div id="nav">Glavni meni</div>
</div>
<div id="content">
<h1>To je vsebina</h1>
<div class="section">
<h2>Podnaslov</h2>
<h3>Odstavek</h3>
<!-- Tukaj je vsebina -->
</div>
<div class="section">
<h2>Podnaslov</h2>
<!-- Tukaj je vsebina -->
</div>
</div>
<div id="sidebar">
<div id="subnav">Podmeni</div>
</div>
<div id="footer">Noga</div>
</body>
Take div strukture morda že poznate. Da je struktura logična za razvijalce, dodelijo div območjem ustrezne razrede ali ID-je, ki imajo "govoreča" imena. Tako je za razvijalce na primer jasno, da v območju div z ID-jem footer vsebine, ki pripadajo dnu strani. Težava: Imena sicer nakazujejo strukturo spletne strani, vendar strukturirano spletna stran v tem primeru v resnici še ni. Novi elementi HTML pa vstopajo ravno tu. Ti namreč omogočajo prvič resnično strukturiranje dokumentov oz. spletnih strani.
Za boljše razumevanje si oglejte naslednji HTML5 dokument:
<body>
<header>
<div id="logo">Logo</div>
<div id="search">Iskanje</div>
<nav>Glavni meni</nav>
</header>
<article>
<h1>To je vsebina</h1>
<section>
<h2>Podnaslov</h2>
<h3>Odstavek</h3>
<!-- Tukaj je vsebina -->
</section>
<section>
<h2>Podnaslov</h2>
<!-- Tukaj je vsebina -->
</section>
</article>
<aside>
<nav>Podmeni</nav>
</aside>
<footer>Noga</footer>
</body>
Seveda bom v nadaljnjih vadnicah obravnaval uporabljene elemente. Kljub temu že ta primer kaže prednosti uporabljenih elementov. Na ta način je mogoče končno označiti območja strani z elementi, ki so zanje zasnovani. Vse, kar spada v glavo strani, lahko vključimo v element header.
Poleg tega so zdaj na voljo elementi section in article, ki omogočajo veliko boljšo strukturiranje dejanskih vsebin strani. Kot vidite, je zato smiselno podrobneje preučiti možnosti, ki jih HTML5 ponuja glede semantične strukturiranosti dokumentov.
