HTML best practices kunnen developers helpen om innovatieve en interactieve websites en webtoepassingen te bouwen. Deze best practices helpen je om toepassingen te bouwen met veel features die zich op de wensen van je klanten richten. Daarnaast kunnen organisaties deze best practices gebruiken om een perfecte User Experience (UX) te bieden.

Wanneer we het tegenwoordig over HTML hebben, bedoelt eigenlijk iedereen HTML5 (en dus niet één van de voorgangers). HTML5 is een krachtige markup taal waarmee webdevelopers een webdocument kunnen maken. Het is eenvoudig te begrijpen en te gebruiken, en eigenlijk alle browsers bieden er ondersteuning voor. Daarnaast is het ook de basis van nagenoeg elk Content Management System (CMS).

Veel beginnende webdevelopers hebben regelmatig vragen in de orde van  “hoe kan ik betere HTML schrijven?”. Dit artikel probeert je daarbij te helpen.

Algemene aanpak voor het programmeren in HTML

Je hebt waarschijnlijk al een goed beeld bij deze markup taal, maar voor de zekerheid noemen we enkele HTML5 best practices waarmee je betere code kan schrijven.

Declareer altijd een doctype

Bij het maken van een HTML document is de declaratie van het DOCTYPE vereist, zodat de browser weet welke standaarden je gebruikt. Daarbij is het doel om jouw markup correct weer te geven.

Bijvoorbeeld:

Versie Doctype Declaratie
HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML5 <!DOCTYPE html>

De <DOCTYPE> declaratie moet de eerste regel van je HTML document zijn. Bekijk eens deze vergelijking van een goede en een slechte implementatie:

Best Practice Bad Practice 
<!DOCTYPE html>
<html>...</html>
 
<html>...</html>

In plaats daarvan kan je ook het doctype gebruiken dat hoort bij de HTML/XHTML versie die je graag wil gebruiken. Lees meer over de aanbevolen lijst met doctype declaraties om te beste keuze te kunnen maken.

Plaatsing van HTML tags

Developers weten als het goed is dat het doel van tags is om browsers te helpen bij het onderscheid maken tussen HTML content en gewone content. HTML tags bestaan uit een openingstag, de content, en een afsluitende tag. Maar veel mensen zijn in de war over de optimale plaatsing van tags, de elementen die al dan niet afsluitende tags nodig hebben, en wanneer je tags helemaal achterwege kan laten.

Wat is bijvoorbeeld de beste plek voor <script> tags?

Script tags worden in principe binnen het <head> element geplaatst. Maar een moderne HTML best practice is ze juist helemaal onderaan het document te plaatsen, net voor het sluiten van de <body> tag, zodat ze zo laat mogelijk gedownload worden. De webpagina zal daardoor eerst het Document Object Model (DOM) laden, dat aan de gebruiker tonen, en pas daarna de benodigde scripts aanvragen, waardoor je de Time To First Byte (TTFB) kan verlagen.

De browser interpreteert je HTML document regel voor regel, van boven naar beneden. Wanneer de header dus wordt gelezen en daar een script tag in staat, dan wordt er meteen een verzoek naar de server verstuurd om dat bestand te krijgen. Er is op zich niks mis met deze aanpak, maar als de pagina een groot bestand moet downloaden, zal dit langer duren, wat de ervaring van de gebruiker verslechtert.

Het root element

Onder het root element vind je het <lang>, of language, attribuut. Dit attribuut helpt bij het vertalen van een HTML document naar normaal leesbare taal. De best practice daarbij is om de waarde van deze attribuut zo kort mogelijk te houden.

Ter illustratie, Japans wordt natuurlijk vooral gebruikt in Japan. Daarom is de landcode niet per se nodig wanneer je je op Japans richt.

Best Practice Bad Practice
<html lang="ja"> <html lang="ja-JP">

Dos en don’ts in HTML

Eén van de beste HTML best practices is het nagaan van de dingen die je wel moet doen en dingen die je juist niet moet doen. Enkele dingen die je niet moet doen bij het schrijven van HTML code:

Omschrijving Good Practice Bad Practice
In de tekst de HTML code van Unicode karakters gebruiken in plaats van het karakter zelf. <p>Copyright © 2021 W3C<sup>®</sup></p> <p>Copyright © 2021 W3C<sup>®</sup></p>
Witruimte rondom tags en attribuut waarden verwijderen. <h1 class="title">HTML5 Best Practices</h1> <h1 class=" title " > HTML5 Best Practices </h1>
Wees consistent, ook qua hoofdlettergebruik. <a href="#status">Status</a> <a HREF="#status">Status</a>
Zet geen twee of meer spaties tussen verschillende attributen. <input type="text" name="LastName"> <input type="text" name="LastName">

Hou het simpel

Net zoals in elke programmeertaal, is het principe van “hou het simpel” ook heel goed van toepassing op HTML. Over het algemeen is HTML5 compatibel met oudere HTML versies en XHTML. Daarom raden we je aan om geen XML te gebruiken voor declaraties of attributen.

Bijvoorbeeld:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE html>

Je hoeft dit soort code niet te declareren, tenzij je specifiek een XHTML document wil schrijven. Op dezelfde manier heb je ook geen XML attributen nodig, zoals:

<p lang="en" xml:lang="en">...</p>

Programmeren met SEO in je achterhoofd

Developers moeten code schrijven met het oog op SEO. Webcontent die niet gevonden wordt, kan ook niet worden geïndexeerd door zoekmachines. Daarom zijn dit enkele SEO best practices waar je je aan moet houden:

Voeg nuttige metadata toe

De <base> tag is een handige tag, maar verkeerd gebruik kan onverwacht gedrag opleveren. Als je dus een base tag declareert, zal elke link in het document relatief worden, tenzij expliciet aangegeven:

<base href="http://www.kinsta.com/" />

Deze syntax verandert dus het standaardgedrag van bepaalde links. Zo kan je niet meer linken naar een externe webpagina met alleen de paginanaam en de extensie:

href="coding.org"

De browser zal dit interpreteren als:

href="http://www.kinsta.com/coding.org"

Deze interpretatie wordt al snel chaotisch, en het is dus veiliger om altijd absolute bestandspaden voor je links te gebruiken.

Aan de andere kant is het schrijven van metatag beschrijvingen niet per se een HTML best practice, maar is het wel echt belangrijk. Het <meta name="description"> attribuut is wat zoekmachines gebruiken bij het indexeren van je pagina, en het is dus belangrijk voor de SEO van je site.

Stel goede title tags in

De <title> tag maakt een webpagina makkelijker te lezen voor zoekmachines. Zo zal de tekst binnen de <title> tag bijvoorbeeld in de Search Engine Result Pages (SERPs) van Google komen te staan, en in de adresbalk en tabbladen bij de gebruiker.

Stel dat je zoekt op het keyword “HTML5”. De titel in dit zoekresultaat geeft de specifieke title attribuut op, met auteur. Dit is erg belangrijk voor SEO en het genereren van verkeer naar je site.

Afbeeldingen moeten een alt attribuut hebben

Het gebruiken van een heldere alt attribuut bij <img> elementen, is een absolute must voor het schrijven van goede code.

In onderstaande tabel laat de kolom met slechte voorbeeld een <img> element zien zonder alt attribuut. Alhoewel het tweede voorbeeld wél een alt attribuut heeft, is de invulling compleet zinloos.

Good Practice Bad Practice 
<img id="logo" src="images/kinsta_logo.png" alt="Kinsta logo" />
 
<img id="logo" src="images/kinsta_logo.png" />
<img id="logo" src="images/kinsta_logo.png" alt="kinsta_logo.png" />

Duidelijke meta attributen

De meta description is een HTML element dat de inhoud van een webpagina kort samenvat. Het doel ervan is dat gebruikers de context van een pagina begrijpen. Alhoewel metadata tegenwoordig niet meer helpt voor SEO ranking, kan de meta-omschrijving wel een belangrijke rol spelen bij on-page SEO.

Hier wat voorbeeldcode met de keywords, omschrijving, naam van de auteur, en karakterset. De karakterset wordt gebruikt om nagenoeg alle verschillende karakters en symbolen uit alle verschillende talen te ondersteunen. Ook kan je cookies instellen, een revisiedatum toevoegen, en toestaan dat de pagina wordt ververst.

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Best Practices in Website Design</title>
    <meta name = "keywords" content = "HTML, Website Design, HTML Best Practices" />
    <meta name = "description" content = "Learn about HTML best practices." />
    <meta name = "author" content = "John Doe" />
    <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
  </head>
  <body>
    <p>Let's learn how to code HTML5!</p>
  </body>
</html>

Title attribuut met links

In de anchor elementen is het een goede gewoonte om title attributen te gebruiken, om de toegankelijkheid te optimaliseren. De title attribuut geeft de anchor tag meer betekenis. De <a> tag (oftewel het anchor element) in combinatie met het href attribuut, maakt een hyperlink naar webpagina’s, e-mailadressen en bestanden. Dit wordt gebruikt om locaties in dezelfde pagina of externe adressen te linken.

Kijk maar naar het voorbeeld bij de slechte toepassingen, daar is het volstrekt overbodig. Dit soort gewoontes vallen meteen op wanneer een gebruiker een schermlezer gebruikt om een anchor tag te lezen en vervolgens twee keer moet luisteren naar exact dezelfde tekst. Een schermlezer is een hulpmiddel voor slechtzienden of mensen met een leerbeperking. Een goede gewoonte is gewoon geen titel te gebruiken, als je alleen maar de tekst van de anchor gaat herhalen.

Good Practice Bad Practice
<a href="http://kinsta.com/our-pricing" title="Learn about our products.">Click here</a> <a href="http://kinsta.com/our-pricing" title="Click Here">Click here</a>

HTML best practices voor layouts

Website development is niet alleen maar een kwestie van een stel tekst en headers bij elkaar gooien, wat pagina links erbij, en klaar. Er zijn een aantal best practices in HTML die je moet gebruiken als je echt iets wil maken van je website.

Maak een helder documentstructuur

HTML documenten zullen ook zonder primaire elementen werken, zoals: <html>, <head>, en <body>. Maar zonder die elementen kunnen pagina’s niet goed getoond worden. Daarom is het belangrijk om goede documentstructuur te gebruiken, en dat consistent te doen.

Groepeer relevante onderdelen

Voor een thematische groepering van content kan je het section element gebruiken. Volgens de specificatie van W3C moet een <section> een (heading (H1, H2, etc.) bevatten. Sommige developers slaan het gebruik van een heading element helemaal over, maar we raden je aan om dit toch te gebruiken, voor iedereen die een schermlezer gebruikt:

Good Practice Bad Practice 
<section>
<h1>HTML Best Practices 2021</h1>
<ul>
<li><img src="img1.jpg" alt="description"></li>
<li><img src="img2.jpg" alt="description"></li>
</ul>
</section>
 
<section>
<ul>
<li><img src="img1.jpg" alt="description"></li>
<li><img src="img2.jpg" alt="description"></li>
</ul>
</section>

Best practices voor embedded content

De <embed> tag dient als een container voor een externe resource. Dit zijn bijvoorbeeld webpagina’s, afbeeldingen, video’s of plugins. Maar je moet hierbij wel bedenken dat de meeste browsers al geen Java Applets en plugins meer ondersteunen. Daarnaast worden ook ActiveX controls niet meer ondersteund door browsers, en staat de ondersteuning voor Shockwave Flash ook uit in de meeste nieuwe browsers.

We raden je daarom het volgende aan:

  • Voor een afbeelding gebruik je de <img>
  • Voor HTML tag die je vanaf een andere website haalt, gebruik je de <iframe>
  • Voor audio en video gebruik je de <video> en <audio>

Het alt attribuut in het <img> element biedt een beschrijving van de afbeelding die handig is voor zowel schermlezers als zoekmachines. Dit kan vooral handig zijn voor gebruikers die de afbeeldingen niet kunnen ontvangen of zien:

Good Practice Bad Practice
<img alt="HTML Best Practices" src="/img/logo.png"> <img src="/img/logo.png">

Laat het alt attribuut leeg als er extra tekst is die de afbeelding omschrijft. Hiermee voorkom je dubbelingen:

Good Practice Bad Practice
<img alt="" src="/img/icon/warning.png"> Warning <img alt="Warning Sign" src="/img/icon/warning.png"> Warning

Laat <iframe> elementen leeg als er beperkingen in de inhoud zitten. Een leeg iframe element is altijd veilig:

Good Practice Bad Practice 
<iframe src="/default.html"></iframe>
 
<iframe src="/default.html">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</iframe>

Developers moeten altijd backup content en backup links bieden bij <audio> en <video> elementen, net zoals je dat doet bij afbeeldingen. Backups zijn met name nodig voor elementen die nieuw in HTML zijn:

Good Practice Bad Practice 
<video>
<source src="/mov/theme.mp4" type="video/mp4">
<source src="/mov/theme.ogv" type="video/ogg">...<iframe src="//www.youtube.com/embed/..." allowfullscreen></iframe>
</video>
 
<video>
<source src="/mov/theme.mp4" type="video/mp4">
<source src="/mov/theme.ogv" type="video/ogg">...</video>

Beperk het aantal elementen

HTML document worden snel ingewikkeld, zeker bij webpagina’s met veel content. Idealiter beperk je het aantal elementen zoveel mogelijk. Leer hoe je de heading elementen optimaal kan gebruiken en gebruik de <h1> tot <h6> ook inderdaad om de hiërarchie in HTML content aan te geven. Dit maakt je content beter bruikbaar voor lezers, schermlezers en zoekmachines.

Bijvoorbeeld:

<h1>The topmost heading</h1>
<h2>This is a subheading that follows the topmost heading.</h2>
<h3>This is a subheading that follows the h2 heading.</h3>
<h4>This is a subheading that follows the h3 heading.</h4>
<h5>This is a subheading that follows the h4 heading.</h5>
<h6>This is a subheading that follows the h5 heading.</h6>

Voor WordPress developers en makers van content is het <h1> element voor de titel van het blogartikel, niet de naam van de website. Dit maakt je pagina makkelijker te lezen voor crawlers van zoekmachines, en is dus SEO-vriendelijker.

Daarnaast moet je het goede HTML element gebruiken om de informatie in het element goed over te brengen, zodat je een duidelijke en nuttige contentstructuur maakt. Zo kan je dus bijvoorbeeld <em> gebruiken voor nadruk, en <strong> voor grote nadruk, in plaats van de voorgangers <i> of <b>, die inmiddels allebei verouderd zijn.

Bijvoorbeeld:

<em>emphasized text</em>
<strong>strongly emphasized text</strong>

Net zo belangrijk is het om <p> te gebruiken voor alinea’s en <br /> juist niet te gebruiken voor het toevoegen van witruimte tussen paragrafen. In plaats daarvan kan je beter CSS marges en padding gebruiken om je content optimaal te positioneren. Soms kan je in de verleiding komen om de <blockquote> tag te gebruiken voor inspringing. Doe dat niet, maar bewaar deze tag puur voor het citeren van teksten.

Dos en dont’s bij layouts

Eén van de belangrijkste HTML best practices is het gebruiken van semantisch correcte elementen in de layout van je pagina. Er zijn verschillende elementen die je kan gebruiken om je layout op te splitsen.

Met het enorme scala aan onderwerpen over HTML layout, kunnen we ons het beste beperken op de snelle dos en don’ts. Bijvoorbeeld, HTML geeft meer semantische betekenis aan de header en footer elementen, dus negeer het gebruik van de <header> tag niet aangezien het in elk onderdeel of artikel gebruikt wordt. Naast dat je de <title> en <meta> tags kan controleren, samen met andere stilistische elementen in het document, wordt de tag gebruikt in headings, publicatiedata, en andere content in je pagina of sectie. Op dezelfde manier kan ook het idee overboord dat footers alleen voor het stukje copyright zijn, terwijl je ze voor zo ongeveer alles kan gebruiken.

Het <nav> element zou je moeten gebruiken voor navigatie op de hele website. De rol hoeft niet duidelijk gemaakt te worden, aangezien de tag zelf vrij helder is.

Good Practice Bad Practice
<nav></nav> <nav role="navigation"></nav>

Het <main> element is al onderdeel van de nieuwere HTML5 versies, die de hoofdcontent van het document aangeven. Je hoeft dus niet langer <div> te gebruiken, aangezien er al een specifiekere tag is voor de hoofdcontent.

Good Practice Bad Practice
<main id="content"></main> <div id="content"></div>

De <article> tag wordt gebruik voor een block met content. Het staat op zichzelf en moge vrij duidelijk zijn qua gebruik, terwijl de <section> tag handig is om een pagina op te splitsen in verschillende onderwerpen of om een artikel op te delen in secties. Helaas gebruiken veel developers de twee nog altijd door elkaar.

Hou er rekening mee dat de <section> tag veel generieker is dan de <article> tag. Dit betekent dat de eerste content aangeeft die over het onderwerp gaat, maar niet per se op zichzelf staat. De tweede daarentegen is duidelijk een zelfstandige eigenschap.

Maar als er geen duidelijke goede markup tag is voor je doel, wat moet je dan gebruiken? Het antwoord is dat je <div> moet gebruiken wanneer een ander element niet zou werken, of als iets een specifiek stilistisch element is. Voor onze doelen is het gebruiken van <div> ook een slechte gewoonte.

Terug naar de <section> tag, wat een semantische markup tag is. Het is niet een stilistische tag, en verdient nadruk. In de praktijk is het een goede gewoonte om een heading tag te gebruiken.

Uit de dont’s over <section> volgt dat je het niet moet gebruiken om een wrapper, container, of ander stilistisch block te taggen. Hieronder een slecht voorbeeld van de <section> tag:

<section id="wrapper">
  <section class="container-fluid">
    <div id="main">
    </div>
  </section>
</section>

Hier al een beter aanpak, maar met nog steeds een overschot aan <div> tags:

<div id="wrapper">
  <div class="container-fluid">
    <div id="main">
    </div>
  </div>
</div>

Daarom is een echt goed voorbeeld qua programmeren het volgende:

<body id="wrapper">
  <div class="container-fluid">
    <main id="main">
    </main>
  </div>
</body>

Een populair onderdeel van veel layouts zijn visuals voor data, en het <figure> element wordt veel gebruikt bij plaatjes. Maar er is een veel breder scala aan mogelijke toepassingen, aangezien alles dat te maken heeft met het document overal neergezet kan worden en verpakt kan worden in een <figure> element. Denk aan voorbeelden als illustraties, tabellen, of de grafieken in een boek.

Een interessante eigenschap van <figure> is dat het geen effect heeft op de visuele structuur van een document. Je kan het daarom gebruiken om elementen met eenzelfde thema te groepen, bijvoorbeeld meerdere afbeeldingen met één <figcaption>, of zelfs een blok code.

Bij het groeperen van elementen met <figure>, maak je gebruik van <figcaption>. Het <figcaption> onderschrift zou direct na de openingstag <figure> moeten gaan, of direct voor de afsluitende </figure> tag :

<figure>
  <img src="image1.jpg" alt="Bird Image">
  <img src="image2.jpg" alt="Tree Image">
  <img src="image3.jpg" alt="Sun Image">
  <figcaption>Three images related to a topic</figcaption>
</figure>

HTML best practices voor scripts

HTML is één van de kerntechnologieën binnen webdevelopment. Er zit een hoop kracht en features in, waardoor het populair is onder zowel developers als ondernemers. Frontend development is zichzelf altijd aan het ontwikkelen, en om bij te blijven moeten developers de best practices van HTML scripting kennen.

Gebruik externe stylesheets

Inline styles maken je code rommelig en slecht leesbaar. Daarom moet je altijd externe stylesheets gebruiken. Voorkom ook het gebruik van import statements in je CSS bestanden, aangezien dit een extra verzoek aan de server oplevert.

Hetzelfde geldt voor inline CSS en JavaScript. Naast de leesbaarheid, maakt het je document zwaarder en moeilijker te onderhouden, dus vermijd alle inline code.

Gebruik markup zonder hoofdletters

Het gebruik van kleine letters (lowercase) is een sectorbrede gewoonte. Alhoewel hoofdletters je pagina prima kunnen weergeven, maakt het je code minder goed leesbaar.

De leesbaarheid van je code is belangrijk, aangezien het je toepassingen veiliger maakt en eenvoudiger te onderhouden. Ook bestaat webdevelopment eigenlijk altijd uit teamwerk. Door je code zo leesbaar mogelijk te maken, maak je het werk van jezelf en je team zo makkelijk mogelijk.

Good Practice Bad Practice 
<div id="test">
<img src="images/sample.jpg" alt="sample" />
<a href="#" title="test">test</a>
<p>some sample text </p>
</div>
 
<DIV>
<IMG SRC="images/sample.jpg" alt="sample"/>
<A HREF="#" TITLE="TEST">test</A>
<P>some sample text</P>
</DIV>

Dos en don’ts bij scripting

Alhoewel er heel veel don’ts zijn bij het programmeren in HTML, zullen we twee belangrijke don’ts delen voor scripting:

  • Schrijf code met goede inspringing en consistente opmaak: Nette en goed geschreven code maakt de leesbaarheid van je website beter, wat erg prettig is voor al je collega-developers en andere mensen die met de website moeten werken. Het laat ook zien dat je professioneel bent en detailgericht, wat allebei positieve eigenschappen voor een developer zijn.
  • Voorkom uitgebreide opmerkingen: Opmerking zijn belangrijk en maken je code beter te begrijpen. Maar HTML syntax is meestal vrij eenvoudig te volgen, dus opmerkingen zijn niet heel vaak nodig, tenzij je een bepaalde keuze of gebruikte conventie moet noemen.

Validatie en minifying

Valideren en minifying van code wordt gebruikt om sneller foutjes te spotten. Wacht hiermee niet tot je HTML document helemaal klaar is, maar voer regelmatig een validatie uit en zoek vaker naar fouten. Je kan de validatie handmatig doen, of via een tool zoals W3C Markup Validator.

Ook kan je gebruikmaken van de ingebouwde codeminificatiefeature in het MyKinsta dashboard. Dit stelt klanten in staat om automatische CSS en JavaScript minificatie in te schakelen met een simpele klik, waardoor hun sites geheel automatisch worden versneld.

Tegelijkertijd kan je minificatie toepassen door alle overbodige zaken te verwijderen, zoals opmerkingen of witruimte. Zorg ervoor dat je code netjes en opgeruimd is, om je HTML bestand zo klein mogelijk te houden. Je kan hiervoor tools zoals HTML Minifier gebruiken.

Samenvatting

Je kan allerlei materialen met HTML5 best practices vinden. Maar onthoud altijd de belangrijkste basisregel bij programmeren: consistentie. Dit artikel heeft een aantal basisprincipes beschreven, waarmee je sneller aan de slag kan in frontend development. Met deze gids ben je meteen een expert in semantisch correcte HTML5.

Wanneer je daar klaar mee bent, kijk dan eens wat HTML nog meer te bieden heeft en ontdek een aantal open source HTML frameworks voor het bouwen van moderne Single-Page Applications (SPA’s). Deze bieden uitstekende synchronisatie tussen de data en de UI en werken mooi samen met CSS en JavaScript.

Hebben we nog HTML best practices gemist die jij altijd belangrijk vindt bij het programmeren? Laat het ons weten in de reacties hieronder!

Iryne Vanessa Somera