Iedereen die betrokken is bij webdesign of -ontwikkeling zal de term 'semantisch' tegenkomen met verwijzing naar HTML5 en het web in het algemeen. Deze vaak problematische term is begrijpelijkerwijs verwarrend voor velen van ons, vooral omdat er een duidelijk gebrek aan consensus is over de definitie ervan in bepaalde contexten.

In dit artikel zullen we onderzoeken wat HTML5 semantischer maakt dan zijn voorgangers, en schetst wat dit betekent voor webontwikkeling nu en in de toekomst.

Semantiek gaat over betekenis

Het concept van de semantiek komt van het gebied van de taalkunde gewijd aan de studie van de betekenis. Met natuurlijke talen zoals het Engels, maken we onderscheid tussen syntaxis (of grammatica) en betekenis. Als je aan een zin denkt, heeft betekenis te maken met hoe mensen het interpreteren:

"De man gooide de computer door het raam."

Semantiek heeft betrekking op het aspect van de zin dat mensen die het lezen de boodschap laat begrijpen die erin is vervat. Samen met syntaxis is semantiek een belangrijk onderdeel van wat communicatie via taal mogelijk maakt. Wanneer we het hebben over semantiek in relatie tot HTML, hebben we het over communicatie tussen computerprogramma's, niet over mensen. Semantische HTML is voornamelijk gericht op het verbeteren van de mate waarin toepassingen webcontent kunnen verwerken of interpreteren. Bekijk bijvoorbeeld het volgende uittreksel van de webpagina met enkele van de langer bestaande HTML-structuren:

The man threw the computer through the window.

De elementen (en attributen) geven de browser informatie over hoe de inhoud aan de gebruiker moet worden gepresenteerd. Alinea-elementen worden standaard weergegeven met witruimten erboven en eronder, afbeeldingselementen worden weergegeven met behulp van het afbeeldingsbestand in het src-attribuut, enzovoort. Wanneer de browser elk van deze elementen tegenkomt, wordt de inhoud op een bepaalde manier weergegeven die uiteindelijk wordt bepaald door de gebruikte tags.

HTML-structuren hebben al betekenis

Het is belangrijk om te begrijpen dat HTML5 voor de eerste keer geen semantiek introduceert in HTML. HTML had al een ingebouwd niveau van semantiek. De bestaande HTML-structuren zijn in verschillende mate zinvol. Als je kijkt naar dit bekende HTML-element zoals opgenomen in het bovenstaande fragment, zie je wat ik bedoel:

Hoewel het afgekort is, geeft de naam van het element img iets betekenisvols aan over de inhoud van de tag, dat wil zeggen dat het een afbeelding is. Op deze manier kunt u het semantische aspect van HTML beschouwen als vergelijkbaar met metagegevens, in die zin dat de elementtag en attribuutnamen de gegevens beschrijven (de gegevens in een webpagina zijn het element en de attribuutinhoud).

Weet je nog toen we begonnen met het scheiden van inhoud van stijl?

Sommige structuren die we in HTML hebben gebruikt, vertellen de browser hoe de inhoud van een pagina moet worden opgemaakt. Naarmate de tijd verstreek, zijn we aangemoedigd om de opmaak van een pagina te scheiden van de inhoud.

We hebben bijvoorbeeld de i-tag vervangen door em, wat zinvoller is en de browser niet precies vertelt hoe de tekst in het element moet worden weergegeven. Het doel van het gebruik van em in plaats van i is om informatie over de aard van het contentitem over te brengen, in plaats van informatie over het stylen ervan. De em beïnvloedt uiteraard de stijl, wat de belangrijkste reden is dat we deze gebruiken, maar laat de details van de stijl over aan de browser en / of CSS-code die idealiter gescheiden is van de paginamarkering.

Semantische HTML5 is een grotere stap in dit proces. Het uiteindelijke doel is om een ​​systeem te creëren waarin applicaties toegang hebben tot een groter niveau van betekenis - dit is echter niet AI, het gaat er alleen om beschrijvende informatie over gegevensitems op te nemen in de codestructuren die deze modelleren.

Is dit niet vergelijkbaar met XML?

Als u in het verleden XML hebt gebruikt, heeft u enige bekendheid met de concepten in semantische opmaak. Wanneer u bijvoorbeeld een XML-document (of schema) voor een gegevensset ontwerpt, kiest u elementen en attributen om items in de gegevens te modelleren. In het ideale geval definiëren de element- en attribuutnamen de gegevensitems op een zinvolle manier:

Jim Smith23 November 2012

De ontwikkelaar heeft hier namen gekozen die intuïtief de gegevenswaarden beschrijven die worden gemodelleerd. Met HTML5 kun je niet je eigen elementen kiezen, omdat het niet vrij uitbreidbaar is. De structuren die ervoor gekozen zijn hebben eenvoudigweg meer inherente betekenis in vergelijking met eerdere versies.

Overigens zijn er verschillende soorten betekenissen

We hebben gesproken over betekenis, maar in feite zijn er verschillende manieren waarop een element of een ander codefragment zinvol kan zijn.

De img-tag is zinvol omdat het iets vertelt over de inhoud van het element en beschrijft wat het is.

Sommige van de nieuwe HTML5-elementen, zoals koptekst en voettekst, zijn zinvol omdat ze iets aangeven over de rol of het doel van het element binnen de algehele structuur van een pagina.

Hoe verhoudt dit zich allemaal tot HTML5-code?

Dus wat houdt dit versterkte, betekenisvolle aspect van HTML5 in? In essentie heeft HTML5 een aantal nieuwe elementen waarmee u meer semantische informatie in uw paginamarkup kunt opnemen. Er zijn een hoop nieuwe elementen, waarvan we er hier enkele zullen bekijken. De header-tag geeft informatie over de inhoud van het element en over zijn rol binnen de paginastructuur:

Man in Window Outburst

Het header- element kan andere elementen bevatten en heeft de neiging om ten minste één headingelement te bevatten. De footer-tag is vergelijkbaar, waarbij de tag opnieuw iets zinvols weergeeft over de inhoud van het element en de relatie ervan tot de rest van de pagina:

De nav- tag beschrijft het doel van een paginasectie, dat wil zeggen dat het navigatielinks bevat:

Het sectie- element bevat meestal een groep items over hetzelfde thema, vaak samen met een koptekst. Het sectie-element heeft een vrij abstracte betekenis, maar het is niettemin zinvol:

What happened
Police officers apprehended the man at 3.30pm...

Het artikelelement is vergelijkbaar, gebruikt om een ​​item te definiëren dat op zichzelf staat:

The Law
The law on throwing items through windows is very clear...

Een opzij- label geeft de rol van een element ten opzichte van de context op de pagina aan, zoals in de volgende uitgebreide versie van de bovenstaande artikelcode:

The Law
The law on throwing items through windows is very clear...

Dit zijn slechts een paar van de nieuwe HTML5-elementen die semantische verbeteringen bieden, andere bevatten media en gebruikersinvoerelementen en extra attributen. De opname van microgegevens in HTML5 biedt ook meer mogelijkheden voor het opnemen van semantische informatie in webpagina's en toepassingen. Zoals u kunt zien, zijn sommige van deze nieuwe elementen zinvol in termen van zowel inhoud als structuur.

Denk aan enkele van de oudere tags (waarvan er veel nog steeds in de buurt zijn), zoals div. Het div-element is gewoon een brok van een pagina - de tag-naam vertelt ons absoluut niets over de inhoud van het element of zijn rol binnen de pagina. Met andere woorden, de tag geeft maar heel weinig betekenis. Veel van de al lang bestaande tags geven ofwel helemaal geen betekenis, of in sommige gevallen een generieke, losjes gedefinieerde betekenis. Elk item op een webpagina was onderdeel van een reeks zeer algemene elementcategorieën. De sleutel tot het maken van iets zinvols is specifiek zijn. Met de nieuwe HTML5-tags kunnen we webinhoud definiëren met behulp van meer specifieke termen.

Heeft u al betekenis toegevoegd aan uw markup?

Als u al geruime tijd webpagina's maakt, kunnen sommige nieuwe HTML5-elementen voor u een belletje doen rinkelen. In werkelijkheid ontwikkelden ontwikkelaars al een niveau van betekenis in hun pagina's met behulp van de elementattributen, met name klasse en ID. Als u bijvoorbeeld ooit een element een klasse- of ID-kenmerk van 'footer' of 'header' heeft gegeven, bent u zeker niet de enige. Met HTML5 wordt deze betekenis in de markup zelf weergegeven in plaats van in attribuutwaarden. Als u deze kenmerken hebt gebruikt om bepaalde stijleigenschappen te implementeren, deed u effectief iets dat in HTML5 standaard is ingebouwd - en met semantische elementen zijn er extra voordelen ...

Waarom doen we dit allemaal?

OK, dit gaat allemaal goed, maar het zou je vergeven zijn als je vraagt ​​waarom we naar al deze problemen gaan voor iets dat in essentie conceptueel / academisch lijkt. Nou, je kunt er zeker van zijn dat er goede redenen zijn om in een meer semantische richting te bewegen. Zoals we hebben gezien, kunnen we met HTML5-semantiek markup-code maken die contentitems beschrijft. Met dit beschrijvende aspect van de code kunnen andere programma's effectiever gebruik maken van de inhoud, met verschillende toepassingen:

• De doorzoekbaarheid zal worden getransformeerd door de opkomst van de websemantiek. Semantische opmaak maakt inhoud / gegevens beter doorzoekbaar. webpagina's worden natuurlijk niet alleen in de webbrowser bekeken, ze worden ook verwerkt door andere programma's, zoals robots van zoekmachines. Aangezien semantische opmaak is ontworpen om toepassingen webpagina's op meer betekenisvolle manieren te laten interpreteren, zou dit uiteindelijk de kwaliteit van zoek- / opvraagfuncties aanzienlijk moeten verbeteren. In Tim Berners-Lee's vaak aangehaalde "droom" voor het web, zouden computers alle gegevens online kunnen analyseren - dat is misschien nog ver weg, maar de semantische stuwkracht van HTML5 wordt gemotiveerd door dat type langetermijndoel .
• Toegankelijkheid is een van de belangrijkste voordelen van semantische markeringen. Toegankelijkheidstools kunnen enorm profiteren van meer zinvolle toegang tot webcontent. Dergelijke hulpmiddelen omvatten browser-add-ons voor gebruikers met beperkte zicht-, gehoor-, leermoeilijkheden enzovoort. Semantische opmaak maakt het voor een toepassing beter mogelijk om webinhoud en het resultaat te verwerken om het oorspronkelijke bericht aan de gebruiker te communiceren op een manier die aan hun behoeften voldoet. Dit concept gaat verder dan toegankelijkheid en naar de gebieden van apparaatflexibiliteit, door middel van technieken zoals responsief ontwerp. Het resultaat is een meer inclusieve benadering voor het leveren van webinhoud.
• Consistentie moet een echte weldoener zijn van semantische HTML5. Semantische opmaak verbetert de consistentie, omdat contentitems logischerwijs kunnen worden toegewezen aan bepaalde elementtypen. Dit is in tegenstelling tot de oudere modellen, waarin items vaak net zo logisch in een van de verschillende elementtypen konden worden opgenomen - het kiezen ervan was geen indicator van de aard van de inhoud of de rol ervan op de pagina, het was was slechts een weerspiegeling van de keuze van de ontwikkelaar. Met semantische markup maakt het meer specifieke niveau van betekenis deze keuzes minder vrij, maar de resultaten zijn inherent betrouwbaarder als het gaat om interpretatie, hetzij door de browser of door andere applicaties.

Ontwikkelaars sturen de voortgang van webtechnologieën

Toen ik een aantal jaren geleden bij uni was, herinner ik me een docent die ons vertelde dat het gebied van academisch onderzoek een revolutie zou ondergaan door vorderingen bij het zoeken. Hij had het over het semantische web - het is onnodig om te zeggen dat het nog niet is gebeurd. Het nemen van elke vorm van gerichte nieuwe richting met iets zo divers en grillig als het World Wide Web wordt altijd een moeilijke taak. Door echter aan boord te komen met het idee van semantische markup, kunnen wij als ontwikkelaars de beweging naar een toekomstig web dat toegankelijker, doorzoekbaar en consistent is, beïnvloeden voor alle gebruikers.

Gebruik je de semantische elementen van HTML5? Geeft het focussen op semantiek een product van hogere kwaliteit? Laat ons weten wat je denkt in de reacties.

Uitgelichte afbeelding / miniatuur, maakt gebruik van taalafbeelding via Shutterstock.