本文根據原文對譯文做了簡單的一些修改，增加了一些可能引起誤解的英文原文。
人們在標簽使用中最常見到的錯誤之一就是隨意將Html5的<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>並不是樣式容器[wrapper]。<section>元素表示的是內容中用來幫助構建文檔概要的語義部分。它應該包含一個頭部[heading]。如果你想找一個用作頁面容器的元素(就像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 sectioning content element flowchart。
寫不需要寫的標簽當然是毫無意義的。不幸的是，我經常看到<header>和<hgroup>被無意義的濫用。你可以閱讀一下關於<header>和<hgroup>元素的兩篇文章做一個詳細的了解，其中內容簡單總結如下：
由於header可以在一個文檔中使用多次，可能使得這樣代碼風格受到歡迎：
<!-- 請不要復制這段代碼！此處並不需要header --><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>在headers這個主題上，我也經常看到hgroup的錯誤使用。有時候不應該同時使用<hgroup>和<header>:
第一個問題一般是這樣的：
<!-- 請不要復制這段代碼!此處不需要hgroup --><header> <hgroup> <h1>My best blog post</h1> </hgroup> <p>by Rich Clark</p></header>此例中，直接拿掉hgroup，讓heading 裸奔吧。
<header> <h1>My best blog post</h1> <p>by Rich Clark</p></header>第二個問題是另一個不必要的例子：
<!-- 請不要復制這段代碼!此處不需要header --><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>關於
更多的例子和解釋，請參閱相關文章。隨著Html5引入了30個新元素（截止到原文發布時），我們在構造語義化和結構化的標簽時的選擇也變得有些不慎重。也就是說，我們不應該濫用超語義化的元素。不幸的是，nav就是這樣一個被濫用的例子。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.
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.
User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip or provide on request (or both).
nav元素表示頁面中鏈接到其他頁面或者本頁面其他部分的區塊；包含導航連接的區塊。
注意：不是所有頁面上的鏈接都需要放在nav元素中——這個元素本意是用作主要的導航區塊。舉個具體的例子，在footer中經常會有眾多的鏈接，比如服務條款，主頁，版權聲明頁等等。footer元素自身已經足以應付這些情況，雖然nav元素也可以用在這裡，但通常我們認為是不必要的。
WHATWG Html spec
關鍵的詞語是“主要的”導航。當然我們可以互相噴上一整天什麼叫做“主要的”。而我個人是這樣定義的：
既然並沒有絕對的對錯，所以根據一個非正式投票以及我自己的解釋，以下的情況，不管你放不放，我反正不放在<nav>中：
如果你不確定是否要將一系列的鏈接放在<nav>中，問你自己：“它是主要的導航嗎？”為了幫助你回答這個問題，考慮以下首要原則：
如果這些問題的答案是“不”，那就跟<nav>鞠個躬，然後獨自離開吧。
<figure>以及<figcaption>的正確使用，確實是難以駕馭。讓我們來看看一些常見的錯誤。
我曾告訴各位不要寫不必要的代碼。這個錯誤也是同樣的道理。我看到很多網站把所有的圖片都寫作figure。看在圖片的份上請不要給它加額外的標簽了。你只是讓你自己蛋疼，而並不能使你的頁面內容更清晰。
規范中將<figure>描述為“一些流動的內容，有時候會有包含於自身的標題說明。一般在文檔流中會作為獨立的單元引用。”這正是figure的美妙之處——它可以從主內容頁移動到sidebar中，而不影響文檔流。這些問題也包含在之前提到的Html5 element flowchart中。
如果純粹只是為了呈現的圖，也不在文檔其他地方引用，那就絕對不是
進一步的說，logo也不適用於figure。下面是我常見的一些代碼片段：
<!-- 請不要復制這段代碼!這是錯的--><header> <h1> <figure> <img src="/img/mylogo.png" alt="My company" class="hide" /> </figure> My company name </h1></header><!-- 請不要復制這段代碼!這也是錯的--><header> <figure> <img src="/img/mylogo.png" alt="My company" /> </figure></header>沒什麼好說的了。這就是很普通的錯誤。我們可以為logo 是否應該是H1 標簽而互相噴到牛都放完回家了，但這裡不是我們討論的焦點。真正的問題在於figure 元素的濫用。figure 只應該被引用在文檔中，或者被section 元素圍繞。我想你的logo 並不太可能以這樣的方式引用吧。很簡單，請勿使用figure。你只需要這樣做:
<header> <h1>My company name</h1> <!-- More stuff in here --></header>另一個常見的關於figure的誤解是它只被圖片使用。figure可以是視頻，音頻，圖表，一段引用文字，表格，一段代碼，一段散文，以及任何它們或者其他的組合。
不要把figure局限於圖片。web標准的職責是精確的用標簽描述內容。
這是個常見的問題，但並不是一個錯誤，我認為我們應該通過最佳實踐來避免這種風格。在Html5中，script和style元素不再需要type屬性。然而這些很可能會被你的CMS自動加上，所以要移除也不是那麼的輕松。但如果你是手工編碼或者你完全可以控制你的模板的話，那真的沒有什麼理由再去包含type屬性。所有的浏覽器都認為腳本是Javascript而樣式是CSS樣式，你沒必要再多此一舉了。
<!-- 請不要復制這段代碼!它太沉余了! --><link type="text/css" rel="stylesheet" href="css/styles.CSS" /><script type="text/Javascript" src="JS/scripts" /></script>其實只需要這樣寫：
<link rel="stylesheet" href="CSS/styles.CSS" /><script src="JS/scripts" /></script>甚至指定字符集的代碼都可以省略掉 。Mark Pilgrim在Dive into Html5的語義化一章中作出了解釋。
Html5引入了一些form的新屬性，以下是一些使用上的注意事項：
一些多媒體元素和其他元素也具有布爾屬性。這裡所說的規則也同樣適用。有一些新的form屬性是布爾型的，意味著它們只要出現在標簽中，就保證了相應的行為已經設置。這些屬性包括：
坦白的說，我很少看到這樣的。以required為例，常見的是下面這種：
<!-- 請不要復制這段代碼! 這是錯的! --><input type="email" name="email" required="true" /><!-- 另一個錯誤的例子--><input type="email" name="email" required="1" />嚴格來說，這並沒有大礙。浏覽器的Html 解析器只要看到required 屬性出現在標簽中，那麼它的功能就會被應用。但是如果你反過來寫equired=”false”呢？
<!-- 請不要復制這段代碼! 這是錯的! --><input type="email" name="email" required="false" />析器仍然會將required屬性視為有效並執行相應的行為，盡管你試著告訴它不要去執行了。這顯然不是你想要的。有三種有效的方式去使用布爾屬性。（後兩種只在xthml中有效）
requiredrequired=""required="required"上述例子的正確寫法應該是:
<input type="email" name="email" required />