嵌套 html dl dt dd
我想检查一下我的想法。我需要为下面的 UI 设计创建 HTML 代码,并且我在标记中使用了嵌套的 dl。这在语义上有效吗?如果没有,我还应该如何在 HTML 中实现这个设计?
<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>
I want to check my thinking. I need to create HTML code for the UI design below and I have used nested dl
s in my markup. Is this semantically valid? If not, how else should I implement this design in HTML?
<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>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我可能会使用嵌套无序列表,并使用 h* 标签作为部分标题,但您的 DL 使用似乎很好。人们不断争论什么是 DL 的正确使用方式。
I would probably have used nested unordered lists using h* tags for the section titles, but your DL use seems fine. People debate constantly about what is the proper use of DLs.