CODEWITHSUNDEEP
htmlcss
pete
pete

Reputation: 129

How best to structure a definition list with accessibility in mind

I have a dl that I've coded like so:

<dl>
  <dt>term 1</dt>
    <dd>definition 1</dd>
  <dt>term 2</dt>
    <dd>definition 2</dd>
  <dt>term 3</dt>
    <dd>definition 3</dd>
</dl>

I'm finding it hard to apply the right css for the layout that i want ie. each term and definition in a column. structuring the html in the following way would solve my problem but I am wondering, is this ok? (from an accessibility point of view). 

<dl>
    <dt>term 1</dt>
    <dd>definition 1</dd>
</dl>
<dl>
    <dt>term 2</dt>
    <dd>definition 2</dd>
</dl>
<dl>
    <dt>term 3</dt>
    <dd>definition 3</dd>
</dl>

Upvotes: 2

Views: 1103

Answers (2)

VoteyDisciple
VoteyDisciple

Reputation: 37803

Putting each term in its own list makes it impossible to determine programmatically that the three terms are actually related to each other (in that they're part of the same bit of content on your site). Deviating from standards is certainly necessary from time to time, but you've said nothing that demonstrates that it's necessary here.

If your original underlying problem is "I can't get this list styled the way I want," perhaps a better question for Stack Overflow is: "How can I style this list to look like __."

Upvotes: 1

MatTheCat
MatTheCat

Reputation: 18731

It seems it's not fully semantic (http://www.w3schools.com/tags/tag_dl.asp) but nobody wants to worry ^^ You can say you have many lists of one definition !

Upvotes: 0

Related Questions