DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> 盤點HTML5標簽使用的常見誤區
盤點HTML5標簽使用的常見誤區
編輯:HTML5教程     

 現在HTML5還處在草案階段,有些新的標簽元素的解釋也是經常有變化,甚至標簽加入 移出也很頻繁(比如 hgroup),同時現有的大的門戶網站在使用HTML5方面也沒有很好的范例可以參考,讓大家的學習過程更摸索.本文將給大家分享html5構建頁面的小錯誤和不好的實踐方法,讓我們在以後的工作中避免這些錯誤。

不要把<Section>當成簡單的容器來定義樣式

我們經常看到的一個錯誤,就是武斷的將<div>標簽用<Section>標簽來替代,特別是將作為包圍容器的<div>用來替換。在XHTML或者HTML4中,我們將會看到類似下面的代碼:

XML/HTML Code復制內容到剪貼板
  1. <!– HTML 4-style code –>  
  2.  <div id=”wrapper”>  
  3.    <div id=”header”>  
  4.      <h1>My super duper page</h1>  
  5.      <!– Header content –>  
  6.    </div>  
  7.    <div id=”main”>  
  8.      <!– Page content –>  
  9.    </div>  
  10.    <div id=”secondary”>  
  11.      <!– Secondary content –>  
  12.    </div>  
  13.    <div id=”footer”>  
  14.      <!– Footer content –>  
  15.    </div>  
  16.  </div>  

現在我看到了下面的代碼樣子:

XML/HTML Code復制內容到剪貼板
  1. <!– Don’t copy this code! It’s wrong! –>  
  2.  <section id=”wrapper”>  
  3.    <header>  
  4.      <h1>My super duper page</h1>  
  5.      <!– Header content –>  
  6.    </header>  
  7.    <section id=”main”>  
  8.      <!– Page content –>  
  9.    </section>  
  10.    <section id=”secondary”>  
  11.      <!– Secondary content –>  
  12.    </section>  
  13.    <footer>  
  14.      <!– Footer content –>  
  15.    </footer>  
  16.  </section>  

直觀的看,上面的例子是錯誤的:<Section>並不是一個容器.<Section>元素是有語意的區段,幫助構建文檔大 綱。它應該包含標題。如果你要尋找一個可以包含頁面的元素(不論是 HTML 或者 XHTML ),通常的做法是直接對<body>標簽定義樣式就像Kroc Camen描述的那樣子,如果你還需要額外的元素來定義樣式,使用<div>,就像Dr Mike 闡述的那樣, div並沒有滅亡,如果這裡沒有其它更合適的,div可能是你最合適的選擇。記住這點,這裡我們重新修正了上面的例子,通過使用兩個新角色。(你是否需要額外的<div>取決於你的設計。)

XML/HTML Code復制內容到剪貼板
  1. <body>  
  2.    <header>  
  3.      <h1>My super duper page</h1>  
  4.      <!– Header content –>  
  5.    </header>  
  6.    <div role=”main”>  
  7.      <!– Page content –>  
  8.    </div>  
  9.    <aside role=”complementary”>  
  10.      <!– Secondary content –>  
  11.    </aside>  
  12.    <footer>  
  13.      <!– Footer content –>  
  14.    </footer>  
  15.  </body>  

如果你還是無法確定哪一個元素更適合使用,我建議你去查看HTML5 sectioning content element flowchart來讓你繼續前行。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved