Begrebet "semantisk web" bliver i mellemtiden brugt nærmest inflatorisk. Der er dog mange mennesker, der slet ikke er klar over, hvad denne meget omtalte semantik egentlig handler om. Faktisk er det ganske enkelt: Takket være semantikken kan de nødvendige/ønskede oplysninger faktisk udvindes fra enorme datamængder.
Et håndfast eksempel skal demonstrere vigtigheden af semantikken. Digitale billeder er en fin ting. Umiddelbart efter optagelsen kan de præsenteres over hele verden via internettet. Hvad der gælder privat, er også for længst etableret i professionelle rammer. Billedbureauer, museer, biblioteker og fotografer tilbyder fotos, malerier eller også digitale versioner af værdifulde skrifter via professionelle billed-databaser. På de tilsvarende hjemmesider findes der søgemaskiner, som platformen kan søges igennem. Det mest populære eksempel på en billedsøgemaskine i Web 2.0 er uden tvivl Flickr.
De, der allerede har brugt sådanne billedsøgemaskiner, kender deres begrænsninger: Hvis man f.eks. indtaster udtrykket kål, får man vist billeder fra forskellige områder. Så viser Yahoo! Billedsøgning f.eks. billeder af en mejse, en tennisspiller ved navn Kohl og den tidligere kansler Helmut Kohl.
På dette tidspunkt bliver en af ulemperne ved det klassiske WWW tydelig: For i øjeblikket kan de formidlede oplysninger godt forstås af mennesker, men ikke korrekt fortolkes af maskiner - i det viste eksempel altså søgemaskiner.
Maskiner kan kun læse oplysninger, hvis der rent faktisk er nogen. Og præcis her kommer semantikken ind i billedet.
Strukturering af dokumenter
I tidligere HTML-versioner var der simpelthen ingen mulighed for at strukturere dokumenter semantisk. Hvis man ville strukturere en hjemmeside, havde man faktisk kun overskrifter og tekstafsnit til rådighed. Her er et typisk eksempel på strukturen af en klassisk hjemmeside:
<h1> Kapitel </h1> <p> Afsnit </p> <h2> Underkapitel </h2> <p> Afsnit i underkapitel </h2> <h3>
Til strukturering af et dokument tilbyder HTML elementerne h1 til h6. En virkelig dybt indlejret struktur kan dog ikke oprettes dermed. For element h7 eller h8 er ikke specificeret i HTML. Her kommer HTML5 ind i billedet og introducerer nogle ekstra struktureringselementer.
• article
• aside
• dialog
• figure
• footer
• header
• nav
• section
Disse elementer præsenteres i denne vejledning. Dog først en bemærkning: Forvent ikke mirakler fra disse elementer rent visuelt. For at hjemmesider baseret på semantiske elementer også ser attraktive ud, skal der anvendes CSS. Og vi kommer som bekendt til det senere.
Der er allerede blevet præsenteret nogle semantiske elementer for jer, selvom disse måske ikke umiddelbart har noget at gøre med semantik. Her er et eksempel på et sådant element:
<progress min="0" max="100" value="40"></progress>
Dette element genererer en belastningsbjælke. (For øvrigt er progress-elementet allerede blevet udførligt præsenteret i denne serie).
Dette element viser, hvor let det er at oprette indhold, der kan tildeles en passende kontekst. For software er det nemlig straks genkendeligt, at der er tale om en belastningsbjælke. Det er ikke tilfældet for løsninger, der bruger JavaScript til at generere en belastningsbjælke.
Semantiske elementstrukturer
I "normale" HTML-dokumenter bruges div-elementer til at strukturere indholdet. Disse elementer tildeles klasser eller IDs for at kunne formateres via CSS. Dette princip anvendes også i HTML5. Faktisk har en undersøgelse foretaget af Google vist, at de samme klasser anvendes i mange dokumenter.
Et eksempel:
<div class="nav"></div>
Mange udviklere bruger f.eks. nav til at placere navigationen inden i dette div-element. I HTLM5 ser det imidlertid sådan ud:
<nav>Indhold</nav>
Ved hjælp af nav-elementet bliver det klart, at det ikke bare handler om en liste af hyperlinks. Faktisk beskriver dette element en indholdsblok, hvor der er informationer om hjemmesidens navigation i en bestemt kontekst.
Moderne strukturering
Hvordan ser strukturen af et HTML-dokument egentlig typisk ud? Generelt ligner den sig, uanset hvilket indhold siden til sidst har. Typisk inkluderer den følgende områder:
• Topsektion
• Hovedmenu
• Indholdssektion
• Fodsektion
En hjemmeside, der anvender div-elementer til strukturering, kunne se sådan ud:
<body>
<div id="header">
<div id="logo">Logo</div>
<div id="search">Søg</div>
<div id="nav">Hovedmenu</div>
</div>
<div id="content">
<h1>Dette er indholdet</h1>
<div class="section">
<h2>Overskrift</h2>
<h3>Afsnit</h3>
<!-- Her står indholdet -->
</div>
<div class="section">
<h2>Overskrift</h2>
<!-- Her står indholdet -->
</div>
</div>
<div id="sidebar">
<div id="subnav">Undermenu</div>
</div>
<div id="footer">Fodnote</div>
</body>
De måske allerede kender sådanne div-strukturer. For at gøre strukturen logisk for udviklerne tildeler de de div-områder passende klasser eller IDs, som har "talende" navne. Så for udviklerne er det f.eks. klart, at i div-området med ID'et footer er indholdene, der hører til bundområdet af siden. Problemet her: Navnene kan antyde strukturen af hjemmesiden, men hjemmesiden er stadig ikke semantisk struktureret på den måde. Det er her de nye HTML-elementer kommer ind i billedet. For disse gør det endelig muligt at strukturere dokumenter eller hjemmesider på en virkelig struktureret måde.
For at få en bedre forståelse, se på følgende HTML5-dokument:
<body>
<header>
<div id="logo">Logo</div>
<div id="search">Søg</div>
<nav>Hovedmenu</nav>
</header>
<article>
<h1>Dette er indholdet</h1>
<section>
<h2>Overskrift</h2>
<h3>Afsnit</h3>
<!-- Her står indholdet -->
</section>
<section>
<h2>Overskrift</h2>
<!-- Her står indholdet -->
</section>
</article>
<aside>
<nav>Undermenu</nav>
</aside>
<footer>Fodnote</footer>
</body>
Naturligvis vil jeg i de kommende vejledninger uddybe de elementer, der anvendes her. Alligevel viser dette eksempel allerede, hvor fordelene ved de anvendte elementer ligger. Så kan man endelig udpege siderne med sådanne elementer, der er specielt designet til dem. Alt, hvad der hører til topområdet på siden, kan placeres i et header-element.
Derudover er der nu tilgængelige section- og article-elementer, som giver mulighed for at strukturere de faktiske sideindhold meget bedre. Som I kan se, er det derfor værd at undersøge de muligheder, som HTML5 har at tilbyde med hensyn til semantisk strukturering af dokumenter.
