嵌套 html dl dt dd

Posted 2023-02-24

【中文标题】嵌套 html dl dt dd

【英文标题】：Nested html dl dt dd

【发布时间】：2011-11-27 02:56:46

【问题描述】：

我想检查一下我的想法。我需要为下面的 UI 设计创建 html 代码，并且我在标记中使用了嵌套的 dls。这在语义上有效吗？如果没有，我应该如何在 HTML 中实现这个设计？

UI design

<dl>
    <dt>Section one</dt>
    <dd>
        <dl>
            <dt>Sub-Section one</dt>
            <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis justo justo, aliquam vel imperdiet a, semper sed felis. Nunc nec odio non massa pellentesque blandit et in velit. Proin massa libero, pulvinar at consectetur ut, ullamcorper id ipsum. Mauris in lorem ligula. </dd>

            <dt>Sub-Section two</dt>
            <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis justo justo, aliquam vel imperdiet a, semper sed felis. Nunc nec odio non massa pellentesque blandit et in velit. Proin massa libero, pulvinar at consectetur ut, ullamcorper id ipsum. Mauris in lorem ligula. </dd>

            <dt>Sub-Section three</dt>
            <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis justo justo, aliquam vel imperdiet a, semper sed felis. Nunc nec odio non massa pellentesque blandit et in velit. Proin massa libero, pulvinar at consectetur ut, ullamcorper id ipsum. Mauris in lorem ligula. </dd>

            <dt>Sub-Section four</dt>
            <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis justo justo, aliquam vel imperdiet a, semper sed felis. Nunc nec odio non massa pellentesque blandit et in velit. Proin massa libero, pulvinar at consectetur ut, ullamcorper id ipsum. Mauris in lorem ligula. </dd>

            <dt>Sub-Section five</dt>
            <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis justo justo, aliquam vel imperdiet a, semper sed felis. Nunc nec odio non massa pellentesque blandit et in velit. Proin massa libero, pulvinar at consectetur ut, ullamcorper id ipsum. Mauris in lorem ligula. </dd>
        </dl>
    </dd>

    <dt>Section two</dt>
    <dd>etc..</dd>

    <dt>Section three</dt>
    <dd>etc..</dd>

    <dt>Section four</dt>
    <dd>etc..</dd>
</dl>

【参考方案1】：

我可能会使用嵌套无序列表，使用 h* 标记作为章节标题，但您的 DL 使用似乎很好。人们一直在争论什么是 DL 的正确使用。

【讨论】：

只要使用某种列表，IMO 并不重要。只是不要使用桌子！