下面附上原文地址：Avoiding common HTML5 mistakes，作者 :Richard Clark，有疑問的地方大家可以覈對英文。
在這篇文章中，我將給大家分享HTML5構建頁面的小錯誤和不好的實踐方法，讓我們在以後的工作中避免這些錯誤。
不要把<Section>當成簡單的容器來定義樣式
我們經常看到的一個錯誤，就是武斷的將<div>標籤用<section>標籤來替代，特別是將作爲包圍容器的<div>用<section>來替換。在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>
現在我看到了下面的代碼樣子：
<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>取決於你的設計。）
<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>標籤，下面就是一種很受大家歡迎的模式:
<article>
<header>
<h1>My best blog post</h1>
</header>
<!-- Article content -->
</article>
如果你的<header>標籤只包含一個標題元素時，就不要使用<header>標籤了。<article>標籤肯定會讓你的標題在文檔大綱中顯現出來，而且因爲<header>並不包含多重內容(就像定義中描述的那樣子)，我們爲何要增加而外的代碼呢?應該像下面這樣簡單纔可以:
<h1>My best blog post</h1>
<!-- Article content -->
</article>
<hgroup>不合理使用
在標題的這個主題上，經常看到使用<hgroup>的錯誤案例。在下面這種情況下你不能將<header>標籤和<hgroup>標籤一起使用:
- 這裏只有一個標題,
- 或者<hgroup>本身就夠了(比如：不需要<hgroup>)
第一種情形看上去是下面的樣子:
<header>
<hgroup>
<h1>My best blog post</h1>
</hgroup>
<p>by Rich Clark</p>
</header>
這種情況下，將<hgroup>移除，只保留標題就好.
<h1>My best blog post</h1>
<p>by Rich Clark</p>
</header>
第二種情況也是包含了他們並不需要的標籤.
<header>
<hgroup>
<h1>My company</h1>
<h2>Established 1893</h2>
</hgroup>
</header>
當<header>標籤的子元素只有<hgroup>的時候，爲什麼我們還需要一個額外的<header>?如果沒有額外的元素放到<header>中(比如<hgroup>的兄弟元素)，我們直接將<header>元素去掉就好。
<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 on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.
WHATWG HTML spec
這裏面的關鍵詞是”重要”導航。我們可能會對”重要”有不同的定義，但是我的理解是:
- 主要導航
- 網站搜索
- 二級導航(這個能是有爭議的)
- 頁面內鏈接(比如一篇很長的文章)
雖然並沒有對錯之分，但根據我的理解和一個民意投票讓我覺得在下面這些情形下，我不會使用<nav>標籤:
如果你不能確定是否使用<nav>，那就先對你問一下下面的幾個問題：“這是否是一個主要鏈接？”，你可以根據下面的幾個因素來回答你剛纔的問題：
- 如果用<section>和標題標籤能夠解決你的問題，那就不要去使用<nav>–Hixie on IRC
- 你是不是爲了增加可訪問性而增加的一個快捷跳轉鏈接呢？
如果上面的回答都是“不”，那可能就不適合使用<nav>。
<figure>元素的錯誤
<figure>和經常與它合夥作案的<figcaption>，是很難掌握的標籤，下面是經常看到的一些小錯誤。
並不是所有的圖片都是figure（注：比較難理解阿，image=圖片，figure=圖形）
之前，我曾經說過不要寫那些不需要的標籤。這個錯誤也是相同的。我經常看到一個網站上的每張圖片都有<figure>標籤。這些額外增加的標籤並不會給你帶來任何的益處，並且還增加了你自己的工作強度和讓自己的內容變得更難理解。
在規範中關於<figure>的解釋如下：“某些流內容，可以有標題，自我包含並且通常作爲一個單元獨立於內文檔流之外。”在那裏有完美的表述，就是它可以被從主內容中移除——比如放到邊攔，而對文檔流沒有影響。
如果僅僅是一張表現類的圖片而且和文檔中其他的內容沒有關係的話，那就不需要使用<figure>.”這張圖片需要對上下文的內容作出解釋嗎？”，如果答案是”否”，那就可能不是<figure>(可能是<aside>)，“我能把它移到附錄裏面嗎？”，如果這兩個問題的答案都是”是”，那就可能是<figure>.
你的標誌不是一個<figure>
將上面的延伸開來，對你的logo也是這樣。下面是兩組我找到的有規律的代碼片斷：
<header>
<h1>
<figure>
<img src="/img/mylogo.png" alt="My company" class="hide"/>
</figure>
My company name
</h1>
</header>
<!-- Don’t copy this code! It’s wrong! -->
<header>
<figure>
<img src="/img/mylogo.png" alt="My company"/>
</figure>
</header>
這裏就不需要說啥了，這是很明顯的錯誤，可能你認爲我們說的是不是將logo放在H1標籤裏面，但是我們在這裏並不討論這個問題。讓我們迷惑的是<figure>元素。<figure>標籤只用在當有上下文需要說明或者被<section>包圍的時候。我這裏要說的是你的logo可能很少會被這種情況下使用。很簡單，那就不要去這樣做，你需要的僅僅是下面的樣子。
<h1>My company name</h1>
<!-- More stuff in here -->
</header>
figure只能用在標籤上的誤解
另一個對<figure>的誤解就是我們通常認爲它只能用在圖片上面。事實上並不是這樣子的，它可以被用在 <video><audio>, 一個圖標 (比如<SVG>), 一個引用, 一個表格, 一段代碼, 一段散文, 或者任何和這些相關的組合。不要把你的<figure>標籤僅僅侷限在圖片上。我們網頁製作師的任務就是用標籤更準確的描述內容。
這裏有一篇更深入講解 <figure>的文章I wrote about
<figure>，很值得閱讀的。
不要去使用那些不必要的type屬性
這可能是我們最常見的一些問題，它們並不是真正的錯誤，但我覺得我們的最好實踐還是儘量避免這種模式。
在HTML5中，我們並不需要給<script>和<script>增加 type 屬性，如果這些從CMS默認添加的內容中移出是很痛苦的事情，那當你手工編碼的時候還寫入它們或者你能完全的控制你的模板時候你完全可以刪掉它們。因爲所有的瀏覽器都會將<script>解析成Javascript和<css>標籤是CSS，你不再需要那個type屬性了：
<link type="text/css" rel="stylesheet" href="css/styles.css"/>
<script type="text/javascript" src="js/scripts.js"></script>
現在我們可以寫成下面的樣子：
<script src="js/scripts.js"></script>
你也能夠對編碼的設置作出省略。Mark Pilgrim在Dive into HTML5的語義化一章中作出瞭解釋。
不要包含錯誤的表單屬性
你可能發現<html5>引入了很多新的表單屬性。現在我就給大家講講一些不合適的使用。
布爾值屬性
新引入的標籤屬性有幾個是布爾類型的，它們的標籤行爲基本接近。這些屬性包括：
- autofocus
- autocomplete
- required
坦白的說，下面的這種情況對我來說並不常見，但我們從 required 作爲例子，如下：
<input type="email" name="email" required="true"/>
<!-- Another bad example -->
<input type="email" name="email" required="1"/>
基本上看，這段代碼並不會帶來危害。客戶端對 HTML的解析遇到 required 標籤屬性時，他的功能就會生效。但是當我們將代碼修改，錄入 required=”false” 的情況呢？
<input type="email" name="email" required="false"/>
解析的時候依然會遇到 required 屬性，雖然你希望加入的行爲是“假”，它依然會被解析成“真”。
這裏有三種合理的方法讓布爾值生效。（第二種和第三種方案只有你在寫 XHTML 解析的時候需要）
我們上面的例子可以寫成下面的樣子：
總結
對我來說，我無法將所有蹩腳的代碼模式都展示在這裏，但是上面說的這些都是我們經常遇到的。