Juiste HTML voor code snippets op je website

In dit artikel leer je alles wat je moet weten over de juiste HTML voor code snippets op je website. Op mijn blog schrijf ik regelmatig over webdevelopment. Daarom zal ik ook regelmatig code snippets in mijn artikelen met jullie willen delen. Soms alleen een klein stukje in het verloop van de zin en soms een heel blok met code.

Code snippets zijn onderdeel van de HTML structuur van een webpagina. Het is daarom belangrijk om de juiste HTML elementen hiervoor te gebruiken. Zoals je voor pagina- en paragraaftitels heading elementen gebruikt maak je voor code snippets gebruik van de code en pre elementen.

In dit artikel daarom uitleg over:

• het code element;
• het pre element.

Het code element

Het code element kan gebruikt worden voor iedere tekenreeks die door een computer herkent word, dus ook voor code snippets.

Uit de W3C Editor’s Draft van 22 oktober 2013 quote ik:

The code element represents a fragment of computer code. This could be an XML element name, a file name, a computer program, or any other string that a computer would recognize.

Vergeet niet dat het code element een inline element is. Het is daardoor geschikt om stukjes code, bijvoorbeeld this.element = element; te tonen midden in een normale zin. Wil je een heel blok met code laten zien dan moeten we ook gebruik maken van het pre element.

Het pre element

Het pre element is een block level element en geschikt om een heel blok met code te tonen. Alles binnen het pre element wordt namelijk exact weergegeven, inclusief witregels, tabs en spaties die je veelvuldig gebruikt in code snippets. De code is immers niet leesbaar als alles achter elkaar staat.

Uit de W3C Editor’s Draft van 22 oktober 2013 quote ik:

The pre element represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements.

Het pre element is dus niet alleen bedoeld voor het tonen van code snippets en is dus ook geschikt voor andere doeleinden waarbij witregels, tabs, spaties en dergelijke behouden moet blijven. Zonder die witregels, tabs en/of spaties zijn blokken met code echter moeilijk leesbaar. Daarom benoemt de W3C Editor’s Draft dan ook expliciet dat het pre element gebruikt kan worden voor code snippets.

Some examples of cases where the pre element could be used:

• […]
• Including fragments of computer code, with structure indicated according to the conventions of that language.
• […]

Een voorbeeld voor een blok met code:

function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}

Je weet nu welke HTML elementen je moet gebruiken om code snippets weer te geven op een webpagina. Als je echter gebruik maakt van WordPress, dan ga je helaas problemen ondervinden om dit goed toe te passen. Hoe ik dat opgelost heb kun je lezen in het artikel Code Snippets en Syntax Highlighting in WordPress.

Vond je dit artikel leerzaam of heb je vragen? Laat dan gerust een reactie achter!