39

Among allowed HTML tags there are tags which together form 'definition list', namely <dl> (definition list), <dt> (definition term), and <dd> (definition description) elements. They can be useful among others to create e.g. glossary of terms... well, they could if they have any sensible style associated with them.

I would really like to have better CSS style associated with 'definition list'.

The following source (which has empty line after first item, which sometimes is and sometimes isn't visible in source view below).

<dl>
<dt>description term</dt> <dd>description definition</dd>

<dt>lorem ipsum</dt>
<dd>    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</dd>
</dl>

generates the following output (Edit: which is now usable after changes described in New post formatting, though it still lacks hanging indent for description body):

description term
description definition
lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

which has horrible style, and is unusable (IMHO) as it is now.

In the case it got corrected the output looks like the following:

description term
description definition
lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

BTW. I couldn't find how to do 'definition list' using Markdown formatting: is there any?

Improve this question
4

3 Answers 3

Reset to default
20
+50

In this case, it looks like Markdown lacks... *removes sunglasses* definition.

It should at least indent the definition descriptions to provide some visual cue that you're dealing with a list not ordinary.

definition term
  definition description 

definition term
  definition description

The above is really just this:

<pre>
<b>definition term</b>
  definition description 

<b>definition term</b>
  definition description 
</pre>

But really should have some kind of difference between the DT and the DD on the DL. Unless there are plans to just tweak the CSS and they just have it on the... DL.

Improve this answer
9
  • Could you show the source of the above?
    – Jakub Narębski
    Commented Sep 22, 2009 at 12:06
  • 1
    He's using pre tags around the whole thing for formatting, with b tags for emphasis on terms.
    – ベレアー アダム
    Commented Sep 22, 2009 at 12:16
  • 1
    @Jakub: meta.stackoverflow.com/revisions/…
    – Ladybug Killer
    Commented Sep 22, 2009 at 12:31
  • 1
    +1 for dramatic aestetics. Shouldn't pre encode <b>?
    – perbert
    Commented Sep 22, 2009 at 13:24
  • @smeagol PRE just keeps the linebreaks, spaces and tabs in place while formatting in a fixed-width font. Tags still work.
    – random
    Commented Sep 22, 2009 at 13:29
  • It looks like <pre> is only about Markdown markup and preserving whitespace. It is not the same as <pre> in HTML.
    – Jakub Narębski
    Commented Sep 22, 2009 at 14:58
  • 3
    @Jakub: Contrary to popular belief, <pre> in HTML is also only about preserving whitespace.
    – Zarel
    Commented Oct 31, 2009 at 1:35
  • 3
    @random: YEEEEEEEEEEEEAAAAAAAAAAAAAHHHHHHHHHHHHHHHHHHHH!!!!!!!!!!!!! (Incredibly late, but you deserved it.)
    – Pops
    Commented Jul 15, 2010 at 15:10
  • I would really love to see this implemented. I don’t care if we have to use real (or semi-real) HTML instead of Markdown. It’s worth it.
    – tchrist
    Commented Jan 13, 2013 at 17:21
3

In all these years of writing blog posts by hand (including typing out all the HTML tags) I have never really understood the purpose of the <dt>, <dd>, and <dl> tags.

I guess I am an HTML neanderthal.

Improve this answer
3
  • 3
    If you're taking the KBD from Meta, at least give us the DL-DT-DL
    – random
    Commented Oct 2, 2009 at 9:36
  • 3
    "Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term and a description." "definition lists can be used to tie together any items that have a direct relationship with each other (name/value sets)." Wikipedia markup uses ; term : definition
    – endolith
    Commented May 27, 2011 at 16:10
  • 1
    One (not necessarily correct or complete) way of thinking is that items in unordered lists use the same marker, in ordered lists use an automatically generated marker, and in definition lists use an explicitly specified marker.
    – outis
    Commented Jan 25, 2012 at 5:15
0

FWIW: I have always thought that <dl> should work as follows:

<dl>

<li>

<dt>pony</dt>

<dd>any of various breeds of small gentle horses usually less 
    than five feet high at the shoulder</dd>

</li>

...

</dl>

because an item in a glossary consists both of the term and its definition.

Improve this answer
6
  • 5
    If that's the case, you're writing it semantically wrong. LI only appear inside OL and UL.
    – random
    Commented Oct 2, 2009 at 9:45
  • 1
    @random I believe you are missing my point. I know that <LI> currently cannot appear in <DL>. I am saying it should with <DT> and <DD> providing the constituent parts of the item.
    – Sinan Ünür
    Commented Oct 2, 2009 at 9:59
  • 2
    Why? <dt> delimits the term, and <dd> delimits the definition. Why would you need an extra list tag?
    – endolith
    Commented May 27, 2011 at 16:11
  • 1
    ... and why would you want to change the HTML standards? This is about styling existing HTML element structures with CSS - NOT changing standards.
    – awe
    Commented May 18, 2012 at 11:11
  • 2
    @awe Oh, I can count a ton of reasons why HTML standards should be changed. In fact, I might be under the mistaken impression that they have changed many times. The fact that both the term and its definition form a whole, i.e. neither stands on its own, and therefore they should be contained in an item is either self-evident or not. The fact that they are not, makes styling hard.
    – Sinan Ünür
    Commented May 18, 2012 at 13:27
  • As of HTML 5.2 (2017), it does work almost like this. Use <div> where you've written <li>, though.
    – wizzwizz4
    Commented Nov 23, 2023 at 0:51

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .