数据页面的 HTML 结构语义

Question

在设计表单/详细信息 View 以实现最大的可读性(可访问性)和多功能性时，最好使用什么结构？

例如，ASP.NET MVC 框架的脚手架创建了一个字段集，其顶部有一个图例，所有字段都在 p 中(一个标签，然后是输入/编辑器集)。

您认为最通用的结构是什么？

例如，如果我稍后想更改布局以并排放置两个或三个字段而不是自上而下，我只想通过 CSS 来实现，因为它在结构上不相关。

谢谢，
基隆

编辑: friend 推荐使用 dl、dt 和 dds...有人对此有任何想法吗？

Answer 1

我使用的结构与 ASP.NET 脚手架生成的结构非常相似，只是我使用的是 divs 而不是 ps:

<form>
    <fieldset>
        <legend>Legendary Fieldset</legend>
        <div>
            <label for="textBox">Text Input</label>
            <input name="textBox" id="textBox" />
        </div>
        <div>
            <label for="selectBox">Select box</label>
            <select name="selectBox" id="selectBox">
                <option>1</option>
                <option>2</option>
            </select>
        </div>
    </fieldset>
    <!-- more fieldsets if required -->
</form>

我使用 div 是因为对我来说它比 p 元素在语义上更正确，因为它们用于文本段落。

在设计样式时，它也是一个通用的结构，因为您可以将字段集设置为 500 像素宽，将字段集 div 设置为 250 像素宽并 float ，从而实现并排。或者您可以使字段集的宽度与字段集 div 的宽度相同。或者，您可以让 fieldset 和 fieldset div 具有相同的宽度，然后在宽度为一半且 float 的某些 div(比如“一半”)上粘贴一个类。可能性真的是无穷无尽的。

无论如何，这正是我日常使用的东西 - 虽然它用途广泛，但可能无法满足所有要求。

编辑 就定义列表而言，它们是专门的元素，在语义上不应用于布置表单。