Question

我可以使用像<section id="wrapper"></section>这样的东西，但是因为我很迂腐，使用<wrapper></wrapper>作为我的html元素有什么不对吗？

我正在使用html5 shiv和现代化器，它确实工作正常但我只是想知道这样做是否有任何特别的错误。

Answer 1

HTML中没有wrapper元素，所以是的，这是错误的。此外，<section>元素具有特定的语义含义，不应用作通用元素包装器。具体而言，它代表文档概要中的一部分内容，可能具有适当的相应页眉和页脚。 <div>多年来一直在做包装工作。

Answer 2

创建自己的标签会为您提供无效的HTML 5文档。它可能有用，但有广泛的影响（从解析器的期望到浏览器的默认样式表）。

正如其他答案所述，它也不是section的好用。

我建议将class attribute设置为div。通过分配一个类名，您可以说该元素 - 虽然有点泛型 - 属于该类型（几乎就像在面向对象语言中实例化一个类的实例）。

您还可以添加custom data attributes以提供有关该元素的更多信息。这些是完全有效的（强调我的）：

...旨在将自定义数据存储为页面或应用程序的私有数据， ，没有更合适的属性或元素。

<div class="wrapper" data-custom="foo"></div>

Answer 3

<section>元素代表页面中的一个部分，而不是您的布局。这非常重要，并且被包括我在内的HTML5中的大多数初学者所困惑。

让我用另一个例子说明你错在哪里：

<section id="banner">
</section>

横幅是布局的一部分，而不是网络内容。因此他们没有任何部分。它们必须由<div>代表，因为它们曾经是HTML 4。

<section id="wrapper">...</section>

以同样的方式出错，因为包装器是纯粹的布局特定任务，因此它不代表页面上的任何特定内容。 <sections>应始终代表差异化内容，而非其他内容。

以下是HTML5的示例，可以认为是有效的。

<div id="wrapper">

    <section id="mainArticle">

    </section>
    <section id="aboutAuthor">

    </section>
    <aside id="relatedArticles">

    </aside>

</div>

为什么我们不能使用<wrapper> </wrapper>？

3 个答案: