Structurele optimalisatie
Ontwikkelen in XHTML gaat veel verder dan het omzetten van kapitalen naar onderkasten, of het toevoegen van schuine streepjes aan het eind van een tag. Als het daar bij zou eindigen en het enkel het strakker maken van code zou zijn, dan zou niemand zich daar druk om maken.
Opmaken in functie van betekenis i.p.v. het visuele
De pure essentie van ontwikkelen aan de hand van webstandaarden is het scheiden van structuur en presentatie. De reden hiervoor is dat de visuele aspecten hierdoor eenvoudig te beheersen en te wijzigen zijn aan de hand van een CSS file.
In het webstandaarden universum wordt XHTML uitsluitend gebruik voor het opzetten van de document structuur. Goed gestructureerde documenten hebben evenveel betekenis voor een Palm Pilot als voor een schermlezer of iemand die je site in een nieuwe browser bekijkt. Zelfs oudere browsers zonder CSS ondersteuning, of nieuwere browsers waar om de een of andere reden CSS is uitgeschakeld kunnen deze pagina's perfect bekeken worden met behoud van de structuur.
Structurele vs. Nietszeggende elementen
Vele webontwikkelaars hebben de gewoonte opgebouwd om opmaak aan te maken zonder enige vorm van structuur.
Voorbeeld: sommige designers zouden het volgende doen om een lijst te bekomen:
Item <br />
Another item <br />
A third item <br />
Om dit te verwezenlijken bestaat er echter een HTML element dat precies doet wat er hier verwacht wordt.
<ul>
<li>Item</li>
<li>Another item</li>
<li>A third item</li>
</ul>
Misschien wens je echter niet dat er dan een bullet verschijnt voor ieder deeltje van de lijst. Het is dan hier dan CSS ter hulp snelt. Aan de hand hiervan kan je het volledig uitzicht van de lijst bepalen. Zo kan het er zelfs een horizontale navigatiebalk van maken. De mogelijkheden zijn eindeloos.
Visuele elementen en structuur
Websites ontwikkelen in XHTML en CSS gebruiken voor de lay-out zorgt niet steeds voor een toegankelijke, overdraagbare of bandbreedte bewuste site. Deze technieken kunnen net zo goed misbruikt worden als zijn voorgangers. Langdradige XHTML opmaak verspilt net zoveel tijd van de gebruiker als HTML dat deed. Te gedetailleerde CSS is geen bekwame vervanger voor HTML gebruikt voor presentatie. Dat zou gewoon het ene slechte zijn dat het andere vervangt.
Moet elk element structureel zijn?
Soms kan het aanvaardbaar zijn om in transitional sites sommige elementen bewust niet structureel te maken. Zelfs in CSS lay-outs mogen sommige elementen niet-structureel zijn.
Deze elementen kunnen meta-structureel zijn. Ze kunnen opgemaakt worden via generische structurele elementen en specifieke attributen die hun grotere structurele rol toelichten in het design.
Meta-structurele elementen
Er bestaan enkele componenten die een meta-structuur kunnen aanmaken, om zo de pagina grootte te beperken en om de lay-out vast te leggen, zonder te moeten resulteren in presentatie opmaak.
Indien correct gehanteerd is <div> het stokpaardje van structurele opmaak, terwijl 'id' een klein en handig hulpmiddel is om compacte XHTML te schrijven, op intelligente manier CSS toe te passen en gesofisticeerde functies aan je website te koppelen via het standaard Document Object Model (DOM).
De <div> en <span> elementen bieden in samenwerking met de 'id' en 'class' attributen een generisch mechanisme aan om structuur aan documenten toe te voegen. Deze elementen bepalen of inhoud inline (span) of block-level (div) moet zijn. Toch hebben ze geen visuele invloed zonder verdere toepassing van style sheets. Zo kan je HTML aanpassen naargelang je behoeften.
id tegenover class
Het id attribuut is niet nieuw in XHTML, zoals het class attribuut, of de span en div elementen niet nieuw zijn. Ze dateren allemaal nog van HTML. Het id attribuut kent een unieke naam toe aan een element. Elke naam kan slechts eenmaal gebruikt worden op een bepaalde pagina. De class attribuut daarentegen kan telkens hergebruikt worden op dezelfde pagina.
De kracht van id
Het id attribuut is ongelofelijk krachtig. Zo kan het onder andere dienen als:
- Style sheet selector, die ons in staat stelt strakke en minimale XHTML te gebruiken;
- Target anker voor hypertext links, ter vervanging van het verouderde 'name' attribuut;&
- Referentie naar een bepaald element vanuit een DOM script;
- Naam van een gedeclareerd element.