Begrepet "semantisk web" blir nå brukt tilnærmet inflatorisk. Mange mennesker er faktisk ikke klar over hva denne høytidelige semantikken egentlig handler om. Egentlig er det veldig enkelt: Takket være semantikken kan faktisk nødvendig/ønsket informasjon trekkes ut av enorme datamengder.
Et håndfast eksempel bør demonstrere viktigheten av semantikk. Digitale bilder er flott. Umiddelbart etter opptak kan de vises over hele verden via internett. Det som gjelder privat, har også lenge etablert seg i en profesjonell sammenheng. Bildedatabaser tilbyr bilder, malerier eller også digitale versjoner av verdifulle skrifter fra profesjonelle bildebyråer, museer, biblioteker og fotografer. På de tilsvarende nettsidene er det søkemaskiner som lar plattformen bli gjennomsøkt. Det mest populære eksempelet på en bildesøkemotor på web 2.0 er utvilsomt Flickr.
De som allerede har brukt slike bildesøkemotorer, kjenner begrensningene deres: Hvis man for eksempel skriver inn begrepet Kohl, vises bilder fra forskjellige områder. Slik viser Yahoo! bildesøket bilder av en kullmeis, en tennisspiller ved navn Kohl og den tidligere kansleren Helmut Kohl.
På dette punktet blir en av ulempene med det klassiske WWW tydelig: For øyeblikket kan informasjonen som tilbys forstås av mennesker, men ikke korrekt tolkes av maskiner – i det viste eksempelet altså søkemotorer.
Maskiner kan bare lese informasjon hvis det faktisk er til stede. Og akkurat det er det avgjørende punktet der semantikken kommer inn i bildet.
Strukturere dokumenter
I tidligere HTML-versjoner var det rett og slett ikke mulig å strukturere dokumenter semantisk. Hvis man ønsket å strukturere en nettside, hadde man egentlig bare overskrifter og tekstavsnitt til disposisjon. Her er et typisk eksempel på strukturen til en klassisk nettside:
<h1> Kapittel </h1> <p> Avsnitt </p> <h2> Underkapittel </h2> <p> Avsnitt i underkapittel </h2> <h3>
HTML tilbyr elementer som h1 til h6 for dokumentstrukturering. Med disse elementene er det imidlertid ikke mulig å opprette en virkelig dypt strukturert struktur. Et element som h7 eller h8 er nemlig ikke gitt i HTML. Nettopp her kommer HTML5 inn og introduserer noen ekstra strukturelle elementer.
• article
• aside
• dialog
• figure
• footer
• header
• nav
• section
Disse elementene vil bli presentert i denne opplæringen. Men først en merknad: Forvent ikke mirakler visuelt sett fra disse elementene. For at nettsider basert på semantiske elementer skal se tiltalende ut, må CSS brukes. Og det vil vi komme tilbake til senere vel kjent.
Noen semantiske elementer har du allerede blitt kjent med, selv om disse kanskje ikke nødvendigvis har noe med semantikk å gjøre ved første øyekast. Her er et eksempel på et slikt element:
<progress min="0" max="100" value="40"></progress>
Dette genererer en fremdriftslinje. (Forresten, progress-elementet har allerede blitt grundig presentert i denne serien).
Dette elementet viser tydelig hvordan innhold kan opprettes med minimal innsats, som kan tilordnes en passende sammenheng. For programvare er det nemlig umiddelbart klart at det dreier seg om en fremdriftslinje. Dette er imidlertid ikke tilfelle for løsninger som er avhengige av JavaScript for å generere en fremdriftslinje.
Semantiske elementstrukturer
I "normale" HTML-dokumenter brukes div-elementer for strukturering av innholdet. Disse elementene tildeles klasser eller ID-er for å kunne formatere dem ved hjelp av CSS. Dette prinsippet utnyttes også i HTML5. Faktisk har en undersøkelse utført av Google vist at de samme klassene brukes i mange dokumenter.
Et eksempel:
<div class="nav"></div>
Mange utviklere bruker for eksempel nav for å plassere navigasjonen innenfor dette div-elementet. I HTML5 ser det imidlertid slik ut:
<nav>Innhold</nav>
Gjennom nav-elementet er det tydelig at dette ikke bare inneholder en liste med hyperkoblinger. Faktisk beskriver dette elementet en innholdsblokk der informasjonen om nettsidens navigasjon er inneholdt innenfor et bestemt kontekst.
Moderne strukturering
Hvordan ser typisk strukturen til et HTML-dokument ut? Grunnleggende sett ligner dette, uavhengig av hvilket innhold siden til slutt har. Vanligvis inkluderer de følgende områdene:
• Toppområdet
• Hovedmeny
• Innholdsområde
• Bunnområdet
En nettside som bruker div-elementer for strukturering, kan se slik ut:
<body>
<div id="header">
<div id="logo">Logo</div>
<div id="search">Søk</div>
<div id="nav">Hovedmeny</div>
</div>
<div id="content">
<h1>Dette er innholdet</h1>
<div class="section">
<h2>Overskrift</h2>
<h3>Absnitt</h3>
<!-- Her står innholdet -->
</div>
<div class="section">
<h2>Overskrift</h2>
<!-- Her står innholdet -->
</div>
</div>
<div id="sidebar">
<div id="subnav">Undermeny</div>
</div>
<div id="footer">Fotnote</div>
</body>
Dere kjenner kanskje allerede til slike div-strukturer. For at strukturen skal være logisk for utviklerne, tildeles de div-områdene passende klasser eller ID-er med "talende" navn. På denne måten er det for eksempel tydelig for utviklerne at innholdet bak ID-en footer i div-området hører til bunnen av siden. Problemet er at navnene kan gi en antydning om strukturen på nettstedet, men selve nettstedet er ikke semantisk strukturert slik. Her kommer de nye HTML-elementene inn i bildet. Disse muliggjør for første gang en virkelig strukturering av dokumenter eller nettsteder.
For å bedre forstå dette, se på følgende HTML5-dokument:
<body>
<header>
<div id="logo">Logo</div>
<div id="search">Søk</div>
<nav>Hovedmeny</nav>
</header>
<article>
<h1>Dette er innholdet</h1>
<section>
<h2>Overskrift</h2>
<h3>Avsnitt</h3>
<!-- Her står innholdet -->
</section>
<section>
<h2> Overskrift</h2>
<!-- Her står innholdet -->
</section>
</article>
<aside>
<nav>Undermeny</nav>
</aside>
<footer>Fotnote</footer>
</body>
Jeg kommer selvfølgelig til å gå nærmere inn på de brukte elementene i de kommende opplæringene. Likevel viser allerede dette eksempelet hvor fordelene med disse elementene ligger. Nå kan man endelig merke sidens områder med slike elementer som er spesifikke for dem. Alt som hører til toppen av siden, kan integreres i et header-element.
I tillegg er det nå tilgjengelig section- og article-elementer, som gjør det mulig å strukturere selve sideinnholdet på en mye bedre måte. Som dere ser, er det derfor verdt å utforske mulighetene som HTML5 tilbyr når det gjelder den semantiske struktureringen av dokumenter.
