De term "semantisch web" wordt inmiddels bijna inflationair gebruikt. Veel mensen zijn zich echter niet bewust van de betekenis van deze veelgeprezen semantiek. Eigenlijk is het heel eenvoudig: dankzij de semantiek kunnen daadwerkelijk de benodigde/gewenste informatie uit enorme hoeveelheden gegevens worden gehaald.
Een concreet voorbeeld moet het belang van semantiek aantonen. Digitale foto's zijn erg handig. Direct na het maken ervan kunnen ze via het internet aan de hele wereld worden getoond. Wat geldt voor privégebruik heeft zich ook al lang gevestigd in een professionele setting. Beeldbanken, musea, bibliotheken en fotografen bieden foto's, schilderijen of zelfs digitale versies van waardevolle geschriften aan via professionele beeldbanken. Op de bijbehorende websites zijn dan zoekmaskers beschikbaar waarmee de platform doorzoekbaar is. Een van de populairste voorbeelden van een beeldzoekmachine in web 2.0 is ongetwijfeld Flickr.
Wie dergelijke beeldzoekmachines al heeft gebruikt, kent hun beperkingen: als je bijvoorbeeld het woord kool invoert, krijg je foto's uit verschillende gebieden te zien. Zo toont de Yahoo!-beeldzoekfunctie foto's van een koolmees, een tennisser met de naam Kohl en de voormalige bondskanselier Helmut Kohl.
Op dit punt wordt een van de nadelen van het klassieke WWW duidelijk: op dit moment kunnen de verstrekte informatie begrepen worden door mensen, maar niet correct geïnterpreteerd worden door machines - in het gegeven voorbeeld zoekmachines.
Machines kunnen alleen informatie uitlezen als er ook daadwerkelijk informatie beschikbaar is. En precies dit is het punt waar semantiek om de hoek komt kijken.
Documenten structureren
In eerdere HTML-versies was er eenvoudigweg geen manier om documenten semantisch te structureren. Als je een webpagina wou structureren, had je eigenlijk alleen koppen en tekst alinea's tot je beschikking. Hier is een typisch voorbeeld van de structuur van een klassieke webpagina:
<h1> Hoofdstuk </h1> <p> Alinea </p> <h2> Subhoofdstuk </h2> <p> Alinea in subhoofdstuk </h2> <h3>
HTML biedt onder andere de elementen h1 tot h6 voor het structureren van een document. Met deze elementen kan echter geen echt diepe structuur worden gemaakt. Want een element h7 of h8 is niet voorzien in HTML. Hier komt HTML5 om de hoek kijken en introduceert enkele aanvullende structuurelementen.
• article
• aside
• dialog
• figure
• footer
• header
• nav
• section
Deze elementen worden in deze tutorial gepresenteerd. Maar eerst nog een opmerking: verwacht visueel gezien geen wonderen van deze elementen. Om ervoor te zorgen dat websites die gebaseerd zijn op semantische elementen er ook aantrekkelijk uitzien, moet er gebruik worden gemaakt van CSS. En daar komen we later nog op terug.
Je hebt al kennis gemaakt met enkele semantische elementen, zelfs als deze op het eerste gezicht misschien niet direct met semantiek te maken hebben. Hier is een voorbeeld van zo'n element:
<progress min="0" max="100" value="40"></progress>
Dit genereert een voortgangsbalk. (Het progress-element is overigens uitgebreid behandeld in deze reeks).
Dit element illustreert hoe gemakkelijk inhoud kan worden gecreëerd die aan een specifieke context kan worden toegewezen met minimale inspanning. Voor software is het namelijk direct duidelijk dat het om een voortgangsbalk gaat. Bij oplossingen die JavaScript gebruiken voor het genereren van een voortgangsbalk is dat niet het geval.
Semantische elementstructuren
In "normale" HTML-documenten wordt vaak teruggegrepen op div-elementen om de inhoud te structureren. Om deze elementen te kunnen opmaken met CSS, worden er klassen of ID's aan toegewezen. Dit principe wordt ook gebruikt in HTML5. Uit een door Google uitgevoerde enquête is gebleken dat in veel documenten altijd dezelfde klassen worden gebruikt.
Een voorbeeld:
<div class="nav"></div>
Veel ontwikkelaars gebruiken bijvoorbeeld nav om de navigatie binnen dit div-element te plaatsen. In HTML5 ziet dat er echter als volgt uit:
<nav>Inhoud</nav>
Met het nav-element wordt duidelijk dat het niet alleen een lijst met hyperlinks is. Dit element beschrijft namelijk een inhoudelijk blok waarin informatie over de navigatie van de website in een specifieke context wordt weergegeven.
Moderne structurering
Hoe ziet de structuur van een HTML-document er eigenlijk typisch uit? Over het algemeen lijkt dit op elkaar, ongeacht de inhoud van de pagina. Meestal bevatten ze de volgende gebieden:
• Koptekst
• Hoofdmenu
• Inhoudsgebied
• Voettekst
Een website die terugvalt op div-elementen voor de structuur zou er als volgt uit kunnen zien:
<body>
<div id="header">
<div id="logo">Logo</div>
<div id="search">Zoeken</div>
<div id="nav">Hoofdmenu</div>
</div>
<div id="content">
<h1>Dit is de inhoud</h1>
<div class="section">
<h2>Ondertitel</h2>
<h3>Afschnitt</h3>
<!-- Hier staat de inhoud -->
</div>
<div class="section">
<h2>Ondertitel</h2>
<!-- Hier staat de inhoud -->
</div>
</div>
<div id="sidebar">
<div id="subnav">Submenu</div>
</div>
<div id="footer">Voettekst</div>
</body>
Mogelijk zijn jullie al bekend met zulke div-constructies. Om de structuur logisch te maken voor ontwikkelaars, worden de div-gebieden voorzien van overeenkomstige klassen of ID's met "sprekende" namen. Zo is het voor ontwikkelaars bijvoorbeeld duidelijk dat de inhoud in het div-gebied met de ID footer behoort tot de voettekst van de pagina. Het probleem hierbij is dat hoewel de namen de structuur van de website suggereren, de website nog lang niet semantisch gestructureerd is. Net hier spelen de nieuwe HTML-elementen een rol. Want deze maken voor het eerst een echte structurering van documenten of websites mogelijk.
Om een beter begrip te krijgen, bekijk het volgende HTML5-document:
<body>
<header>
<div id="logo">Logo</div>
<div id="search">Zoeken</div>
<nav>Hoofdmenu</nav>
</header>
<article>
<h1>Dit is de inhoud</h1>
<section>
<h2>Ondertitel</h2>
<h3>Afschnitt</h3>
<!-- Hier staat de inhoud -->
</section>
<section>
<h2> Ondertitel</h2>
<!-- Hier staat de inhoud -->
</section>
</article>
<aside>
<nav>Submenu</nav>
</aside>
<footer>Voettekst</footer>
</body>
Natuurlijk zal ik in de volgende tutorials nader ingaan op de hier gebruikte elementen. Toch laat dit voorbeeld al zien waar de voordelen van de gebruikte elementen liggen. Zo kun je nu eindelijk de secties van de pagina markeren met elementen die specifiek hiervoor bedoeld zijn. Alles wat bij de kop van de pagina hoort, kan worden ingevoegd in een header-element.
Bovendien zijn er nu section- en article-elementen beschikbaar waarmee de eigenlijke paginainhoud veel beter gestructureerd kan worden. Zoals je ziet, loont het dus de moeite om uitgebreid te kijken naar de mogelijkheden die HTML5 biedt voor de semantische structurering van documenten.
