Mõistet "semantiline veeb" kasutatakse praeguseks lausa inflatsiooniliselt. Sealjuures pole paljudele inimestele üldse teadvustatud, milles seisneb see palju kiidetud semantika. Tegelikult on asi väga lihtne: tänu semantikale on võimalik suurtest andmemahtudest tegelikult välja tõmmata vajalikud/soovitud informatsioonid.
Käegakatsutav näide peaks semantika tähtsust demonstreerima. Digifotod on väga mugav asi. Otse peale pildistamist saab neid näidata kogu maailmale interneti kaudu. Mis kehtib eraelus, on juba ammu professionaalses kontekstis juurdunud. Pildiagentuurid, muuseumid, raamatukogud ja fotograafid pakuvad fotosid, maale või ka väärtuslike kirjade digitaalseid versioone läbi professionaalsete pildipankade. Vastavatel veebilehtedel on olemas otsingumasinad, mille kaudu platvormi saab läbi otsida. Kõige populaarsemaks näiteks veebis 2.0 olevas pildiotsingumootoris on kindlasti Flickr.
Kes on juba kasutanud selliseid pildiotsingumootoreid, teab nende piiranguid: Kui sisestatakse näiteks termin Kohl, siis näidatakse pilte erinevatest valdkondadest. Seega kuvab Yahoo! pildiotsing pilte kapsalinnust, tennismängijast Kohlist ning ka kunagisest kantslerist Helmut Kohlist.
Selles punktis saab üks klassikalise veebi WWW puudustest ilmseks: Praegu saavad inimesed pakutavat informatsiooni mõista, ent masinad — antud näite puhul otsingumootorid — ei suuda seda korrektselt tõlgendada.
Masinad saavad informatsiooni lugeda ainult siis, kui see on tõepoolest olemas. Ja just siin tuleb mängu semantika.
Dokumentide struktureerimine
<h1> Pilt </h1> <p> Paragrahv </p> <h2> Alapilt </h2> <p> Alaparagrahv </h2> <h3>
HTML pakub dokumentide struktureerimiseks muu hulgas elemente h1 kuni h6. Tõesti sügavalt pesastatud struktuuri sellega luua aga ei saa. Sest HTML-is pole ette nähtud elemente h7 ega h8. Just siin hakkab HTML5 pihta, tuues sisse mõned lisastruktureerimise elemendid.
• artikkel
• kõrval
• dialoog
• kuju
• jalg
• pealkiri
• nav
• osakond
Neid elemente tutvustatakse selles õpetuses. Enne aga märkus: Needelt elementidelt pole visuaalselt midagi imet oodata. Et veebilehed, mis põhinevad semantilistel elementidel, tunduksid meeldivad, tuleb kasutada CSS-i. Ja selle juurde jõuame teadaolevalt hiljem.
Mõningaid semantilisi elemente olete juba õppinud tundma, isegi kui need võib-olla esmapilgul semantikaga seotud ei tundu. Siin on üks näide sellisest elemendist:
<edusamm min="0" max="100" value="40"></edusamm;>
Seda elemendi abil genereeritakse laadimise riba. (Seda edusamm elementi on muide juba selles seerias põhjalikult tutvustatud).
Selle element näitab selgelt, kui vähe vaeva on vaja sisu luua, mis saab mõnda konkreetset konteksti omistatud. Tarkvara jaoks on nimelt otsekohe näha, et tegu on laadimise ribaga. JavaScripti kasutavate laadimise riba lahenduste puhul seda aga ei juhtu.
Semantilised elemendistruktuurid
Tavapärastes HTML-dokumentides kasutatakse sisu struktureerimiseks tihti
Näide:
<div class="nav"></div;>
Paljud arendajad kasutavad näiteks "nav", et selle "div" elemendi sees paigutada navigatsioon. HTML5-s näeb see aga välja järgmiselt:
<nav>Sisu</nav>
Nav elemendi abil on selge, et tegemist pole ainult hüperlinkide loendiga. Tegelikult kirjeldab see element sisulist plokki, kus on sisu konkreetses kontekstis veebisaidi navigeerimise kohta.
Moderne struktureerimine
Kuidas näeb tüüpiliselt välja HTML-dokumendi struktuur? Põhimõtteliselt on see sarnane sõltumata sellest, milline sisu lõppkokkuvõttes lehel on. Enamasti sisaldab järgmisi osi:
• Päiseala
• Peamenüü
• Sisuosa
• Alumine ala
Veebileht, mis kasutab struktureerimiseks
<body>
<div id="header">
<div id="logo">Logo</div>
<div id="search">Otsing</div>
<div id="nav">Peamenüü</div>
</div>
<div id="content">
<h1>Siin on sisu</h1>
<div class="section">
<h2>Allpealkiri</h2>
<h3>Sektsioon</h3>
<!-- Siin on sisu -->
</div>
<div class="section">
<h2>Allpealkiri</h2>
<!-- Siin on sisu -->
</div>
</div>
<div id="sidebar">
<div id="subnav">Alammenüü</div>
</div>
<div id="footer">Jalusala</div>
</body>
Te olete ehk juba tuttavad selliste div konstruktsioonidega. Arendajate jaoks on struktuur loogiline, kuna div aladel on vastavad klassid või ID-d, mis omavad "rääkivaid" nimesid. Seega on arendajate jaoks selge näiteks, et footer ID-ga div alal on sisu, mis kuulub lehe alumisse ossa. Probleem seisneb selles: nimed võivad viidata veebilehe struktuurile, kuid veebisait pole semantiliselt veel struktureeritud. Just siin hakkavad uued HTML elemendid tööle. Need võimaldavad esmakordselt dokumentide või veebisaitide tõelist struktureerimist.
Paremaks arusaamiseks vaadake järgmist HTML5 dokumenti:
<body>
<header>
<div id="logo">Logo</div>
<div id="search">Otsing</div>
<nav>Peamenüü</nav>
</header>
<article>
<h1>See on sisu</h1>
<section>
<h2>Allpealkiri</h2>
<h3>Sektsioon</h3>
<!-- Siia tuleb sisu -->
</section>
<section>
<h2>Allpealkiri</h2>
<!-- Siia tuleb sisu -->
</section>
</article>
<aside>
<nav>Alammenüü</nav>
</aside>
<footer>Jalusala</footer>
</body>
Mõistagi arutan järgmistel õpetustel siin kasutatud elemente. Siiski näitab see näide juba praegu, kus kasu on kasutatud elementidest. Seega võib lõpuks saate eristada leheosad spetsiaalsete elementidega, mis on mõeldud selle jaoks. Kõik, mis kuulub lehekülje päisossa, võib panna header elemendisse.
Samuti on nüüd saadaval section ja article elemendid, mille abil saab lehe sisu oluliselt paremini struktureerida. Nagu näete, on mõistlik tutvuda HTML5 võimalustega dokumentide semantilise struktureerimise osas.
