下面附上原文地址：Avoiding common HTML5 mistakes，作者 :Richard Clark，有疑问的地方大家可以核对英文。
在这篇文章中，我将给大家分享HTML5构建页面的小错误和不好的实践方法，让我们在以后的工作中避免这些错误。
不要把<Section>当成简单的容器来定义样式
我们经常看到的一个错误，就是武断的将<div>标签用<section>标签来替代，特别是将作为包围容器的<div>用<section>来替换。在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>
现在我看到了下面的代码样子：
<!-- Don’t copy this code! It’s wrong! -->
<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>元素是有语意的区段，帮助构建文档大纲。它应该包含标题。如果你要寻找一个可以包含页面的元素（不论是 HTML 或者 XHTML ），通常的做法是直接对<body>标签定义样式就像Kroc Camen描述的那样子，如果你还需要额外的元素来定义样式，使用<div>, 就像Dr Mike 阐述的那样, div并没有灭亡，如果这里没有其它更合适的，div可能是你最合适的选择。
记住这点，这里我们重新修正了上面的例子，通过使用两个新角色。（你是否需要额外的<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 sectioning content element flowchart来让你继续前行。
只在需要的时候使用<hgroup>和<header>标签
使用标记的时候写入了一些并不需要的现象这是不合理的。不幸的是，经常发现大家在并不需要的地方使用<header>和<hgroup>标签。你可以跟进我们关于<header>和<hgroup>的最新进展，下面是我的简单归纳：- <header>元素通常是通常作为一组解释或者导航辅助工具，通常包含section的标题.
- <hgroup>元素会将当有副标题\子标题，各类标识文字时，对<h1>到<h6>标题进行群组，将其作为section的标题.
过度使用的<header>
你肯定知道，在一个文档中，可以使用多次<header>标签，下面就是一种很受大家欢迎的模式:<!-- Don’t copy this code! No need for header here -->
<article>
<header>
<h1>My best blog post</h1>
</header>
<!-- Article content -->
</article>
如果你的<header>标签只包含一个标题元素时，就不要使用<header>标签了。<article>标签肯定会让你的标题在文档大纲中显现出来，而且因为<header>并不包含多重内容(就像定义中描述的那样子)，我们为何要增加而外的代码呢?应该像下面这样简单才可以:
<article>
<h1>My best blog post</h1>
<!-- Article content -->
</article>
<hgroup>不合理使用
在标题的这个主题上，经常看到使用<hgroup>的错误案例。在下面这种情况下你不能将<header>标签和<hgroup>标签一起使用:- 这里只有一个标题,
- 或者<hgroup>本身就够了(比如：不需要<hgroup>)
<!-- Don’t copy this code! No need for hgroup here -->
<header>
<hgroup>
<h1>My best blog post</h1>
</hgroup>
<p>by Rich Clark</p>
</header>
这种情况下，将<hgroup>移除，只保留标题就好.
<header>
<h1>My best blog post</h1>
<p>by Rich Clark</p>
</header>
第二种情况也是包含了他们并不需要的标签.
<!-- Don’t copy this code! No need for header here -->
<header>
<hgroup>
<h1>My company</h1>
<h2>Established 1893</h2>
</hgroup>
</header>
当<header>标签的子元素只有<hgroup>的时候，为什么我们还需要一个额外的<header>?如果没有额外的元素放到<header>中(比如<hgroup>的兄弟元素)，我们直接将<header>元素去掉就好。
<hgroup>
<h1>My company</h1>
<h2>Established 1893</h2>
</hgroup>
不要将所有的链接列表都放到<nav>标签
在HTML5新增的30个元素中(在我们写这篇文章的时候)，我们在构建更具语义\结构化的标签的时候，我们的选择变得太丰富。也就是说我们对现在给我们提供的这些超级有语义的标签，我们可能会滥用。<nav>就是一个很悲剧的例子。在规范中的描述是这样的:The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
Note: Not all groups of links _disibledevent=>About me和品味Flavours ）博客文章的标签 博客文章的分类列表 第三级导航 大页脚 如果你不能确定是否使用<nav>，那就先对你问一下下面的几个问题：“这是否是一个主要链接？”，你可以根据下面的几个因素来回答你刚才的问题：
最新评论