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

Question

我可以使用像<section id="wrapper"></section>这样的东西，但是，因为我是如此的书生气，使用<wrapper></wrapper>作为我的html元素有什么错吗？

我使用的是html5 shiv和modernizer，它确实工作得很好，但我只是想知道这样做是否有什么特别不好的地方。

Answer 1

<section>元素表示页面中的一个部分，而不是您的布局。这一点非常重要，也让包括我在内的大多数HTML5初学者感到困惑。

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

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

横幅是布局的一部分，而不是网页内容。因此，它们没有任何部分。它们必须像在HTML4中那样用<div>表示。

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

也是错误的，因为包装器纯粹是特定于布局的任务，因此它不表示页面上的任何特定内容。<sections> 应该始终代表不同的内容，而不是其他内容。

这里有一个HTML5的例子，可以被认为是有效的。

<div id="wrapper">

    <section id="mainArticle">

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

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

    </aside>

</div>

Answer 2

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

Answer 3

创建自己的标记将生成无效的HTML5文档。它可能会起作用，但也有广泛的影响(从解析器的期望到浏览器的默认样式表)。

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

我建议在div上设置class attribute。通过分配一个类名，您可以声明元素是该类型的(几乎就像在面向对象语言中实例化一个类的实例)。

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

...intended用于存储页面或应用程序专用的自定义数据，没有更合适的属性或元素。

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