[HTML] Semantisch correct agendapunt weergeven

[bakakaizoku]

Ik zit nu even in dubio wat betreft een agenda voor op een website, en vooral het semantisch maken ervan. Google heeft mij niet geholpen, maar dat komt wellicht omdat ik waarschijnlijk niet op de goede termen zoek.

De case:
Ik heb een agenda voor op een site voor me liggen, hij is als volgt opgemaakt:
dd-mm-jjjj: agendapunt
dd-mm-jjjj: agendapunt
dd-mm-jjjj: agendapunt

De stelling:
Ik kan hier 3 dingen voor gebruiken, namelijk een unordered list (<ul>), een definition list (<dl>) of een tabel. Alle 3 hebben zo hun pro's en con's hierin.

De cons en pro's van een UL;
Pro's
Het is feitelijk een lijst dus ze staan mooi in een lijstje

Cons:
Ik zit met de datum welke eigenlijk een apart puntje zou moeten zijn

De cons en pro's van een DL;
Pro's
Ik kan de datum scheiden van de omschrijving

Cons:
Ik zit met de vraag of ik een datum wel als een definitie kan stellen

De cons en pro's van een tabel;
Pro's
Het is tabulaire data

Cons:
Of toch niet helemaal


Mijn voorkeur hiervoor gaat eigenlijk uit naar een DL, maar is dat ook correct gezien de data? Zal een searchengine hier ook voorkeur voor hebben?

ja, waar kan een mens zich druk om maken zo vlak voor het weekend

[Johnny]

Om wat voor soort agendapunten gaat het? Als het losse evenementen zijn die onafhankelijk van elkaar zijn zou je ook kunnen denken aan zoiets:

HTML:

<h2>10 oktober 2008</h2>

<h3>Evenement 1</h3>

<p>Omschrijving evenement 1</p>

<h3>Evenement 2 op dezelfde dag</h3>

<p>Omschrijving evenement 2</p>

<h2>11 oktober 2008</h2>

[bakakaizoku]

Johnny schreef op donderdag 09 oktober 2008 @ 18:30:
Om wat voor soort agendapunten gaat het? Als het losse evenementen zijn die onafhankelijk van elkaar zijn zou je ook kunnen denken aan zoiets:

HTML:

<h2>10 oktober 2008</h2>

<h3>Evenement 1</h3>

<p>Omschrijving evenement 1</p>

<h3>Evenement 2 op dezelfde dag</h3>

<p>Omschrijving evenement 2</p>

<h2>11 oktober 2008</h2>

Afgezien van dat ik vind dat je headings incorrect gebruikt hierin, zijn de agenda punten niet zodanig belangrijk dat ze een heading tag verdienen.

Edit: Het gaat overigens om agendapunten waar <persoon> aanwezig is.

[ Voor 5% gewijzigd door bakakaizoku op 09-10-2008 18:34 ]

[Bosmonster]

De UL vind ik sowieso geen optie voor een agenda, neem dan een OL. De volgorde lijkt me wel degelijk van belang

De list geeft echter geen mogelijkheid tot het scheiden van kolommen. Als het echt een lijst is van A en B die bij elkaar horen (of het nu definities zijn of niet) dan kun je een DL gebruiken.

Persoonlijk vind ik een tabel de meest logische keuze, ook gezien de uitbreidbaarheid met extra kolommen.

[ Voor 8% gewijzigd door Bosmonster op 09-10-2008 19:46 ]

[MueR]

HTML:

<ul>
<li>
    <dl>
        <dt>datum</dt><dd>dd-mm-jjjj</dd>
        <dt>afspraak</dt><dd>event</dd>
    </dl>
</li>
<li>
    <dl>
        <dt>datum</dt><dd>dd-mm-jjjj</dd>
        <dt>afspraak</dt><dd>event</dd>
    </dl>
</li>
</ul>

en vervolgens met css de dt hiden?

[RobIII]

MueR schreef op donderdag 09 oktober 2008 @ 20:28:

HTML:

<ul>
<li>
    <dl>
        <dt>datum</dt><dd>dd-mm-jjjj</dd>
        <dt>afspraak</dt><dd>event</dd>
    </dl>
</li>
<li>
    <dl>
        <dt>datum</dt><dd>dd-mm-jjjj</dd>
        <dt>afspraak</dt><dd>event</dd>
    </dl>
</li>
</ul>

en vervolgens met css de dt hiden?

En dat allemaal vanwege de semantiek? Nogal boude overkill. Daarbij ben je dan het verband datum<->agendapunt kwijt maar heb je verband gelegd tussen dummyrommel<->datum en dummyrommel<->agendapunt

Ik zou gewoon een table doen; sommige dingen zijn 'semantisch' nou eenmaal niet helemaal nauwkeurig te beschrijven; boeie.

[ Voor 22% gewijzigd door RobIII op 09-10-2008 20:33 ]

[MueR]

Mwah, het is <label>: <veld> in principe

Inderdaad is een tabel hier net zo goed, het is nu eenmaal een tabelweergave. Tabellen zijn niet per definitie fout.

[RobIII]

MueR schreef op donderdag 09 oktober 2008 @ 20:40:
Mwah, het is <label>: <veld> in principe

<term>: <description> om precies te zijn En dat is dus <woord>: <betekenis_van_woord> om maar even vrij te vertalen .

[Eijkb]

Toevallig vandaag het zelfde vraagstuk voor gehad en gekozen voor de table. Puur omdat dit qua opmaak het makkelijkste is (werkt ook zonder CSS) en semantisch vind ik het ook wel correct eigenlijk.

[Bosmonster]

MueR schreef op donderdag 09 oktober 2008 @ 20:28:

HTML:

<ul>
<li>
    <dl>
        <dt>datum</dt><dd>dd-mm-jjjj</dd>
        <dt>afspraak</dt><dd>event</dd>
    </dl>
</li>
<li>
    <dl>
        <dt>datum</dt><dd>dd-mm-jjjj</dd>
        <dt>afspraak</dt><dd>event</dd>
    </dl>
</li>
</ul>

en vervolgens met css de dt hiden?

Dit vind ik dus echt heel fout/lelijk. Je emuleert eigenlijk gewoon een tabel met een UL (zou al een OL gebruiken hier gezien de volgorde, maar dat had ik al gezegd), en allemaal losse DL's, die nu geen relatie meer hebben tot elkaar. Ipv 1 list heb je nu allemaal losse listjes met 1 item, alle semantiek gaat dan eigenlijk direct verloren.

Als je al een OL gebruikt voor dit geval, gebruik dan labels, maar een tabel is hier eigenlijk de meest logische keuze. Het is gewoon tabulaire data. Bedenk je ook het feit dat het eigenlijk gewoon gerelateerde eigenschappen van een record zijn, waar eventueel meer eigenschappen bij zouden kunnen (komen). Bijvoorbeeld locatie, deelnemers, etc. Dan is het (imho) ineens heel duidelijk dat dit gewoon een tabel hoort te zijn.

[ Voor 29% gewijzigd door Bosmonster op 10-10-2008 09:47 ]

[MueR]

Het is ook niet iets wat ik ooit zou maken Bosmonster. Semantiek is leuk en aardig, maar ik ga me niet in allerlei bochten wringen er voor. Een tabel of een ol voldoet hier ook prima.

[imp4ct]

Ik zou persoonlijk ook voor een table structuur kiezen. 'k Heb hier zelf ook al eens m'n kop over gebroken, maar 'k denk zoals hierboven als eens gezegd is geweest, sommige dingen zijn gewoon niet of enorm moeilijk symantisch te omschrijven. Met de komst van HTML 5, waar je, je eigen <tags> kan maken gaat die vraag denk ik niet meer naar boven komen.

't Feit blijft ook dat mensen denken dat ze in een sematisch geschreven website ineens geen tables meer mogen gaan gebruiken, nu jah... dat is nu ook weer niet de bedoeling. Symantiek slaat op het feit dat je in HTML je elementen gaat gebruiken voor wat ze echt dienen (heel simpel gezegd).

Go for tables!

[Verwijderd]

HTML:

<dl>
    <dt>dd-mm-jjjj</dt>
      <dd>event</dd>
    <dt>dd-mm-jjjj</dt>
      <dd>event</dd>
    <dt>dd-mm-jjjj</dt>
      <dd>event</dd>
</dl>

In de specs van het W3C staat dat definition lists ruim gebruikt mogen worden. Ik zou het dus op bovenstaande manier aanpakken.

Een datum kent een event, dus is event een description van een definition. Zijn er op één dag meerdere events, kun je zonder schuldgevoel een description toevoegen aan de list

De meerwaarde van een ordered list zie ik niet direct. De items binnen een definition list hebben officieel geen volgorde, maar in dit geval geven de datums geven de volgorde aan. Daar komt nog bij dat in de praktijk er weinig gehusselt wordt met child elements.

[Bosmonster]

Verwijderd schreef op zondag 12 oktober 2008 @ 14:54:

HTML:

<dl>
    <dt>dd-mm-jjjj</dt>
      <dd>event</dd>
    <dt>dd-mm-jjjj</dt>
      <dd>event</dd>
    <dt>dd-mm-jjjj</dt>
      <dd>event</dd>
</dl>

In de specs van het W3C staat dat definition lists ruim gebruikt mogen worden. Ik zou het dus op bovenstaande manier aanpakken.

Een datum kent een event, dus is event een description van een definition. Zijn er op één dag meerdere events, kun je zonder schuldgevoel een description toevoegen aan de list

De meerwaarde van een ordered list zie ik niet direct. De items binnen een definition list hebben officieel geen volgorde, maar in dit geval geven de datums geven de volgorde aan. Daar komt nog bij dat in de praktijk er weinig gehusselt wordt met child elements.

En als je nu besluit ook ook een locatie toe te voegen van het event? Of je wilt kunnen sorteren, bijvoorbeeld op locatie?

Ik ruik een beetje een table-aversie en dat is uiteraard helemaal nergens voor nodig. Voor tabulaire data is er niks mis mee om een table te gebruiken, dus waarom moeilijk gaan doen en jezelf beperken met een DL.

[ Voor 13% gewijzigd door Bosmonster op 12-10-2008 15:05 ]

[Verwijderd]

en what about:

XHTML:

<ol>
 <li>Titel van het agenda punt
  <ul>
   <li>2008-10-12</li>
   <li>Amsterdam</li>
  </ul>
 </li>
</ol>

[RobIII]

Ik snap niet waarom iedereen zich hier in de vreemdste bochten zit te wringen om agendapunten 'semantisch correct' weer te geven als er geen semantisch correct element voor agendapunten is. Moeilijk doen om het moeilijk doen. Wat is er mis met een table? En hoe maken nested lists het semantisch correct(er)?

[harrald]

Dit is toch precies waar een table voor bedoelt is?
je wilt data tonen, data toon je in een tabel.

HTML:

<table summary="Tabel met agendapunten, voor elk agendapunt een rij.">
    <caption>Agenda</caption>
    <thead>
          <tr>
               <th scope="col"><strong>Datum</strong></th>
               <th scope="col"><strong>Agendapunt</strong></th>
          </tr>
    </thead>
    <tfoot>
          <tr>
               <td colspan="2">totaal agendapunten:</td>
          </tr>
    </tfoot>
    <tbody>
          <tr>
               <td>dd-mm-jjjj</td>
               <td>agendapunt</td>
          </tr>
          <tr>
               <td>dd-mm-jjjj</td>
               <td>agendapunt</td>
          </tr>
          <tr>
               <td>dd-mm-jjjj</td>
               <td>agendapunt</td>
          </tr>
    </tbody>
</table>

Nou wat is hier semantisch fout aan?

[Verwijderd]

harrald schreef op zondag 12 oktober 2008 @ 17:19:
Dit is toch precies waar een table voor bedoelt is?
je wilt data tonen, data toon je in een tabel.

Ik snap wat je bedoelt, hoor, maar alle HTML-content is data

Nou wat is hier semantisch fout aan?

Niets. Net zoals er niets mis in met een definition list.

It's all about choice.