【專業文章】六種常見的HTML5寫法誤用(二)
四、figure元素的常見錯誤
figure以及figcaption的正確使用，確實是難以駕馭。讓我們來看看一些常見的錯誤，
不是所有的圖片都是figure
上文中，我曾告訴各位不要寫不必要的程式碼。這個錯誤也是同樣的道理。我看到很多網站把所有的圖片都寫作figure。看在圖片的份上請不要給它加額外的標籤了。你只是讓你自己蛋疼，而並不能使你的頁面內容更清晰。
規範中將figure描述為“一些流動的內容，有時候會有包含於自身的標題說明。一般在文件流中會作為獨立的單元引用。”這正是figure的美妙之處——它可以從主內容頁移動到sidebar中，而不影響文件流。
這些問題也包含在之前提到的HTML5 element flowchart中。
如果純粹只是為了呈現的圖，也不在文件其他地方引用，那就絕對不是<figure>。其他視情況而定，但一開始可以問自己：“這個圖片是否必須和上下文有關？”如果不是，那可能也不是<figure>（也許是個<aside>）。繼續：“我可以把它移動到附錄中嗎？”如果兩個問題都符合，則它可能是 <figure>。
Logo並不是figure
進一步的說，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可以是視訊，音訊，圖表，一段引用文字，表格，一段程式碼，一段散文，以及任何它們或者其他的組合。不要把figure侷限於圖片。web標準的職責是精確的用標籤描述內容。
五、不要使用不必要的type屬性
這是個常見的問題，但並不是一個錯誤，我認為我們應該通過最佳實踐來避免這種風格。
在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的語義化一章中作出瞭解釋。
六、form屬性的錯誤使用
HTML5引入了一些form的新屬性，以下是一些使用上的注意事項：
布林屬性
一些多媒體元素和其他元素也具有布林屬性。這裡所說的規則也同樣適用。
有一些新的form屬性是布林型的，意味著它們只要出現在標籤中，就保證了相應的行為已經設定。這些屬性包括：
- autofocus
- autocomplete
- required
坦白的說，我很少看到這樣的。以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屬性視為有效並執行相應的行為，儘管你試著告訴它不要去執行了。這顯然不是你想要的。