HTML5 heeft zich bewezen als veelzijdige webdesign-taal

HTML5: algemene standaard voor professioneel webdesign

door ing. Jan Everink

september 2022

HTML5 is de veelzijdige laatste versie van de webdesign-taal HTML. Ten opzichte van oudere versies bracht HTML5 vooral standaardisatie maar ook vereenvoudiging en meer creatieve mogelijkheden. Sinds de officiële introductie in 2014 werd HTML5 op grote schaal toegepast voor het professioneel bouwen van talrijke websites, van klein tot groot, van eenvoudig tot complex, van gewoon tot indrukwekkend.

Algemene standaard

HTML (HyperText Markup Language) is het coderingssysteem voor het creëren van webpagina's. Met HTML5 werd deze taal enkele jaren geleden tot een algemene standaard gemaakt.

Door de introductie van HTML5 kwam een eind aan de situatie dat er verschillende HTML-standaarden bestonden waarvan de mogelijkheden wel of niet door browsers werden ondersteund. Voor webdesigners was het vaak moeilijk om te kiezen welke voorzieningen ze in hun ontwerpen zouden toepassen. Met betrekking tot bijvoorbeeld het wijdverbreide gebruik van Adobe Flash bestond geen overeenstemming. Een nadeel van Flash-animaties was dat deze voor de sitebezoeker alleen zichtbaar waren als men een Flash-player had gedownload en geïnstalleerd.

Ook wat betreft de interpretatie door de browsers van diverse HTML-opdrachten bestond geen eenduidigheid. Over zulke kwesties werden met de komst van HTML5 definitieve beslissingen genomen, zodat HTML5 de algemeen aanvaarde standaard kon worden. Met de verdwijning van Flash en ook met sommige andere keuzes was niet iedereen gelukkig, maar daar stond tegenover dat de algemene HTML5-standaard een enorme verbetering betekende.

Makkelijk inbouwen audio en video

In HTML5 kwamen ten opzichte van vorige versies ook uiteenlopende nieuwe mogelijkheden beschikbaar. Onder meer werd het inbouwen van audio en video een stuk makkelijker. Om in een webpagina het afspelen van een audio- of videobestand mogelijk te maken was in oudere HTML-versies extra software nodig. Met HTML5 werd dit veel eenvoudiger; de opdrachtcodes "Audio" en "Video" kwamen beschikbaar om audio- en videobestanden direct door de browser te laten afspelen.

Het gebruik van deze codes garandeert overigens op zichzelf nog niet dat het betreffende bestand daadwerkelijk afspeelbaar is. Het audio- of videoformaat moet ook door de browser worden ondersteund. Hoewel de HTML5-specificaties in principe elk formaat toelaten bestaat niet voor alle formaten brede browser-ondersteuning.

Verder zijn in HTML5 ruime voorzieningen beschikbaar om de afspeelmogelijkheden van audio en video nader te bepalen. Zo kan bijvoorbeeld worden aangegeven of het afspelen meteen begint of pas als de bezoeker op de startknop klikt. Ook kan worden gezorgd dat de bezoeker beschikt over volumeregeling, zoekfunctie en pauzeknop.

Responsive design

Heel positief is ook dat HTML5 veel functionaliteit biedt voor responsive design, de techniek om webpagina's te creëren die op elk medium goed tot hun recht komen. Dat is tegenwoordig nu websites op allerlei schermen worden bekeken heel belangrijk.

Onder meer heel praktisch wat dit betreft is dat in HTML5 de table-tags gebruikt kunnen worden voor layout-doeleinden. In oudere versies mocht dat eigenlijk niet maar veel ontwikkelaars deden het toch, omdat de table-tags praktisch zijn om een flexibele layout-structuur te creëren. Met de komst van HTML5 werd deze werkwijze als een standaardmethode erkend.

Vereenvoudiging

Een andere verbetering ten opzichte van oudere versies was dat voor verschillende specificaties de noteringen eenvoudiger werden. Dat was onder meer het geval met de DOCTYPE-tag, die helemaal aan het begin van een HTML-bestand staat. De DOCTYPE-code vertelt de browser in welke HTML-versie de pagina gecodeerd is. HTML5 kent maar één DOCTYPE-specificatie en die is heel eenvoudig, namelijk "HTML".

Ook andere tags, zoals bijvoorbeeld die betreffende de character encoding, werden in HMTL5 vereenvoudigd. Character encoding betreft de wijze waarop binaire tekens worden omgezet naar leesbare letters, cijfers en andere symbolen.

Semantische tags

In HTML5 werden verder nieuwe tags toegevoegd waarmee het mogelijk werd om pagina-onderdelen te kwalificeren op basis van hun content. Deze semantische tags hebben ten opzichte van de voorheen vrijwel algemeen gebruikte div-tag het voordeel dat ze de zoekmachines nadere informatie geven.

Door middel van semantische tags kan de webdesigner aangeven welke content hij in verband met het indexeren van de pagina door de zoekmachines belangrijk vindt. Ook kan zo bijvoorbeeld worden bepaald dat een pagina-onderdeel speciaal van belang is voor de navigatie.

De al lang bestaande neutrale tags als de div-tag en de span-tag bleven gehandhaafd. De div-tag is nog steeds belangrijk om bijvoobeeld een groter algemeen gebied in een pagina te definiëren. Ook kan de neutrale span-tag nog steeds nuttig zijn om inline content-gedeelten afwijkend op te maken. Verder laat men de div-tags vaak ongewijzigd als oudere webpagina's naar HTML5 worden omgezet.

Codering moet standaard zijn

Om een webpagina die met een oudere versie van HTML werd opgemaakt om te zetten naar HTML5 hoeft in principe alleen de DOCTYPE-tag aangepast te worden. Door in de eerste regel van de markup als DOCTYPE eenvoudig "HTML" te vermelden wordt de pagina een HTML5-pagina.

Soms zijn extra aanpassingen nodig, namelijk als de pagina niet volledig standaard is opgemaakt. In HTML5 kan dat problemen geven omdat browsers bij HTML5 niet de zogenoemde quirks-mode toepassen om bij niet-standaard codering de pagina toch goed weer te geven. Afhankelijk van de browser kunnen verouderde codes in een HTML5-pagina lichte tot serieuze weergave-problemen veroorzaken.

Het kan soms zinvol zijn om oudere pagina's niet om te zetten naar HTML5, namelijk als deze pagina's relatief veel verouderde niet-standaard codering bevatten. Door de DOCTYPE-tag van oudere HTML-versies wordt de quirks-mode van de browser geactiveerd en wordt de pagina toch goed weergegeven. Voor nieuwe webpagina's is aan te raden om deze altijd standaard met HTML5 te bouwen, want dan zijn alle voordelen van deze veelzijdige webdesign-taal beschikbaar.