避免常見的六種HTML5錯誤用法

時間 2019-11-15

原文原文鏈接

1、不要使用section做爲div的替代品

人們在標籤使用中最多見到的錯誤之一就是隨意將HTML5的<section>等價於<div>——具體地說，就是直接用做替代品(用於樣式)。在XHTML或者HTML4中，咱們常看到這樣的代碼：javascript

<!-- 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中，會是這樣：css

<!-- 請不要複製這些代碼！這是錯誤的！ -->
<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的風格)，那麼考慮如Kroc Camen所說，直接把樣式寫到body元素上吧。若是你仍然須要額外的樣式容器，仍是繼續使用div吧。html

基於上述思想，下面纔是正確的使用HTML5和一些ARIA roles特性的例子（注意，根據你本身的設計，你也可能須要加入div）html5

<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 flowchartjava

2、只在須要的時候使用header和hgroup

寫不須要寫的標籤固然是毫無心義的。不幸的是，我常常看到header和hgroup被無心義的濫用。你能夠閱讀一下關於header和hgroup元素的兩篇文章作一個詳細的瞭解，其中內容我簡單總結以下：web

header元素表示的是一組介紹性或者導航性質的輔助文字，常常用做section的頭部
當頭部有多層結構時，好比有子頭部，副標題，各類標識文字等，使用hgroup將h1-h6元素組合起來做爲section的頭部

header的濫用

因爲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>

`<hgroup>的錯誤使用`

在headers這個主題上，我也常常看到hgroup的錯誤使用。有時候不該該同時使用hgroup和header:app

若是隻有一個子頭部
若是hgroup本身就能工做的很好。。。這不廢話麼

第一個問題通常是這樣的：ide

<!-- 請不要複製這段代碼!此處不須要hgroup -->
<header>
  <hgroup>
    <h1>My best blog post</h1>
  </hgroup>
  <p>by Rich Clark</p>
</header>

此例中，直接拿掉hgroup，讓heading果奔吧。post

<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>

關於<hgroup>更多的例子和解釋，請參閱相關文章

`3、不要把全部列表式的連接放在nav裏`

隨着HTML5引入了30個新元素（截止到原文發佈時），咱們在構造語義化和結構化的標籤時的選擇也變得有些不慎重。也就是說，咱們不該該濫用超語義化的元素。不幸的是，nav就是這樣一個被濫用的例子。nav元素的規範描述以下：

nav元素表示頁面中連接到其餘頁面或者本頁面其餘部分的區塊；包含導航鏈接的區塊。

注意：不是全部頁面上的連接都須要放在nav元素中——這個元素本意是用做主要的導航區塊。舉個具體的例子，在footer中常常會有衆多的連接，好比服務條款，主頁，版權聲明頁等等。footer元素自身已經足以應付這些狀況，雖然nav元素也能夠用在這裏，但一般咱們認爲是沒必要要的。

WHATWG HTML spec

關鍵的詞語是「主要的」導航。固然咱們能夠互相噴上一成天什麼叫作「主要的」。而我我的是這樣定義的：

主要的導航
站內搜索
二級導航（略有爭議）
頁面內導航（好比很長的文章）

既然並無絕對的對錯，因此根據一個非正式投票以及我本身的解釋，如下的狀況，無論你放不放，我反正不放在<nav>中：

分頁控制
社交連接（雖然有些社交連接也是主要導航，好比「關於」「收藏」）
博客文章的標籤
博客文章的分類
三級導航
過長的footer

若是你不肯定是否要將一系列的連接放在nav中，問你本身：「它是主要的導航嗎？」爲了幫助你回答這個問題，考慮如下首要原則：

若是使用section和hx也一樣合適，那麼不要用nav — Hixie on IRC
爲了方便訪問，你會在某個「快捷跳轉」中給這個nav標籤加一個連接嗎？

若是這些問題的答案是「不」，那就跟<nav>鞠個躬，而後獨自離開吧。

4、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標準的職責是精確的用標籤描述內容。

5、不要使用沒必要要的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的語義化一章中做出瞭解釋。

6、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屬性視爲有效並執行相應的行爲，儘管你試着告訴它不要去執行了。這顯然不是你想要的。

有三種有效的方式去使用布爾屬性。（後兩種只在xthml中有效）

required
required=""
required="required"

上述例子的正確寫法應該是:

<input type="email" name="email" required />

Thanks to Ian Devlin, Derek Johnson, Tady Walsh, the HTML5 Gallery curators, and the HTML5 Doctors for their input to this article.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。