DE VOOR­DE­LEN VAN GOE­DE HTML

Web Designer Magazine - - Professioneel Programmeren -

Spen­deer wat tijd aan de kwa­li­teit van de HTML en hou de laat­ste stan­daar­den bij om je werk als web­de­vel­o­per te ver­be­te­ren.

OUDE GEWOONTES

HTML heeft zich door de ja­ren heen aar­dig ont­wik­keld, waar­door het las­tig kan zijn om al­le ver­an­de­rin­gen bij te hou­den. Hier­door loop je het ri­si­co dat je elementen en tech­nie­ken ge­bruikt die toen mis­schien hip en hap­pe­ning wa­ren, maar die nu in­ge­haald zijn door al­ter­na­tie­ve be­na­de­rin­gen.

Som­mi­ge daar­van zul­len be­kend zijn, zo zie je zel­den nog een <mar­quee>-ele­ment. Maar er tre­den nog re­gel­ma­tig pro­ble­men op door het ge­bruik van uit­ge­fa­seer­de elementen. Je mist kan­sen als je de voor­de­len van de Html5-fea­tu­res niet ge­bruikt.

Een van de meest voor­ko­men­de pro­ble­men heeft te ma­ken met de pre­sen­ta­tie­mark-up. Dat be­te­kent dat tags zo­als <b> en <cen­ter> het ui­ter­lijk van een pa­gi­na be­pa­len in plaats van de con­tent en de struc­tuur. Het ui­ter­lijk moet be­paald wor­den door CSS. Dat ver­groot de lees­baar­heid en leidt tot een lexi­be­le­re en be­ter be­heer­ba­re code.

Soms wor­den in­li­ne sty­les ge­bruikt in plaats van of naast de pre­sen­ta­tie­mark-up. Dat is niet echt veel be­ter, want als je dan iets wilt ver­an­de­ren, moet je dat op meer­de­re plek­ken te­ge­lijk doen. Neem de tijd om net­jes klas­sen en ID’S voor je elementen te spe­ci ice­ren, zo­dat je ze met ex­ter­ne CSS kunt op­ma­ken.

Het is ook han­dig om al­leen de nieuw­ste Ht­m­l­ele­men­ten te ge­brui­ken om je con­tent te structureren. Met ‘se­man­ti­sche’ tags als <he­a­der>, <foo­ter>, <sec­ti­on> en < igu­re> kun je een blok­ach­ti­ge pa­gi­na­struc­tuur de in­i­ë­ren op een in­tu­ï­tie­ve­re en lees­baar­de­re ma­nier dan in het ver­le­den, toen je je moest be­hel­pen met het nes­ten van <div>-tags. Het is ook be­lang­de co­det HTML nu mo­ge­lijk­he­den heeft om din­gen te doen waar­voor eerst Ja­vascript no­dig was. Het au­to­fo­cus-at­tri­buut is daar een pri­ma voor­beeld voor. Je hebt geen Ja­vascript-code no­dig om de focus in te stel­len als de pa­gi­na ge­la­den wordt. Je kunt dat at­tri­buut aan het ge­wens­te ele­ment toe­ken­nen om het­zelf­de te be­rei­ken, wat iets min­der op­drin­ge­rig is voor de ge­brui­kers.

En je weet in­mid­dels wel dat je audio- en vi­deo­con­tent rechtstreeks in kunt bed­den met HTML en dat je kunt te­ke­nen met SVG en Can­vas. Het is on­waar­schijn­lijk dat je nog Flash of an­de­re plug-ins no­dig hebt.

LEES­BAAR PRO­GRAM­ME­REN

Het is mis­schien een dood­doe­ner, maar com­men­taar is een must. Het is voor ie­de­re de­vel­o­per een nacht­mer­rie als hij zijn ei­gen code of die van ie­mand an­ders la­ter moet aan­pas­sen en dan moet ont­cij­fe­ren hoe die pre­cies in el­kaar zit. Waar­om zou je je­zelf op de lan­ge ter­mijn dan niet wat tijd besparen en nu over­al com­men­taar bij zet­ten als je toch be­zig bent. On­der­druk wel de nei­ging te veel com­men­taar toe te voe­gen. Als een re­gel zich­zelf ver­klaart, hoef je daar niets aan toe te voe­gen. Let ook op het in­sprin­gen van je code. Het is een goe­de ge­woon­te om dat re­de­lijk recht­lij­nig te doen: ge­bruik in­sprin­gin­gen als elementen ge­nest zijn – er zijn tools die je daar­bij hel­pen om het over­zicht te hou­den. Wit­re­gels ge­bruik je tus­sen los­se blok­ken code, zo­als sec­ties en be­lang­rij­ke div’s. Wat min­der ge­brui­ke­lijk, maar ook han­dig, is om elementen met be­hulp van tabs of spa­ties on­der el­kaar te zet­ten.

De lees­baar­heid van je code houdt meer in dan al­leen de lay-out en com­men­ta­ren. Klas­sen­na­men en ID’S dra­gen ook bij aan de on­der­houds­vrien­de­lijk­heid van de code. Hou ze con­sis­tent en zorg er­voor dat ze be­schrij­ven wat de con­tent er­van is. Het kan soms han­dig zijn om wat meer klas­sen te de in­i­ë­ren dan je in eer­ste in­stan­tie gaat ge­brui­ken. Over­drijf daar niet mee, maar het kan je hel­pen voor de lees­baar­heid en om la­ter stij­len zon­der al te veel moei­te te kun­nen ver­an­de­ren.

Neem ten slot­te de tijd om een goe­de do­cu­ment­struc­tuur voor je pa­gi­na op te zet­ten. In de meest ba­sa­le vorm be­te­kent dat de elementen <html>, <head> en <bo­dy>. Denk ook aan de struc­tuur bin­nen de bo­dy. Dat is maar al te vaak een aan­tal la­gen met div-elementen. Vol­gens het W3C moet je een <div> al­leen ge­brui­ken als er geen an­der ele­ment ge­schikt voor is. Denk in plaats daar­van ook aan het ge­bruik van <sec­ti­on>, <ar­ti­cle> en an­de­re tags.

BE­TE­RE SEO

Zoek­ma­chi­ne­o­p­ti­ma­li­sa­tie is voor web­de­vel­o­pers pas iets waar ze in een la­ter sta­di­um aan den­ken. Maar zoek­ma­chi­nes zijn slim en met een paar Seot­weaks ach­ter­af krijg je echt geen ho­ge­re ran­king op de re­sul­taat­pa­gi­na als de kern van je web­pa­gi­na niet is ont­wor­pen met vind­baar­heid in het ach­ter­hoofd. Je moet be­se en dat SEO geen exac­te we­ten­schap is en dat zoe­kal­go­rit­mes con­ti­nu ver­an­de­ren. Het heeft geen nut om er een aan­tal nieu­we Html-elementen in te prop­pen. De bes­te ma­nier om er­voor te zor­gen dat je si­te goed scoort, is door je con­tent goed te structureren en pro­gram­me­ren, zo­dat een zoek­ma­chi­ne kan be­grij­pen wel­ke bood­schap je wil over­bren­gen.

“Com­men­taar is een must. Het is voor een de­vel­o­per een nacht­mer­rie om la­ter te moe­ten ont­cij­fe­ren hoe het al­le­maal pre­cies in el­kaar zit.”

Ge­bruik al­le voor­de­len van de se­man­ti­sche elementen van HTML5 bij het struc­tu­ren van je pa­gi­na’s. Je kunt de pa­gi­na seg­men­te­ren met <he­a­der>, <main> en <foo­ter> etc, wat de zoek­ma­chi­ne be­ter helpt het be­lang van de in­for­ma­tie in de be­tref­fen­de sec­ties in te schat­ten dan met sim­pe­le div’s. Het <main>-ele­ment moet het groot­ste deel van de pa­gi­na­con­tent be­vat­ten die uniek is voor de be­tre en­de pa­gi­na.

Bin­nen de con­tent zelf kun je ook ver­schil­len in sig­ni ican­tie van de­len van de tekst aan­bren­gen. Klei­ne voet­no­ten zijn voor SEO min­der be­lang­rijk dan je be­lang­rijk­ste bood­schap, dus ge­bruik <asi­de> en <strong> om daar ver­schil in aan te bren­gen. Weer­sta de ver­lei­ding om daar de <h1 6>tags voor te ge­brui­ken. Die zijn be­doeld voor de con­tent­kop­pen, niet voor de lay-out.

Het is be­lang­rijk dat een craw­ler e ec­tief door je si­te kan na­vi­ge­ren. De <nav>-tag is ge­maakt om een be­lang­rij­ke set aan na­vi­ga­tie­links te be­vat­ten. Als er links zijn die niet door een zoek­ma­chi­ne mee­ge­no­men moe­ten wor­den, kun je het at­tri­buut rel=”no­fol­low” ge­brui­ken om dat aan te ge­ven.

Zorg er ten­slot­te voor dat je pa­gi­na een kor­te, veel­zeg­gen­de <tit­le> heeft en zet re­le­van­te in­for­ma­tie die de be­doe­ling van de si­te sa­men­vat in de be­schrij­ving en de key­words van de <me­ta>-tag.

HOUD ALLES TOE­GAN­KE­LIJK

De af­ge­lo­pen ja­ren is het be­sef dat het web toe­gan­ke­lijk moet zijn fors toe­ge­no­men, maar als een si­te com­plexer wordt moet je daar meer over na­den­ken. Toch hoeft dat voor een de­vel­o­per niet moei­lijk te zijn. Veel van de tech­nie­ken die zor­gen voor be­ter lees­ba­re en be­heer­ba­re code on­der­steu­nen ook toe­gan­ke­lijk­heid. Als je je pa­gi­na’s goed struc­tu­reert en vol­le­dig ge­bruik­maakt van de se­man­ti­sche elementen, dan wordt het niet al­leen mak­ke­lij­ker voor je­zelf en de zoek­ma­chi­nes om ze te le­zen, maar wer­ken ze ook be­ter met spe­ci­a­lis­ti­sche tools.

Er zijn na­tuur­lijk een paar din­gen die je in het ach­ter­hoofd moet hou­den als je toe­gan­ke­lij­ke HTML schrijft. Al­le tags voor a beel­din­gen zijn be­lang­rijk en moe­ten ge­bruikt wor­den om de be­lang­rij­ke vi­su­e­le con­tent op je pa­gi­na te be­schrij­ven. Ge­bruik ze aan de an­de­re kant niet voor de­co­ra­tie­ve a beel­din­gen die ge­ne­geerd kun­nen wor­den. Zorg er ook voor dat je links dui­de­lij­ke, be­schrij­ven­de na­men heb­ben. Aan zo­iets als ‘klik hier’ heb je niet veel, ver­vang dit door iets dat een be­zoe­ker ver­telt waar hij heen gaat.

Ta­bel­len moet je al­leen ge­brui­ken voor, in­der­daad, ta­bel­len – niet voor de lay-out. Een lay-out ma­ken op ba­sis van ta­bel­len is voor een de­vel­o­per mis­schien mak­ke­lijk, maar screen­rea­ders heb­ben er moei­te mee om­dat ze in de war ra­ken over de volg­or­de waar­in de in­for­ma­tie op de pa­gi­na ge­toond moet wor­den. Pro­beer dat dus te ver­mij­den.

Als laat­ste: wees voor­zich­tig met dy­na­mi­sche con­tent die wel­licht niet zicht­baar is voor screen­rea­ders. De mees­te kun­nen over­weg met Ja­vascript, maar als je fo­cust op Html-fea­tu­res voor het pre­sen­te­ren van je con­tent, heb je de min­ste kans iets te im­ple­men­te­ren op een ma­nier die pro­ble­men gaat op­le­ve­ren.

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.