HTML voor opdrachtgevers
Met deze blog geef ik u als opdrachtgever of niet-specialist een aantal handvatten waarmee u zich eenvoudig een goed oordeel kunt vormen over de kwaliteit van een website. Deze publicatie kost slechts tien minuten van uw tijd. U hebt een website of u wilt er eentje laten maken voor uw bedrijf. Waar moet u op letten? Hoe kunt u zien of uw website wel toekomstvast is? Het voorstel van de bouwer/vormgever ziet er indrukwekkend uit, maar hoe weet u of de basis, de HTML-code, goed is? Hierover gaat dit blogartikel. Ik geef u handvatten zodat u een voorstel kunt beoordelen zonder specialist te zijn.
Nette HTML-code zorgt ervoor dat (1) Google uw website foutloos en snel indexeert, (2) dat de stijl makkelijk aanpasbaar is en (3) dat ook gehandicapte klanten zoals blinden gebruik kunnen maken van uw website (de webbrowser leest voor hen voor uit het HTML-document, niet uit het vormgevingsdocument). (4) Indirect is de kwaliteit van de HTML-code een indicator voor de kwaliteit van de totale website.
Een webpagina bestaat uit twee bouwstenen: informatie en vormgeving. Informatie en vormgeving zijn gescheiden en staan in verschillende documenten die met elkaar samenwerken. Het document met vormgeving is niet van belang omdat u dat al beoordeelt door simpelweg naar de website te kijken. Het informatiedocument met de HTML-code is cruciaal voor het vormen van een goed oordeel en daarover wil ik het hebben.
We gaan als volgt te werk. Op een willekeurige webpagina klikt u met uw rechtermuisknop op een lege plek om daarna voor ‘Toon bron-code’ te kiezen. U ziet meteen de HTML-code. In plaats van de rechtermuisknop kunt u ook naar het weergave-menu gaan en daar voor ‘Toon bron-code’ kiezen. De exacte naam van het commando uit uw menu kan iets verschillen per webbrowser maar is direct herkenbaar.
We gaan kijken naar wat er na <body> in de HTML‑code komt. De markering <body> staat meestal ergens bovenaan in de HTML-code (onder <head>[...]</head>. Direct na <body> begint namelijk de inhoud waar het voornamelijk om draait.
Hoofdstukken geven de structuur aan
Een HTML-document is als een ms Word document zonder vormgeving. Ook een HTML-document heeft kopjes, paragrafen en plaatjes. Een HTML-document moet net zo gestructureerd zijn als uw ms Word documenten. Webbouwers geven kopjes in de HTML-code aan als bijvoorbeeld <h1> of <h2>. De ‘h’ staat voor heading en het getal voor het niveau van deze heading. Net zoals in Microsoft Word.
Deze kopjes zijn het belangrijkst. Daarmee delen we een webpagina in. Elk nieuw onderwerp op de pagina moet een kopje hebben; al is het een lijst met laatste blog items. Dus <h1>Laatste Blogs</h1> in de HTML‑code. Zo gemakkelijk is het. De code </h1> geeft het eind van het kopje aan.
Google focust zeer sterk op die kopjes, hoofdzakelijk op de eerste heading 1. Omdat hier altijd belangrijke informatie over de webpagina staat. Bekijk dus goed of het hoofdonderwerp van de pagina gemarkeerd is als de eerste h1.
Google begrijpt uw webpagina pas als die goed is ingedeeld.
Gebruik standaard elementen of betekenisvolle namen
HTML-code bestaat voornamelijk uit afkortingen van elementen die we ook in ms Word documenten gebruiken. Zo staat de p voor paragraaf, img voor image, em voor emphasis, abbr staat voor abbreviation, br voor line break, q voor quote enz.... Er bestaat een waslijst aan deze gestandaardiseerde markeringen. Door deze standaard markeringen begrijpt niet alleen elke webbrowser (zoals Internet Explorer, Firefox en Safari) wat er aan de hand is, maar ook elke zoekmachine begrijpt het. Met deze codes kunt u ook zelf gemakkelijk de HTML-code begrijpen. Voor meer voorbeelden van HTML-markeringen verwijs ik naar deze lijst met HTML‑codes.
Soms geeft een webontwerper de eerste paragraaf expres anders vorm dan de rest. Dan kan hij deze onderscheiden door eigen code toe te voegen. Een markering kan er dan uitzien als: <p class=”first-paragraph”> Paragraaf hier.... </p>. Uw webbrowser verwijst dan in het stijldocument naar ‘first-paragraph’. Professionele webbouwers zullen altijd betekenisvolle namen kiezen zodat de HTML-code relevant blijft. Relevant na vormveranderingen of na onderhoud door anderen. Het voorbeeld <p class=” paragraaf-met-blauwe-letters”> Paragraaf hier.... </p> is dus fout, omdat blauwe letters niks over de inhoud zegt, het is betekenisloos.
Het is de kunst om betekenisvolle HTML-code te schrijven zodat het leesbaar en interpreteerbaar blijft voor iedereen.
Afwijkende karakters zijn nodig (é, ï, &…)
Mogelijk heeft u snel de bron-code van deze webpagina bekeken en schrok u van of &. Dat zijn HTML-karaktercodes. De staat voor non-breaking-space en & staat voor ampersand. Er zijn ook minder logische namen zoals \ wat een backslash is. Alle speciale letters hebben dit soort HTML-karaktercodes. Dit is een veel gebruikte manier om afwijkende karakters in een HTML-document te zetten. Voor meer karakter-codes verwijs ik naar deze lijst van HTML-karaktercodes.
Tabellen zijn niet bedoeld voor layout
Vroeger waren tabellen in websites helemaal in. Het was het enige houvast voor webbouwers om visuele elementen op hun plek te zetten. Maar nu is dat niet meer nodig. In huidige versies van vormgevingsdocumenten kan men prima HTML-code op alle denkbare manieren vormgeven. Mogelijkheden voor de vormgeving zijn eindeloos, als de HTML-code maar betekenisvol gestructureerd is.
Nog steeds zie ik dat webbouwers tabellen gebruiken om de layout van webpagina’s te bepalen. Dit betekent (zonder uitzondering) dat de webbouwer onvoldoende kennis heeft over het bouwen van websites. Vormgeving hoort niet in de HTML-code thuis.
Tabellen zijn sowieso niet voor vormgeving bedoelt. In een ms Word document zet men ook geen kopjes of paragrafen in een tabel. Een tabel is handig om bijvoorbeeld prijsoverzichten weer te geven zodat die gemakkelijk te vergelijken zijn.
Zodra de layout uit tabellen bestaat, is het voor Google erg lastig om de structuur te herkennen, omdat de structuur dan afhankelijk is van stijl en niet van het verhaal dat u wilt overbrengen.
Een tabel in de HTML-code begint met <table> en eindigt met </table>. Zodra er geen tabulaire informatie op een webpagina staat, mag u ook geen <table> in de HTML-code terug kunnen vinden; zonder uitzondering.
Opmaak buiten de HTML
Zoals ik al eerder aangaf bestaat een webpagina uit informatie en vormgeving. Deze moeten helder gescheiden blijven, zodat een webbouwer gemakkelijk de vormgeving kan aanpassen in de toekomst. Er is geen reden om vorm in de HTML-code te plaatsen.
Fout is dus: <p style="font-weight: bold;">Paragraaf hier...</p>. Goed is: <p class="introduction">Paragraaf hier...</p>. Het goede voorbeeld gaat over de betekenis en niet over de vorm.
Lees het als een verhaal
Een HTML-pagina is als een ms Word document zonder vormgeving: een gestructureerd verhaal met elementen als kopjes en paragrafen. U moet deze HTML-code gewoon kunnen lezen als een compleet verhaal.
De belangrijkste informatie/content moet als eerste komen in de HTML‑code. Dus de tekst waarom het draait, het artikel, komt vòòr de informatie zoals ‘footnotes’, ‘meer over uw bedrijf’ en dergelijke. Voor een blinde klant is het helemaal niet leuk om op elke pagina voor de zoveelste keer hetzelfde verhaal over uw bedrijf te horen voordat de webbrowser de tekst voorleest waar het om draait.
Gestructureerde en betekenisvolle HTML-code is essentieel voor Google, blinde klanten en toekomstige aanpassingen. Twijfelt u over uw website of over het voorstel dat u wordt gedaan? U kunt altijd hierover contact met me opnemen.
Bart van de Biezen
Design Lead bij Incision. M'n achtergrond: Industrieel Ontwerpen en daarna Psychologie aan de Universiteit Twente, afgestudeerd bij Philips op midair pointing voor een nieuwe generatie TV's, Apple Design Award voor CSSEdit, usability onderzoeker bij MetrixLab en blogger.