Valide markup voor een artikel

Wat is nu de beste XHTML markup voor een artikel? Hoe zorg ik er voor dat de XHTML semantisch iets zegt over de structuur en de waarde van de elementen op zo’n wijze zodat ik ook voldoende mogelijkheden heb voor opmaak. Met die vragen ben ik begonnen aan dit projectje. Het doel hiervan: een markup samenstellen voor artikelen waarbij ik zelf het gevoel heb dat dat wel oke is.

Titels en paragrafen

De keuze van HTML elementen voor het opmaken van de basis onderdelen van een artikel zoals de titels, koppen en paragrafen staat redelijk vast. Zo verwacht je volgens de W3C standaarden voor de titel of kop van een artikel een <h1>. En voor alle daarna volgende koppen de elementen <h2> tot <h5>. De paragraven in de tekst worden uiteraard opgenomen tussen een <p> element.

<h1>Lorem ipsum</h1>
<p>...</p>
<h2>Dolor sit amet</h2>
<p>...</p>

Meta informatie

Naast de tekst van het artikel zelf, hoort bij een artikel ook allerlei meta-informatie. Bijvoorbeeld, de auteur, de datum van wanneer het artikel geplaatst is, maar ook de categorie waarin het artikel is geplaatst. Tags en sleutelwoorden horen daar volgens mij ook bij. De vraag is alleen hoe geef je dat nu op een goede manier aan? Hoe maak je nu een goed onderscheid tussen meta en de werkelijke tekst van je artikel. Want daar gaat het tenslotte om.

Mijn voorkeur bij meta-gegevens gaat uit naar lijsten. Want meta-gegevens zijn voornamelijk combinaties van key-value paren: een attribuut met een waarde. Met name het <dl> element geeft dit goed weer.

<dl>
<dt>datum</dt><dd class="date"><abbr title="20061018T202519+0100">18 oktober 2006</abbr></dd>
<dt>auteur</dt><dd class="name">Bert de Weerd</dd>
</dl>

Maar dit <dl> element heeft zo zijn nadelen. Doordat de verschillende key-value paren niet door een apart element worden omsloten, zijn de mogelijkheden tot het stijlen en opmaken van zo’n paar beperkt. Iets waar je wel rekening mee moet houden bij het kiezen van een markup.

Markup voor reacties

Wat is nu goede markup voor het opmaken van reacties in XHTML bij bijvoorbeeld een weblog of nieuwsbericht? Als je een beetje rond surft op het web, dan kom je verschillende voorbeelden tegen.

Mijn eigen voorkeur gaat uit naar een geordende lijst (<ol>) waarin de reacties zijn opgenomen. Dat zegt namelijk iets over het geheel: het is een verzameling die bij elkaar hoort. En de ordening geeft de strikte volgorde aan.

Maar met alleen een lijst zijn we er nog niet, want een reactie bestaat uit verschillende onderdelen. Vaak wordt minstens de naam van de auteur en een datum of tijdstip naast de tekst van de reactie zelf weergegeven. En daarvoor komt de <dl> weer om de hoek kijken.

<ol>
<li>
<p>De tekst in de reactie zelf...</p>
<dl>
<dt>datum</dt><dd><abbr title="20061018T202519+0100">18 oktober 2006 20:25</abbr></dd>
<dt>auteur:</dt><dd>Pieter Post</dd>
</dl>
</li>
</li>
...
<li>
</ol>

Media

Het opnemen van media in een artikel kan lastig zijn. Is een afbeelding echt een onderdeel van de tekst, of is deze meer een toevoeging? Wanneer een afbeelding onderdeel is van de tekst en waarde vertegenwoordigd zoals een grafiek of schets, dan hoort de afbeelding in mijn ogen binnen de paragraaf elementen. Hebben we het over een sfeerbeeld, dan kan deze beter buiten de de tekstblokken worden opgenomen. Met behulp van CSS kan zo’n sfeerbeeld op elke gewenste positie worden geplaatst.

<p><img src="path_to_img.gif" alt="description" /> Lorem ipsum dolor sit amet.</p>