避免常见的HTML5错误用法
2015年03月21日 14:47
0 点赞
0 评论
更新于 2025-11-21 17:59
在HTML标签使用过程中，一个极为常见的错误是随意将HTML5的<section>元素等价于<div>元素，具体表现为直接将<section>用作<div>的替代品来实现样式效果。
在XHTML或者HTML4中，常见的页面结构代码如下：
<!-- HTML 4-style code -->
<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 content -->
</header>
<section id="main">
<!-- Page content -->
</section>
<section id="secondary">
<!-- Secondary content -->
</section>
<footer>
<!-- Footer content -->
</footer>
</section>
这种使用方式是不正确的。<section>元素并非单纯的样式容器，它表示的是内容中用于帮助构建文档概要的语义部分。按照规范，<section>元素应该包含一个头部（通常是<h1> - <h6>标签）。
如果想找一个用作页面容器的元素（类似HTML或XHTML的风格），可以像Kroc Camen所说，直接把样式应用到<body>元素上。若仍然需要额外的样式容器，建议继续使用<div>元素。
基于上述原则，下面是正确使用HTML5和一些ARIA roles特性的示例（需注意，根据具体设计，可能也需要加入<div>元素）：
<body>
<header>
<h1>My super duper page</h1>
<!-- Header content -->
</header>
<div role="main">
<!-- Page content -->
</div>
<aside role="complementary">
<!-- Secondary content -->
</aside>
<footer>
<!-- Footer content -->
</footer>
</body>
通过遵循这些规则，可以更准确、规范地使用HTML5，避免常见的错误用法。