Semantiek van overzicht

[Avalaxy]

Ik kom weleens tegen dat ik een overzicht moet weergeven van gegevens. Denk aan een gebruikersprofiel met ruwweg de volgende indeling:

Username: x.
Geregisteerd: x.
Laatst online: x.

Etc.

Mijn vraag is: hoe geef ik dit weer qua HTML vorm? Is een table hier gerechtvaardigd? Is het juist een list (lastig aangezien ik 2 kolommen wil) of moeten het 2 divs naast elkaar zijn?

[posttoast]

Twee div's hebben natuurlijk sowieso geen semantische waarde, dus die valt af lijkt me Ik zou hier zeggen dat een table prima kan. Of anders een definition list?

[Barryvdh]

Ik zou ook zeggen dat een description list hier logisch is.

[OkkE]

Ik vind het geen tabel-data, alleen je huidige ontwerp want misschien visueel iets weg heeft van een tabel.

Gebruik zelf vaak een <li> met bijv een <span> voor het 'label'. Ook een <dl> zou kunnen, maar ik vind het onhandig dat key/value niet samen een parent element hebben.

[crisp]

Puur pragmatisch: table

[Avalaxy]

Volgens mij hebben we zo wel alle opties gehad Nu moet ik weten welke beter geschikt is voor het scenario.

[posttoast]

Als ik kijk naar de uitleg van de description list op de site die Barryvdh aanhaalt, is dat exact wat je moet hebben.

[OkkE]

Tabel gebruiken is het minst flexibel, maar wel 't snelst klaar. Waarschijnlijk is een <dl> het meest "semantisch correct", maar ik vind een <li><span><span> 't makkelijkst werken door extra 'parent' element.

[Barryvdh]

Je kan bij een dl natuurlijk ook gewoon een div om je dd en dt heenzetten.

HTML:

<dl>
    <div class="row">
      <dt>Username:</dt>
      <dd>Barryvdh</dd>
    </div>
    <div class="row">
      <dt>Geregistreerd:</dt>
      <dd>12-06-2003</dd>
    </div>
    <div class="row">
      <dt>Laatst online:</dt>
      <dd>nu</dd>
    </div>
</dl>

Maar in principe is dat niet nodig om het langs elkaar te zetten natuurlijk.

[posttoast]

Barryvdh schreef op maandag 19 november 2012 @ 12:12:
Je kan bij een dl natuurlijk ook gewoon een div om je dd en dt heenzetten.

HTML:

<dl>
    <div class="row">
      <dt>Username:</dt>
      <dd>Barryvdh</dd>
    </div>
    <div class="row">
      <dt>Geregistreerd:</dt>
      <dd>12-06-2003</dd>
    </div>
    <div class="row">
      <dt>Laatst online:</dt>
      <dd>nu</dd>
    </div>
</dl>

Maar in principe is dat niet nodig om het langs elkaar te zetten natuurlijk.

Zeker weten? Ik meen me te herinneren dat je geen block-level elementen in een dl mag zetten. Even kijken of ik het nog kan vinden.

Edit: hmmm, ik kan het niet vinden. Maar ik ben er vrij zeker van dat een dl alleen dt's en dd's als children mag hebben. En dus geen div's.

[ Voor 9% gewijzigd door posttoast op 19-11-2012 12:21 ]

[crisp]

http://www.w3.org/TR/html...ement.html#the-dl-element

Content model:
Zero or more groups each consisting of one or more dt elements followed by one or more dd elements.

If a dl element has one or more non-whitespace Text node children, or has child elements that are neither dt nor dd elements, all such Text nodes and elements, as well as their descendants (including any dt or dd elements), do not form part of any groups in that dl.

Kortom: een DL kan alleen DT en DD bevatten als child (en da's soms lastig mbt styling)

[Barryvdh]

Ah ok, my bad, dan niet inderdaad.

[NMe]

Er zullen feitelijk weinig browsers zijn die er hard op breken, maar ik zou het niet doen inderdaad.

Afgezien van dat valt zo'n lijstje als definition list over het algemeen best lekker te stylen, ook zonder zo'n parentelement. Ik heb er in elk geval nooit echt problemen mee gehad, al moet ik er soms wel creatief voor zijn.

[mcDavid]

crisp schreef op maandag 19 november 2012 @ 12:24:
http://www.w3.org/TR/html...ement.html#the-dl-element


[...]


[...]


Kortom: een DL kan alleen DT en DD bevatten als child (en da's soms lastig mbt styling)

Met een dd, dt {float:left} en dt {clear:left} zou het goed moeten gaan toch?

En anders kun je altijd nog de hele :before trucendoos openhalen

[ Voor 8% gewijzigd door mcDavid op 19-11-2012 12:51 ]

[MoietyMe]

Zoiets als dit is makkelijk op te lossen (als de velden slechts één regel bevatten):

Cascading Stylesheet:

dt,dd {
height: 1.3em;
line-height: 1.3em; /* tekst mooi verticaal centreren */
}

dt {
float: left;
width: 65px;
}

dd {
padding-left: 70px;
}

[ Voor 3% gewijzigd door MoietyMe op 19-11-2012 13:28 ]

[Bosmonster]

Good Fella schreef op maandag 19 november 2012 @ 13:26:
Zoiets als dit is makkelijk op te lossen (als de velden slechts één regel bevatten):

Dat is alleen niet zo flexibel, wat meestal wel gewenst is als het om een CMS gaat of als je simpelweg een beetje toegankelijk wilt zijn (veranderende tekstgroottes bijvoorbeeld).

Float left/clear left werkt meestal wel prima, alleen hebben de oudere IE's hier soms wat moeite mee.

Blijft gewoon een kut-element als je het mij vraagt.

[R4gnax]

Gewoon met position:absolute de definition onder de term door duwen. Werkt perfect en je hebt geen gezeik met floats die verkeerd gaan stacken of met het combineren van float en clear op hetzelfde element.

HTML:

<dl class="list-aligned">
  <dt>Gebruikersnaam</dt>
  <dd>x</dd>
  <dt>Geregistreerd</dt>
  <dd>x</dd>
  <dt>Laatst online</dt>
  <dd>x</dd>
</dl>

Cascading Stylesheet:

.list-aligned > dt {
  position : absolute;
  width : 200px;
}
.list-aligned > dd {
  padding-left : 200px;
}

[mcDavid]

Position:absolute moet je nooit gebruiken voor zoiets. Ben je gelijk al je flexibiliteit kwijt. Als je een keer een beschrijving wilt aanpassen mag je gelijk je CSS in duiken...

[R4gnax]

mcDavid schreef op dinsdag 20 november 2012 @ 23:58:
Position:absolute moet je nooit gebruiken voor zoiets. Ben je gelijk al je flexibiliteit kwijt. Als je een keer een beschrijving wilt aanpassen mag je gelijk je CSS in duiken...

Het idee is dat je voldoende ruimte reserveert voor een redelijke lengte label. Past dat label niet, dan heb je waarschijnlijk een ander probleem. Een label moet kort en 'to the point' zijn om het overzicht te bewaren, zeker in langere formulieren / lijsten.


Maar goed, je kunt natuurlijk ook iets bouwen met inline-block, als je dat liever hebt:

Cascading Stylesheet:

.list-aligned {
  display : block;
  width : 600px;
}
.list-aligned > dt {
  display: inline-block;
  width : 30%;
}
.list-aligned > dd {
  display : inline-block;
  width : 60%;
}

Zit je wel weer geforceerd vast aan opgegeven sets breedtes om line wrapping goed te laten verlopen en moet je het inter-block white-spacing probleem aan gaan pakken.

offtopic:
(Er wordt altijd zo makkelijk gedaan over het opzetten van gelabelde lijsten of gelabelde formulieren, maar feitelijk is het één van de allermoeilijkste zaken om compleet generiek werkend te krijgen.)

[ Voor 9% gewijzigd door R4gnax op 21-11-2012 09:22 ]