避免常见的HTML5错误用法

来源：互联网发布：华为实力到底如何知乎编辑：程序博客网时间：2024/05/21 10:20

不要使用section作为div的替代品
人们在标签使用中最常见到的错误之一就是随意将HTML5的<section>等价于<div>——具体地说，就是直接用作替代品(用于样式)。在XHTML或者HTML4中，我们常看到这样的代码：


<div id="wrapper">
<div id="header">
<h1>My super duper page</h1>
Header content
</div>
<div id="main">
Page content
</div>
<div id="secondary">
Secondary content
</div>
<div id="footer">
Footer content
</div>
</div>
而现在在HTML5中，会是这样：


<section id="wrapper">
<header>
<h1>My super duper page</h1>

</header>
<section id="main">

</section>
<section id="secondary">

</section>
<footer>

</footer>
</section>
这样使用并不正确：<section>并不是样式容器。section元素表示的是内容中用来帮助构建文档概要的语义部分。它应该包含一个头部。如果你想找一个用作页面容器的元素(就像HTML或者XHTML的风格)，那么考虑如Kroc Camen所说，直接把样式写到body元素上吧。如果你仍然需要额外的样式容器，还是继续使用div吧。

基于上述思想，下面才是正确的使用HTML5和一些ARIA roles特性的例子（注意，根据你自己的设计，你也可能需要加入div）

<body>
<header>
<h1>My super duper page</h1>

</header>
<div role="main">

</div>
<aside role="complementary">

</aside>
<footer>

</footer>
</body>

如果你还是无法确定使用哪种元素，那么我建议你参考HTML5 sectioning content element flowchart