Betere HTML in 37 stappen

Een paar weken geleden publiceerde Tommy Olsson zijn artikel “Bulletproof HTML: 37 Steps to Perfect Markup“. Het is een leerzaam verhaal dat soms een belerend toontje heeft, maar desalniettemin voor velen de basiskennis van HTML kan vergroten. Een aantal dingen viel mij op.

Onder standardista’s is het nogal cool om geen XHTML, maar HTML te schrijven. Belangrijkste argument is doorgaans dat je XHTML als “text/html” en niet als XML mag serveren (omdat Internet Explorer daar geen raad mee weet). So what? zou je zeggen. Tommy Olsson: “We cannot use any of the features of XHTML when serving it this way, because we are not really using XHTML at all — we’re only pretending to.” Dan zou ik wel graag willen weten wat die ‘features’ zijn. Missen we echt iets? En over missen gesproken: mis je iets als je XHTML gebruikt in plaats van HTML? Ik vermoed van niet.

Wat ik niet wist was de betekenis van de opbouw van de DOCTYPE-declaratie (als <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">). Wat doet de ‘EN’ daar bijvoorbeeld? “Note that it doesn’t say anything about the language of the web page itself; it is the language of the DTD that is specified here.” Het eerste deel van de identifier heet de ‘public identifier’ en het tweede deel de ‘system identifier’. “If the system identifier is missing, or if there is no DOCTYPE declaration at all, browsers assume that this is an old document and render it in ‘quirks mode’.” (HĂ©, zou Anne bewust ‘quirks mode’ triggeren?)

Ook over character encoding is Olsson verhelderend. Ik wist bijvoorbeeld niet dat de character set die je in je HTML-pagina opneemt (bijvoorbeeld “<meta http-equiv="Content-Type" content="text/html; charset=utf-8">“) overruled wordt door de HTTP header die je mogelijk via de server verstuurt.

Over het address-element zegt Olsson dat “A common misconception is that address is meant to be used to mark up only postal addresses, but that is not the case.” Ook telefoonnummers en andere contactinformatie kan met het address-element opgemaakt worden. Hij vergeet evenwel te vermelden dat het bij het address-element gaat om de contactinformatie die van toepassing is op de informatie die een bepaalde pagina geeft. Een adresboek bestaat dus nietuit een lange reeks address-elementen.Alleen de contactgegevens van de maker van het adresboek zou je in een address-element mogen verwachten.

Olsson licht nog een paar HTML-elementen toe die we nooit gebruiken omdat geen CMS ze ondersteunt. Maar toch is het handig om te weten dat “A certain term should only be marked up with dfn once in a document (where it is first used and explained)” en dat “A common misconception is that var should be used for marking up variables in programming code samples”.

Over het alt attribute kan nooit genoeg gezegd worden: “This text equivalent should not describe the image; it should convey the equivalent information”. Olsson geeft ook een helder voorbeeld om deze stelling toe te lichten (zie step 33).

Tot slot beweert Olsson dat de waarde van een id, name and class attribute altijd moet beginnen met een letter. Ik dacht evenwel dat het ook een underscore mocht zijn?

Een aantal van dit soort artikel tesamen zou een prachtig boek kunnen vormen over de basis en de achtergrond van HTML; verplichte kost voor iedereen die al langer dan vijf jaar met HTML zit te knoeien.

Tags: , ,

5 reacties »

  1. <!DOCTYPE HTML> triggert toch echt standards mode. En over HTTP headers die de http-equiv overrulen; ik dacht dat jij /stuff/ helemaal doorgenomen had? ;)

    Even offtopic; gezien? :]

  2. Ha, waarom dacht je dat _ik_ die stuff _helemaal_ doorgenomen had?

    Niet gezien, ‘Notable Universal Design’, gefeliciteerd! (Maar het kan dus nog beter!?)

  3. Hey, moet je daar geen <em> gebruiken? ;) Ik weet ook niet waarom ik daar vanuit ging eigenlijk..

    En het kan zeker beter ja! Ben ik ook druk mee bezig :) Heb van Mike Cherim wat extra documenten met nuttige opmerkingen gehad. Meeste dingen liggen aan de Qore, dus die sijpelen vanzelf de site in.

  4. Ik ben ook wel benieuwd naar wat je nog kunt verbeteren!

  5. Toegankelijkere tabellen, zodat sites nu 100% kunnen scoren op de Webrichtlijnen toets.

RSS feed for comments on this post · TrackBack URI

Geef een reactie

Vul je gegevens in of klik op een icoon om in te loggen.

WordPress.com logo

Je reageert onder je WordPress.com account. Log uit / Bijwerken )

Twitter-afbeelding

Je reageert onder je Twitter account. Log uit / Bijwerken )

Facebook foto

Je reageert onder je Facebook account. Log uit / Bijwerken )

Google+ photo

Je reageert onder je Google+ account. Log uit / Bijwerken )

Verbinden met %s

%d bloggers op de volgende wijze: