What is the correct HTML semantics for lists of content that has explanations such as changelog entries? For instance, have a look at the following: A, B. Both pages use definition term (dt) elements to subhead an item/feature, with list items in a ul placed beneath:

<dl><dt>New item</dt></dl>
<ul><li>Does some thing</li></ul>

This is incorrect semantics (see #3275054), but what should it be instead? Alternatives such as h4 would be complete overkill navigation-wise.

What is the correct HTML semantics for lists of content that has explanations such as changelog entries? For instance, have a look at the following: A, B. Both pages use definition term (dt) elements to subhead an item/feature, with list items in a ul placed beneath:

<dl><dt>New item</dt></dl>
<ul><li>Does some thing</li></ul>

This is incorrect semantics (see #3275054), but what should it be instead? Alternatives such as h4 would be complete overkill navigation-wise.

• html
• semantic-markup

2 Answers 2

I’m not sure what you mean by ‘correct semantics’; if you’re using HTML rather than XML you have to fit your data to one of the available structures. My inclination would be to use a H3 (or some other heading level) for the major sections, and a DL for the minor sections, with DTs as the “headers” and a UL inside the DD for the specific items. Using a section of the Terraria wiki that you pointed to...

<h3>ARMOR</h3>
<dl>
    <dt>Ninja Armor</dt>
    <dd>
        <ul>
            <li>Instead of throwing bonuses, each piece now gives a global 3% damage and 3% critical chance</li>
            <li>New Set bonus: 20% movement speed</li>
        </ul>
    </dd>
</dl>

Which would present (modulo CSS) as

ARMOR

Ninja Armor

• Instead of throwing bonuses, each piece now gives a global 3% damage and 3% critical chance
• New Set bonus: 20% movement speed

I recommend using the following semantic structure for your content:

<dl>
    <dt>New item1
    <dd>Does some thing1
    <dd>Does some thing2
    <dd>Does some thing3
    <dt>New item2
    <dd>Does some thing1
    <dd>Does some thing2
    <dd>Does some thing3
</dl>

For more detailed instructions, including descriptions and examples, you can check here: https://www.w3.org/TR/2011/WD-html5-author-20110809/the-dl-element.html