htmlsemantic-markup

What is the correct HTML semantics for content lists/changelog entries?


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.


Solution

  • 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