spring naar de tekst

HTML valideren

We hebben het er, in een eerdere blogpost al eens eerder over gehad, een website heeft een logische structuur nodig. Eigenlijk net zoals bij een tijdschrift of een boek. We hebben koppen, subkoppen, paragrafen, afbeeldingen, lijsten enzovoort.

Zo bouwen we een website ook op en daarvoor gebruiken we HTML. We hebben onze koppen van h1 t/m h6, we hebben paragrafen die bij die koppen horen. Bij een afbeelding hebben we vaak een stuk beschrijvende tekst en onder de afbeelding een korte beschrijving of titel. We kunnen lijstjes maken met bullets of genummerd. Dus we structuren de inhoud en zorgen dat het duidelijk is wat er bij elkaar hoort.

Als we een bezoeker hebben die al zijn zintuigen gebruikt om de site waar te nemen dan kunnen we ook nog CSS gebruiken. We kunnen fonts groter maken of een andere kleur geven, we kunnen lijnen trekken om blokken tekst te groeperen, kortom met CSS kunnen we nog meer samenhang brengen in een website.

Bezoekers die gebruik maken van andere technieken om een website te bezoeken hebben vooral baat bij een goede en logische opbouw van een website met HTML. Iemand die een screenreader gebruikt heeft vaak niks aan de stijlen die met CSS worden toegevoegd. Wel heeft diegene baat aan koppen, afbeeldingen met een alt-tag, linkjes, buttons, formulieren en lijstjes. Als de HTML nu niet klopt en de relaties en volgorde van de items op een pagina niet kloppen dan raakt deze bezoeker al snel de weg kwijt.

Je HTML valideren is iets wat je altijd 'hoort' te doen. Hier zijn vele websites voor te vinden. Meestal kun je de link naar de betreffende pagina invoeren of, als je site nog niet live is, kun je ook de HTML-code plakken.

Ik gebruik zelf eigenlijk altijd de validator van het W3C. Maar er zijn nog heel veel andere. Je kunt het zelfs in je code editor (meestal middels een plugin) doen en als je gebruikt maakt van build-tools (zoals Webpack of Parcel) dan kun je het ook integreren in deze tools, je HTML word dan getest op het moment dat de website definitief opgebouwd wordt. Maar voor de meesten onder ons is een de normale website door middel van het gebruik van een linkje het meest gemakkelijk.

Misschien heb je ergens een type-foutje gemaakt in de code of ben een vergeten een HTML-element af te sluiten, de validator geeft je een lijst met de eventuele problemen die hij in je code heeft gevonden. Het probleem wordt omschreven en er wordt vermeld op welk lijnnummer het probleem zich bevindt.

Je hebt twee soorten meldingen, errors en warnings. Ben je bijvoorbeeld ergens vergeten een sectie af te sluiten met </section> dan krijg je hiervoor een error, weergegeven in rood natuurlijk. De errors moet je echt oplossen. Het kan problemen geven als je dit niet doet. De browser kan er zelf iets totaal anders van maken.klikbare headings met focus

Als je Javscript wilt insluiten in je HTML document dan had je daar ooit een type-attribuut voor nodig. Nu hoeft dat niet meer maar het is niet erg als je dat toch doet. Je krijgt dan geen error maar een Warning, in het geel. De warnings hoef je niet op te lossen maar ik zou het zelf wel altijd doen. klikbare headings met focus

De meeste browser kunnen veel problemen zelf prima oplossen maar mensen die andere technieken gebruiken die kunnen hier wel problemen ondervinden. Dus zorg ervoor dat je HTML in ieder geval vrij is van errors. Zo zorgen we ervoor dat iedereen een goede internet ervaring heeft.Gepubliceerd op 25 mei 2020 door Renee de Kruijf