What elements may appear in a Definition List (<dl>) ?

[DangerMouse1981]

Hey all,

I'm trying to develop a definition list that appears across the page and am unable to see how to do this without wrapping the <dd> and <dt> elements to ensure that they appear in coupled pairs.

Thus, I was wondering is it semantic to include some kind of wrapper within a definition list? Maybe a <div> ?

Cheers,

DM

[AutisticCuckoo]

The only elements that can be directly subordinate to a <dl> are <dt> and <dd>.

If you find that you need some sort of wrapper around each item pair, what you've got is probably not a definition list, semantically.

[DangerMouse1981]

Thanks for the reply, I'm actually dispalying a form.

Whilst I realise that this is an area that has debate surrounding best practice, I've been led to believe that using form labels within a <dt> tag and inputs within <dd> validates as these tags are allowed to contain inline elements.

Maybe my question is CSS orientated as much as markup; as you can probably tell I'm fairly new to all this. It seems like it should be fairly straight forward to display elements as follows, only I'm uncertain how to achieve it without some form of wrapper, any advice?

Element Label:    | Element Label:    | Element Label:
Element           | Element           | Element

Thanks again for the reply.

DM

[AutisticCuckoo]

There's been a lot of discussion about the semantics of definition lists. I personally wouldn't consider your case to be a definition list, but I'm sure there are those who'll disagree.

In theory, you could do it like this:

<form action="...">
  <fieldset class="columnar">
    <legend>...</legend>
    <label for="e1">Element Label: <input id="e1"...></label>
    <label for="e2">Element Label: <input id="e2"...></label>
    <label for="e3">Element Label: <input id="e3"...></label>
  </fieldset>
</form>

.columnar label {float:left}
.columnar label input {display:block; width:99%}

In practice, this may cause some problems. IIRC, the screen reader Window-Eyes won't work properly if you nest the inputs within the labels. Therefore, you may have to wrap each label/input pair in a DIV:

<form action="...">
  <fieldset class="columnar">
    <legend>...</legend>
    <div>
      <label for="e1">Element Label:</label>
      <input id="e1"...>
    </div>
    <div>
      <label for="e2">Element Label:</label>
      <input id="e2"...>
    </div>
    <div>
      <label for="e3">Element Label:</label>
      <input id="e3"...>
    </div>
  </fieldset>
</form>

.columnar div {float:left}
.columnar div label {display:block}
.columnar div input {width:99%}

[DangerMouse1981]

Thanks Tommy, I'll give this suggestion a go.

I don't disagree with you on definition lists, I have no real opinion, I just would prefer my HTML to be as accessible as possible. I'm currently using a programatic form implementation (Zend_Form) and it uses a definition list wrapper as a default decorator. I was hoping to avoid changing it, but it seems thats not possible.

Out of curiousity, why the width 99&#37; setting?

Thanks for your input.

DM

[AutisticCuckoo]

Out of curiousity, why the width 99% setting?

To make the input field as wide as the label (or the enclosing DIV, if you set a width for that).

You can't use 100%, because input fields usually have borders and you end up with 100%+2px which causes overflow.