Tabulaire data of een list?

17 April 2008, geplaatst in XHTML door Davy

Johan (Wolfr) heeft het nieuwe design van zijn blog Wolf’s Little Store deze week gelanceerd. Vriend Dieter heeft hierop al zijn mening geventileerd. De conversaties over dat nieuwe design zijn jammer genoeg verspreid, maar ik wou toch nog even inpikken op een conversatie op Twitter gisterenavond.

Wolf zegt dat de inhoudtafel op de homepage tabulaire data is. Ik ben het daar niet helemaal mee eens.

Waaruit bestaat zijn homepage? Uit een overzicht van alle artikels die op zijn blog zijn gepost. Technisch gesproken kan je dat wel in tabelvorm gieten, maar volgens mij kan je het eleganter oplossen.

Zo ziet de huidige markup eruit:

<table cellspacing="0" cellpadding="0" id="grid">
  <tr>
    <td class="date"><p>April 16, 2008</p></td>
    <td class="category">
      <ul class="post-categories">
        <li><a href="" title="" rel="category tag"></a></li>
      </ul>
    </td>
    <td><h2><a href="" rel="bookmark" title=""></a></h2></td>

    </tr>
</table>

Eerste bedenkingen:

  • Waarom zou je de datum in <p> tag plaatsen?
  • Waarom categorieën in <ul> als je maar 1 categorie telkens gaat gebruiken?
  • Waarom een tabel?

Waarom geen tabel?

Wanneer ik de CSS uitschakel en ik de broncode lineair overloop, dan krijg ik nu:

  1. datum
  2. categorie
  3. titel

Dit voelt niet goed aan. De titel is belangrijker dan de datum en de categorie, en dus zou die eerst moeten komen.

Een andere bedenking die ik me maak is: hoe zal de homepage zal weergegeven worden op mobile devices. Tabelrendering lijkt me door de kleine schermen minder evident.

Daarom zou ik met deze oplossing op de proppen komen:

<ul id="articles">
  <li>
    <h2><a href="" rel="bookmark" title=""></a></h2>
    <p class="meta">
      On <span class="date">April 16, 2008</span> in
      <a href="" rel="category tag">Category</a>
    </p>
  </li>
</ul>

Via negatieve text-indent, en absolute positionering van de date en link, kan je de woorden ‘on’ en ‘in’ verbergen op de frontend.
Je zou zelfs een <ol> (ordered list) kunnen gebruiken, omdat het kan beschouwd worden als een numerieke opsomming van de artikels.

Een andere mogelijkheid is via een definition list, waarbij er een relatie bestaat tussen de titel van het artikel en de meta data:

<dl id="articles">
  <dt><h2><a href="" rel="bookmark" title=""></a></h2></dt>
  <dd class="date">April 16, 2008</dd>
  <dd class="category">
    <a href="" title="" rel="category tag">inspiration</a>
  </dd>
</dl>

Niet alleen wordt de markup compacter, ook wanneer je CSS uitschakelt, leest het iets natuurlijker.
Via CSS kan je dan uiteraard identiek dezelfde visuele tabel creëren.

In HTML kan je meestal een probleem op verschillende manieren benaderen. Het is alleen kwestie van alle opties te overwegen en uitmaken wat een goeie manier is en wat de betere manier.

Minimal design is 1 ding, minimale markup iets anders.

Gerelateerde artikels

Reacties

Roel zei op 21 April 2008 om 10:59

Eerst en vooral: eigenlijk is dit een non-discussie. Er is wezenlijk niets verkeerd met de tabel die Johan gebruikt. Het gaat om tabulaire gegevens (datum, categorie, titel). Dat had wellicht iets meer ‘uitgesproken’ geweest als hij er nog th’s had aan toegevoegd. Maar dat hoeft niet eens om een tabel een ‘datatabel’ te mogen/kunnen noemen.

Anderzijds zou er ook niets verkeerd geweest zijn met een ol, een ul of een dl. De semantiek die XHTML biedt is zo ‘lossy’ dat je er eigenlijk alle kanten mee op kan en het weinig zin heeft om de ene methode boven de andere te verkiezen. Er zijn altijd wel voors en tegens te bedenken (herinner je de markup-kwisjes op simplebits.com van een aantal jaren geleden? Ellenlange bullshitcomments las je daar).

Wat ik wel fout vind, is dat Johan de links naar zijn artikels in h2’s nest. Dat is overbodig (en verwarrend voor screenreadergebruikers). Koppen gebruik je om logische onderdelen op een pagina (hoofdstukken, alinea’s, maar ook sidebars, navigatiekolommen etc.) aan te kondigen. Volgens een bepaalde hiërarchie. Hier zijn ze niet op hun plaats.

p’s nesten in een td? Who cares? Wie heeft er ooit gezegd dat dat niet mocht? Het is een kwestie van stijl (en CSS hooks). In de praktijk heeft niemand er last van.

Er is wel iets te zeggen over de ul’s met slechts één li‘tje erin voor de categorieën. Maar misschien is Johan wel van plan om sommige artikels in de toekomst aan meer dan één categorie te hangen? Dus: why bother?

Davy zei op 21 April 2008 om 11:21

@roel: ik bedoelde niet dat je een <p> niet in een <td> mag nesten, maar eerder dat een paragraaf voor een korte tekst zoals ‘April 16, 2008′ nogal overkill is.

Ikzelf gebruik niet graag tabellen, tenzij voor “échte” tabulaire data. De code die je schrijft via een dl, ul of ol is gewoon compacter, mijn inziens overzichtelijker en flexibeler om allerlei CSS dingen op toe te passen.

Niels Matthijs zei op 23 Juli 2008 om 14:40

Persoonlijk ben ik in dit geval ook niet zo voor het gebruik van een table. De data wordt dan wel gepresenteerd als tabulair, toch zijn zaken als datum en tags meer metadata bij het artikel. Een lijst vind ik vanuit puur theoretisch oogpunt dan ook wel logischer.

Storender vind ik eigenlijk dat het structureel ook erg slecht uitpakt. Daar heeft Davy toch zeker een punt. Eerst een datum toegestopt krijgen, dan een tag en dan pas de titel is verre van logisch.

Zou in dit voorbeeld zelf gaan voor een ol (aangezien chronologisch gerangschikt), maar er een aantal blogposts aan wijden is dan ook weer een beetje overdreven.

Reactie toevoegen: