In het kader van het voldoen aan de webrichtlijnen van overheidssites houd ik me bezig met het omzetten van bestaande web content, css en javascript zodat deze blijven werken en voldoen aan de XHTML Strict standaard die in de webrichtlijnen voorgeschreven is. De aanpassingen op bestaande sites die nodig zijn om alleen al aan de eis van XHTML Strict te voldoen wordt vaak onderschat. Men denkt dat men er met het veranderen van een paar tags wel is, op deze pagina zal ik tevens een opsomming geven van alle problemen waar ik zelf tegenaan gelopen ben en de mogelijke oplossingen.

Scheiding van structuur van een document en de presentatie.

Toen ik 20 jaar geleden begon met SGML was het uitgangspunt al we alleen de structuur van documenten zouden “taggen” en dat we dit alleen zouden doen op basis van structuur en het kunnen definiëren van een los onderdeel, in plaats van de opmaak van dat onderdeel. In de naamgeving van het onderdeel mocht ook nooit iets van de opmaak terug komen, dus tags zoals vettekop of cursiefonderschrift waren uit den boze. De bedoeling was om het uniform gecodeerde document van zeer verschillende opmaakt te kunnen voorzien voor de verschillende uitgaven en verschillende media.

Toen HTML ontstond (als vereenvoudigde DTD binnen de SGML standaard) was die scheiding tussen opmaak en structuur als iets aan het vervagen aangezien er speciale tags en attributen kwamen die duidelijk voor opmaak bedoeld waren zoals de tags B,I,U, FONT maar ook attributen als COLOR en BGCOLOR. In de daarop volgende HTML standaarden werd dit alleen maar erger omdat steeds meer websites mooie en bijzondere vormgeving wilden waarvoor soms erg lelijke en ingewikkelde HTML code gebruikt werd. De meest misbruikte tag is in dit opzicht wel de table tag. Veel ontwerpers probeerden met veel elkaar omsluitende tabellen de vormgeving te forceren, waardoor de HTML code één grote niet te onderhouden spaghetti code werd. Het W3C zag dat dit een weg zonder einde zou zijn en greep terug op de oorspronkelijke concepten van scheiding tussen structuur en opmaak.

XHTML (en in het bijzonder XHTML Strict) is deze stap. Bij XHTML zijn (bijna) alle tags en attributen die met opmaak te maken hadden verdwenen en is het de bedoeling om door middel van XHTML de structuur van de onderdelen op de internet pagina te definiëren en via CSS (Cascading Stylesheets) de opmaak hier aan toe te voegen. Een goed voorbeeld uit HTML zijn de H1 t/m H5 tags waarmee headings (kopregels) aangegeven kunnen worden. Maar binnen XHTML zijn de div en de span tag de belangrijkst tags geworden, waarbij de class of de id aangeeft welk onderdeel deze div of span omvat. Via CSS kan dan aan deze div of span opmaak en zelfs positionering binnen het document gedefinieerd worden. De div en span zijn in basis gelijk, maar de div is standaard een zogenaamd “block” element en de span is standaard een “inline” element. Voor een onderdeel in de lopende tekst gebruikt u dus een span en voor een complete alinea een div.

Wanneer uw website goed opgezet is op deze wijze en u de website een nieuwe stijl en vormgeving wilt geven, hoeft u in de meeste gevallen alleen maar de stylesheet aan te passen. Ik ben zelf een enorme fan van CSS en op de site van http://www.csszengarden.com/tr/dutch/ is te zien wat er allemaal mogelijk is met een goed XHTML ontwerp in combinatie met CSS (Stylesheets).

Doctype XHTML Strict

Wanneer u het Doctype omzet naar XHTML Strict zal er meer gebeuren in uw browser dan u zo op het eerste gezicht denkt. Behalve dat het complete DOM model ineens anders werkt, andere variabelen kent en oude variabelen ineens niet meer kent, zal ook de positionering van elementen veranderen. Ook uw javascript dient ineens “strict” te zijn en alle kleine foutjes in de css die in de Transitional mode nog wel werken, geven ineens een ander resultaat. Ik heb sites en pagina’s compleet zien omvallen door simpelweg het Doctype aan te passen. Een andere uitdaging is om de pagina’s nog steeds browser compatible te houden. In css en DOM model zitten er nog steeds hinderlijke verschillen tussen verschillende browsers.

In XHTML is het verplicht om een Doctype te gebruiken, in HTML was dit nog geen verplichting. De Doctype declaration komt altijd op de eerste regel te staan, dus voor de tag. De Doctype wordt door browsers en validators (programma's die de code van een pagina controleren op fouten) gebruikt om na te gaan welke syntax voor het XHTML document gebruikt moet worden. Voor de XHTML Strict variant moeten we de volgende Doctype gebruiken:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Verschillen tussen HTML en XHTML Strict

De volgende elementen mogen helemaal niet meer voorkomen:

De volgende Attributen van tags mogen niet meer gebruikt worden:

Attribuut alink is niet meer toegestaan binnen body.
Attribuut background is niet meer toegestaan binnen body.
Attribuut bgcolor is niet meer toegestaan binnen body, table, td, th, tr.
Attribuut border is niet meer toegestaan binnen img, object, maar mag nog wel bij  table.
Attribuut clear is niet meer toegestaan binnen br.
Attribuut language is niet meer toegestaan binnen script.
Attribuut link is niet meer toegestaan binnen body.
Attribuut name is niet meer toegestaan binnen form, img, maar mag nog wel bij a, button, input, map, meta, object, param, select, textarea.
Attribuut noshade is niet meer toegestaan binnen hr.
Attribuut nowrap is niet meer toegestaan binnen td, th.
Attribuut start is niet meer toegestaan binnen ol.
Attribuut target is niet meer toegestaan binnen a, area, base, form, link.
Attribuut text is niet meer toegestaan binnen body.
Attribuut type is niet meer toegestaan binnen li, ol, ul, maar mag nog wel bij a, button, input, link, object, param, script, style.
Attribuut value is niet meer toegestaan binnen li, maar mag nog wel bij  button, input, option, param.
Attribuut vlink is niet meer toegestaan binnen body.

De volgende elementen mogen niet meer voorkomen binnen een bepaalde context:

#PCDATA is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. 
Element a is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. 
Element abbr is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. 
Element acronym is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. 
Element b is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. 
Element bdo is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. 
Element big is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. 
Element br is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. 
Element button is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. 
Element cite is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. 
Element code is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. 
Element dfn is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. 
Element em is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. 
Element i is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. 
Element img is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. 
Element input is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. 
Element kbd is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. 
Element label is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. 
Element map is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. 
Element object is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. 
Element q is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. 
Element samp is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. 
Element select is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. 
Element small is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. 
Element span is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. 
Element strong is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. 
Element sub is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. 
Element sup is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. 
Element textarea is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. 
Element tt is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. 
Element var is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. 

De eerste stappen voor het omzetten van HTML naar XHTML

Een van de eerste dingen die u moet controleren en aanpassen is of uw bestaande HTML code well-formed is, dit houdt in dat:

• Alle elementen moeten gesloten worden
  • Incorrect: <p>Dit is een paragraaf.<p>Dit is nog een paragraaf.
  • Correct: <p>Dit is een paragraaf.</p><p>Dit is nog een paragraaf.</p>
• Ook lege elementen moeten gesloten worden
  • Incorrect: <br>
  • Correct: <br />
• Elementen moeten correct genest worden
  • Incorrect: <em><strong>Dit is tekst met nadruk.</em></strong>
  • Correct: <em><strong>Dit is tekst met nadruk.</strong></em>
• Attribuutwaarden moeten tussen aanhalingstekens
  • Incorrect: <td rowspan=3>
  • Correct: <td rowspan="3">
• Alle elementen en attributen moeten met kleine letters geschreven worden
  • Incorrect: <BODY><P ID="iets">Wikipedia</P></BODY>
  • Correct: <body><p id="iets">Wikipedia</p></body>
• Attributen mogen niet geminimaliseerd worden
  • Incorrect: <textarea readonly>READ-ONLY</textarea>
  • Correct: <textarea readonly="readonly">READ-ONLY</textarea>
• style- en script-elementen zijn #PCDATA en zullen dus geparsed worden. Speciale karakters, zoals <, moeten gecodeerd worden als entiteit of binnen een CDATA blok geplaatst worden
  • Incorrect: <script type="application/x-javascript">if (i < j) document.write("kleiner");</script>
  • Correct: <script type="application/x-javascript"><![CDATA[if (i < j) document.write("kleiner");]]></script>

Mogelijke problemen en de oplossingen.

Javascript DOM variable document.body.scrollTop geeft altijd de waarde nul (0) terug in strict mode en dient nu vervangen te worden door document.documentElement.scrollTop. Om alles ook browser compatible te houden kunt u beter de volgende code gebruiken:

var topper;

  if (!document.body.scrollTop) {
    topper = document.documentElement.scrollTop + 5;
  }
  else {
    topper = document.body.scrollTop + 5;
  }

Het rechtstreeks toekennen van een waarde aan een DOM element ( FloatDiv.style.top = '33px' ) werkt ook niet meer, dit dient u de vervangen door:

document.getElementById("FloatDiv").style.top = (topper + 10) + 'px';

Het border attribuut bij een IMG tag is niet meer toegestaan, op de meeste sites staat deze er wel om een ongewenste rand rond het plaatje te voorkomen. Het meest eenvoudige is het om alle border="0" attributen bij de IMG tag te verwijderen en in de css de volgende algemene regel op te nemen. Meestal zal ik NOOIT css opmaak op hoofd elementen toepassen, in dit geval is het wel handig, bij specifieke tags waar de border wel nodig is kan deze geplaatst worden en met !important over de algemene standaard heen gaan:

img { border: none; }

Aangezien de center tag niet meer is toegestaan en voor het omzetten vaak toch een snelle oplossing nodig is kan er een center div gemaakt worden, waarbij in de bestaande code de center tags omgezet kunnen worden naar center div. Strict genomen is dit niet correct omdat we toch een opmaak style in plaats van een structuur tag gebruiken maar voor conversie van oude code is dit een goede oplossing.

oud:
<center>Dit is gecentreerd <img src="test.gif" alt="test gifje"/></center>

nieuw:
<div class="center">Dit is gecentreerd <img src="test.gif" alt="test gifje"/></div>

css:
div.center { text-align: center; }

Dit is een demonstatie hoe u met behulp van eenvoudige divs en css een alternatief heeft voor een tabel met tekst in twee kolommen:

<html>
<head>
<title>Kolommen zonder tabel</title>
</head>
<body>

<style type="text/css">

div.outercontainer_001 { 
  width: 100%;
  border: 1px dotted blue;
  display: block;
} 

div.innercontainer_001 {
  width: 49%;
  float: left;
  margin: 4px;
  padding: 2px;
  border: 1px solid gray;  
}

div.innercontainer_002 {
  width: 49%;
  float: right;
  margin: 4px;	
  padding: 2px;	
  border: 1px solid gray; 	
}

</style>

<p>Dit is een demonstatie hoe u met behulp van eenvoudige divs en css een alternatief heeft 
voor een tabel met tekst in twee kolommen.</p>

<div class="outercontainer_001">
<div class="innercontainer_001">
Dit is de eerste kolom met wat tekst er in zodat we een beethe 
wrap krijgen en het ook nog wat lijkt. Deze kolom heeft als css attribuur float: left;
</div>
<div class="innercontainer_002">
Dit is de tweede kolom met wat tekst er in zodat we een beethe 
wrap krijgen en het ook nog wat lijkt. Deze kolom heeft als css attribuur float: right;
</div>
</div>

</body>
</html>