Je kent dat wel; je bent lekker op dreef met XHTML en CSS, je houdt je trouw aan het zoveel mogelijk scheiden van structuur en stijl en dan ineens ben je de draad kwijt. Een overdaad aan class en id attributen neemt bezit van je XHTML en je stylesheet raakt zo vol dat je door de bomen het bos niet meer ziet. Geen paniek, via enkele methodes ziet het leven er een stuk rooskleuriger en je XHTML en CSS er een stuk overzichtelijker uit.

‘Betekenisvolle’ markup, een goede start

Je begint met de content, of — in het geval van een template — een idee van de content. Maar hoe nu verder? Wat je met CSS kunt doen, hangt sterk af van de kwaliteit van je XHTML. Hoe eenvoudiger en betekenisvoller je markup, hoe meer invloed met CSS. Neem bijvoorbeeld een serie navigatie-links:

About
Vision
Products
Contact

In veel gevallen wordt deze als volgt opgemaakt:

<a href="about/">About</a><br />
<a href="vision/">Vision</a><br />
<a href="products/">Products</a><br />
<a href="contact/">Contact</a>

Hoe maak je het op zodat het straks lijkt op het beeld wat je voor ogen hebt? Het antwoord is simpel; doe het niet. Bovenstaand voorbeeld kost uiterst veel moeite om te manipuleren via CSS. Je kunt er natuurlijk een table van maken, zoals vaak gebeurt, of misschien een verzameling div’s. Maar dit komt de overzichtelijkheid en flexibiliteit van je code niet ten goede en begint al snel op een ‘hack’ te lijken. Kan het niet veel eenvoudiger? Ja, structureren doe je namelijk met XHTML en opmaken met CSS.

Om het meeste uit XHTML en CSS te halen, kun je het concept van scheiding tussen structuur en stijl vrij letterlijk nemen. Zet elke gedachte aan het uiterlijk uit je hoofd en kijk naar wat nu precies de content is. In dit geval hebben we het over een lijst, een lijst met navigatie-links:

<ul>
<li><a href="about/">About</a></li>
<li><a href="vision/">Vision</a></li>
<li><a href="products/">Products</a></li>
<li><a href="contact/">Contact</a></li>
</ul>

Via dezelfde denkwijze kun je hele documenten opmaken zonder nog maar één regel CSS te hebben geschreven. Ook hoeft de XHTML praktisch niet meer aangepast te worden voor de toepassing van CSS.

Ondanks dat XHTML een erg simpele taal is, staat je een uitgebreid pakket aan elementen ter beschikking voor het ‘betekenisvol’ opmaken van je documenten. Veel van deze elementen zul je echter in zeer speciale gevallen gebruiken. Enkele van de meest gangbare ‘betekenisvolle’ elementen zijn p, h1 tot en met h6, ul, li, strong, em, cite en de buitenbeentjes div en span.

“Kun je meer specifiek zijn?”

Laten we vervolgens aan het uiterlijk sleutelen. Stel, je past de standaard lijstweergave aan en zet er een kader omheen.

ul {
list-style-type: none;
border: 1px solid #000;
}

De kans is echter groot dat er andere lijsten op de pagina aanwezig zijn, die je niet wilt laten beïnvloeden. Dit is het ideale moment om een id of class attribuut toe te voegen.

Een voor de hand liggende oplossing is door deze te plaatsen op het ul element. Maar misschien wil je nog meer aan de navigatie toe te voegen wat na de lijst komt. In dat geval kun je alle navigatie binnen een div plaatsen. Bijvoorbeeld:

<div id="navigatie">
<ul>
…
</ul>
<p>
Want to know <a href="offers/">more about our special offers</a>?
</p>
</div>

Wat dit allemaal voor nut heeft blijkt als je vervolgens de CSS aanpast:

#navigatie ul {
list-style-type: none;
border: 1px solid #000;
}

Bovenstaande regel is meer specifiek dan de algemene regel om alle ul te beïnvloeden. Nu zal alleen de lijst die binnen de sectie #navigatie valt worden beïnvloed. Op soortgelijke wijze kun je nu veel meer aan de navigatie toevoegen zonder de markup verder te hoeven aanpassen. Bijvoorbeeld:

#navigatie ul {
list-style-type: none;
border-bottom: 3px solid #a99;
margin: 0; padding: 0;
width: 20%;
}
#navigatie li {
margin: 0: padding: 0;
text-align: center;
color: #000; background: #dde;
border-top: 3px solid #a99;
}
#navigatie a {
color: #977; background: transparent;
text-decoration: none; font-weight: bold;
}

Deze lijst heeft meer betekenis gekregen door hem op te maken als een unordered list. Het uiterlijk is bepaald door de stylesheet.

De kop erbij houden

Tot nu toe heeft een navigatie-lijst als voorbeeld gediend, maar graag laat ik nog een veelvoorkomende situatie zien. Hoe vaak heeft ieder van ons zich niet schuldig gemaakt aan het volgende.

<p>
<b>Kop boven een paragraaf</b><br />
Tekst in een paragraaf.
</p>

Een veel betere constructie is deze:

<h1>Kop boven een paragraaf</h1>
<p>
Tekst in een paragraaf.
</p>

Dergelijke methodes zijn beter bruikbaar voor search engine robots en gebruikers van screenreaders, plus dat de kwaliteit van je XHTML gewoon beter is. Een ander groot voordeel: je kunt nu meer met CSS doen.

De kneep zit hem in het omsluiten van content met relevante tags. Op blokken is veel meer invloed uit te oefenen dan op een reeks content gescheiden door linebreaks.

Bovendien, als je ‘betekenisvolle’ XHTML elementen gebruikt, zul je snel merken dat veel unieke elementen specifieke doeleinden hebben. Zo zul je een kop (bijvoorbeeld, h1) niet snel gebruiken voor een lijst. De XHTML is een stuk leesbaarder, voor jezelf en je collega’s. Het onderhouden en produceren van nieuwe XHTML wordt hierdoor een stuk eenvoudiger. Ook blijft je CSS schoner, aangezien je niet voor alles een class of id hoeft te gebruiken.

Wat je zoal met een ‘betekenisvolle’ constructie als hierboven kan doen blijkt uit de volgende CSS.

h1 {
color: #c00; background: url("decostempel.gif") #fff bottom left no-repeat;
font: 160% normal "Palatino", serif;
padding: 3px 8px 6px 40px; margin: 0;
border-bottom: 1px solid #c00;
border-right: 1px solid #c00;
}
p {
color: #556; background: url("schaduwrand.gif") #ddd top left repeat-x;
margin: 0 0 1em; padding: 10px 8px;
}

In het kort

1. Baseer je XHTML op de aard van de content, in plaats van het beoogde uiterlijk. Daarmee leg je een solide basis om te manipuleren met CSS. De XHTML wordt zo gelijk een stuk eenvoudiger door voor onderhoud en uitbreiding.
2. Om de eenvoud en helderheid van je XHTML te behouden, voeg je zo weinig mogelijk extra tags en attributen toe. Als je een class of id toevoegt, plaats deze dan op een zo hoog mogelijk niveau. (bijvoorbeeld, op table of ul in plaats van iedere td of li afzonderlijk)

• Home
• Artikelen
• Colofon