Skip to content

Instantly share code, notes, and snippets.

@joshdcomp

joshdcomp/faq.html

Last active December 17, 2015 09:09
Show Gist options
  • Save joshdcomp/5585368 to your computer and use it in GitHub Desktop.
Save joshdcomp/5585368 to your computer and use it in GitHub Desktop.
Download ZIP
How definition lists /should/ be marked up
Raw
faq.html
<dl>
<div class="li">
<dt>FA Question</dt>
<dd>Definition here</dd>
</div>
</dl>
@shiflett
Copy link

Oh, I thought I was supposed to do this:

<dl>
    <dt>Question</dt>
    <dd>Answer</dd>
    <dt>Question</dt>
    <dd>Answer</dd>
</dl>

@danmall
Copy link

danmall commented Feb 24, 2014

@shiflett: You're right; that's the "proper" way to use it. I think Josh was just suggesting a way to give you extra flexibility (though I think it's invalid markup.)

The reason I shy away from [dl]s in general is that they're too strict. [dt] specifically doesn't allow you to insert any other elements in them, and I'm not down with that. Also, from what I understand, the hx+p structure helps out assistive devices a bit more than the definition list.

I had a similar problem in 2007 when I coded the Happy Cog site. See the comments here: http://v2.danielmall.com/archives/2007/02/07/the_agency_formerly_and_currently_known_as_happy_cog.php#c5683

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment