Home/ Questions/Q 582845
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T14:43:49+00:00

I’m looking for the most semantically correct and sane method of marking up an

  • 0

I’m looking for the most semantically correct and sane method of marking up an ordered definition list. I have thought about hte following ways of doing it.

First I used an ordered list with 2 paragraphs within each list item. But then I remembered the definition list element.

<dl>
  <dt>Something</dt>
  <dd>Definition</dd>

  <dt>Something2</dt>
  <dd>Definition2</dd>
</dl>

However as I need to be able to access each definition programmatically through Javascript I’m not sure that this would work.

The solution to this might be to separate the definitions into different dl tags. But that doesn’t look very good at all. Is there a more correct way? Or am I incorrect in assuming that is more complicated to access the “normal” definition list through Javascript?

<dl>
  <dt>Something</dt>
  <dd>Definition</dd>
</dl>
<dl>
  <dt>Something2</dt>
  <dd>Definition2</dd>
</dl>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    However as I need to be able to access each definition programmatically through Javascript I’m not sure that this would work.

    Just get each definition term <dt> and then get the element next to it in the DOM tree, which should always be the definition description <dd>. jQuery is of great help in here. Here’s an SSCCE, just copy’n’paste’n’run it:

    <!doctype html>
<html lang="en">
    <head>
        <title>SO question 2172138</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#dl dt').each(function(i, dt) {
                    dt = $(dt);
                    dds = dt.nextAll().map(function() { return $(this).is('dd') ? this : false; });
                    alert(dt.text() + " = " + dds.text());
                });
            });
        </script>
    </head>
    <body>
        <dl id="dl">
            <dt>Term1</dt><dd>Desc1a</dd><dd>Desc1b</dd>
            <dt>Term2</dt><dd>Desc2a</dd>
            <dt>Term3</dt><dd>Desc3a</dd><dd>Desc3b</dd>
        </dl>
    </body>
</html>
    • 0