HTML-snelcursus voor bloggers: voorkom rommelige code in webartikelen

Onderwater-knop

Vrijwel alle cms-editors kennen een 'onderwater'-knop. Hiermee schakel je van de wysiwyg- naar de html-weergave, en kijk je dus direct naar het 'dna' van je artikel. Het is een goede gewoonte dit altijd een keer te doen, zeker voordat je je artikel publiceert. Maar waar moet je precies op letten?

Paragrafen

Met de paragraaf-functie van HTML kun je je artikel netjes in paragrafen verdelen en zo structuur aanbrengen in de tekst. Zoekmachines begrijpen door het correct toepassen van deze paragraaf-functie beter waar je tekst over gaat. Paragrafen worden bovendien netjes van elkaar gescheiden door een witregel. De code ziet er als volgt uit:

<p>Dit is paragraaf 1tekst tekst tekst</p>
<p>Dit is paragraaf 2 tekst tekst tekst</p> enz. 

Vertrouw je blind op de editor, dan kan het voorkomen dat deze geen paragraaf-elementen gebruikt, maar <br> of <br />, zogenaamde 'line breaks' ofwel 'harde enters'. Aan de voorkant zie je geen verschil, want twee line breaks achter elkaar zorgen netjes voor een witregel. Maar semantisch gezien is het heel wat anders: het is een witregel midden in een paragraaf. Voor zoekmachines zijn die optische witregels niet relevant en zal het de nieuwe paragraaf niet als zodanig herkennen. Eigenlijk gebruik je line breaks alleen bij bijvoorbeeld gedichten, waar je eerder dan gebruikelijk een nieuwe witregel zou willen. Ook bij bijvoorbeeld adressen zijn line breaks de aangewezen manier om een nieuwe regel te starten. Een andere 'vervuiling' die vaak optreedt is de toevoeging van style-attributen. De editor plakt dan lokale opmaak door de regels heen die de css-regels overrulen. Dat kan gemakkelijk gebeuren als je bijvoorbeeld tekst rechtstreeks vanuit Word in een webeditor plakt. Die vervuiling ziet er dan ongeveer zo uit:

<p style="margin-bottom: 1.3cm; line-height: 120%;">
Dit is paragraaf 1tekst tekst tekst</p> enz. 

Dit zorgt voor inconsistenties in de layout van je artikel, want je verandert hier plaatselijk de regelafstand en de ruimte tussen deze en de volgende paragraaf. Verwijderen dus! Niets dan <p> en </p> is nodig, tenzij je heel bewust van de standaard layout wilt afwijken.

Koppen en tussenkoppen (headings)

Met headings geef je structuur aan op een webpagina, en uiteindelijk ook in de structuur van je blogposting. Hoewel HTML5 de regels voor headings op een webpagina flink heeft veranderd, gelden voor webartikelen nog altijd dezelfde basisregels. Vaak heeft een artikel de volgende heading-structuur:

<h1>De titel van je blogpost</h1>
<h2>Tussenkopje 1</h2>
<h2>Tussenkopje 2></h2> 

enzovoorts. In sommige gevallen is de kop van je artikel een h2, omdat de webbouwers gekozen hebben om je sitelogo een h1 te geven bijvoorbeeld. Je tussenkopjes krijgen dan een h3 mee. Kijk dus van tevoren even goed naar de structuur van jouw blog. Dat kun je bijvoorbeeld doen door met de rechtermuisknop in je browser op een artikelkop te klikken, en vervolgens voor 'inspect element' te kiezen. Je krijgt nu de html-code van de kop te zien. Het voorbeeld hieronder laat zien dat de koppen op mijn blog de h1-headingtag hebben. Alle tussenkopjes krijgen in mijn geval dus een h2-tag.

In sommige gevallen zijn tussenkoppen verdere verdeling in sub-hoofdstukken, in dat geval gebruik je <h3>. Je kunt zo tot maximaal <h6> aan subniveau's aanbrengen, maar ben daar voorzichtig mee: het maakt je artikel behoorlijk chaotisch. Voorbeeld:

<h1>Zo verzorg je je huisdieren</h1>
 <p>Inleidingstekst</p>
 <h2>Verzorging van honden</h2> 
 <p>tekst tekst tekst</p> 
 <h2>Verzorging van katten</h2> 
 <p>tekst tekst tekst</p

Tip: Geef je headings meer semantische waarde mee door mini-zinnen in plaats van losse steekwoorden . Google's taalbegrip zal steeds verder toenemen en ook je tussenkoppen en daarmee je hele artikel dus zo beter kunnen interpreteren.

Vette / schuine tekst

HTML biedt je de mogelijkheid om tekst vet- of schuingedrukt te plaatsen. Ben hier wel spaarzaam mee, teveel trucjes in je tekst maken het geheel visueel onrustig.

<bold>Hier plaats je vette tekst</bold> 
<strong>Hier je plaats vette tekst, tweede manier om dit te doen</strong>
<em>Hier je schuine tekst (bv bijschriften)</em> 

Het verschil tussen <bold> en <strong> is de afgelopen jaren zo goed als komen te vervallen.

Links

Links in je tekst geef je aan met het html-element <a> en sluit je met </a>. Deze vul je altijd aan met ‘attributen’ (eigenschappen die wat zeggen over de link). Deze attributen plaats je direct achter de a. Dus:

<a attribuut1 attribuut2 etc.>Hier de klikbare linktekst</a> 

Veelgebruikte attributen zijn: href, target en title Zo gebruik je ze:

href = "hier de daadwerkelijke url, incl http://"
target = "_blank" (nieuwe tab openen) of "_self" wanneer je in hetzelfde tab wil openen
title = "de 'mouse over' van de link)" - Hier kun je je bezoekers een beschrijving meegeven van de website of pagina waar de link heenleidt."

Voorbeeld:

Vind hier mijn <a href="https://www.raymondluijbregts.nl" 
target="_blank" 
title="Dit is de website van Raymond Luijbregts">website.</a> 

Het maakt overigens niet uit in welke volgorde je attributen plaatst.

Tip: Advertorial? Gebruik dan ook het attribuut

rel="nofollow"

Zo voorkom je dat Google je bestraft voor het plaatsen van 'verkochte' links en SEO-waarde weglekt naar een site die dat inhoudelijk niet per se verdient. Doe je dat niet, dan kan zowel de website in kwestie als die van jou daar 'SEO-strafpunten' voor krijgen.

Afbeeldingen

Afbeeldingen in je artikelen plaats je met het element <img>. Dit element hoef je niet te ‘sluiten’ met </img>. Ook <img> heeft verplichte en niet-verplichte attributen, namelijk

src=”hier de link naar je afbeelding” (verplicht) 
alt=”hier de titel van je plaatje" 

Dat laatste lees je als je met je muis eroverheen gaat, of op een screenreader (voor blinden en slechtzienden). Vanuit SEO-optiek is het goed de alt-beschrijving altijd mee te geven, zoekmachines weten hierdoor beter wat op de afbeelding te zien is. Maar ook vanuit usability-standpunt is er wat voor te zeggen. Het is een goede gewoonte ook de afmetingen van de afbeelding in de html-code vast te leggen. Zo kan de browser alvast de juiste ruimte 'reserveren' voor de afbeelding, nog voor de afbeelding zelf is ingeladen. Dat doe je door middel van de attributen 'width' en 'height'. Voorbeeld

<img src=”http://www.jouwwebsite.nl/images/fotokees.jpg” 
alt=”Foto van Kees”  
width="600px" height="150px" /> 

Lijstjes

Vaak zul je informatie in lijstjes willen plaatsen. Dat is niet alleen overzichtelijk voor de lezer, maar ook voor zoekmachines. Er zijn in html meerdere soorten lijstjes. De belangrijkste twee zijn geordende lijstjes en ongeordende lijstjes (ordered lists en unordered lists). Je gebruikt een ordened list als de specifieke volgorde belangrijk is. Bijvoorbeeld in het geval van een top-5. De juiste cijfers worden dan automatisch ervoor geplaatst. Een voorbeeld van een geordende lijst: Een voorbeeld van een geordende lijst:

<h2>De DJ-Top 3</h2> 
<ol> 
 <li>Hardwell</li> 
 <li>Armin</li> 
 <li>Avicii</li> 
</ol> 

Ongeordende lijstjes krijgen standaard een bullet point, tenzij dit in de CSS anders is gedefinieerd. Een voorbeeld van een ongeordende lijst:

<h2>Mijn lievelingsdranken</h2> 
<ul> 
 <li>Speciaalbier</li> 
 <li>Whisky</li> 
 <li>Koffie</li> 
</ul> 

Een lijstje 'open' je dus met <ol> of <ul> (ordered of unordered) en sluit je met '</ol> of </ul>. De items in de lijst zelf open en sluit je in beide gevallen met <li> </li. Li staat hier voor ‘list item’. De heading erboven is overigens niet noodzakelijk, maar wel de manier om je lijstje een ‘kop’ te geven.

Beschrijvingslijstjes

Beschrijvingslijstjes (description lists) geven extra informatie over een bepaald woord/term/begrip. Zo’n lijstje open en sluit je met <dl> </dl> . De term definieer je met <dt> </dt>. De waarde definieer je met <dd> </dd>. Voorbeeld:

<h2>Tomorrowland 2013</h2> 
<dl> 
 <dt>Bezoekersaantal:</dt> 
 <dd>180.000></dd> 
 <dt>Muziekstijl:</dt> 
 <dd>Dance</dd> 
 <dt>Aantal podia:</dt> 
 <dd>15</dd> 
</dl> 

Span-elementen: bijna altijd ongewenst

De elementen <span> </span> en alle bijbehorende attributen (font-size / font-weight etc) zijn bedoeld voor het plaatselijk veranderen van de opmaak (lettertypen, fontgrootte etc.) en horen niet in je berichten thuis, tenzij je heel goed weet wat je doet en bijvoorbeeld zeer bewust stijluitzonderingen wilt aanbrengen of microdata gaat implementeren.

Zeldzamere html-tags die nuttig kunnen zijn

<blockquote>

Hiermee geef je een quote weer. Let wel even op een belangrijk verschil: maakt je website gebruik van HTML5, dan is dit altijd een quote van een andere bron, dus niet uit het artikel waarin je de quote plaatst. Je gebruikt de code dan met het attribuut 'cite'. Voorbeeld: 

<blockquote cite="https://nl.wikipedia.org/wiki/Zoekmachineoptimalisatie">
Sommige webmasters manipuleerden hun posities in de zoekresultaten 
door pagina's aan te maken met overbodige of irrelevante meta tags. 
In Duitsland is dit manipuleren van zoekresultaten 
in 2004 door de rechtbank verboden.
</blockquote> 

Pro-tip: Je kunt in blockquotes gebruikmaken van headings, paragrafen en zelfs het HTML5-element 'footer' voor extra structuur en semantiek.

<q>

Hiermee geef je een korte quote aan in je lopende tekst.

<figure>en <figcaption> (alleen HTML5!)

Met de semantische HTML5-elementen <figure> en <figcaption> kun je zelfstandige informatieblokken in je artikel als dusdanig aanmerken, vanuit je tekst naar verwijzen en bovendien deze informatie op semantisch juiste manier voorzien van een bijschrift. Zo'n informatieblok kan een afbeelding zijn, een stuk tekst, een diagram of bijvoorbeeld voorbeeldcode zoals ik ook in dit artikel heb gebruikt. Het gaat te ver om in dit overzichtsartikel uit te wijden over deze waardevolle, maar ietwat ingewikkelde elementen. Ik zal daar zeker in een aparte blogpost uitgebreid op terugkomen.

Volg Raymond Luijbregts via Twitter of Google+