現在HTML5還處在草案階段,有些新的標簽元素的解釋也是經常有變化,甚至標簽加入 移出也很頻繁(比如 hgroup),同時現有的大的門戶網站在使用HTML5方面也沒有很好的范例可以參考,讓大家的學習過程更摸索.本文將給大家分享html5構建頁面的小錯誤和不好的實踐方法，讓我們在以后的工作中避免這些錯誤。
不要把<Section>當成簡單的容器來定義樣式
我們經常看到的一個錯誤，就是武斷的將<div>標簽用<Section>標簽來替代，特別是將作為包圍容器的<div>用來替換。在XHTML或者HTML4中，我們將會看到類似下面的代碼：
XML/HTML Code復制內容到剪貼板- <!– 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>
現在我看到了下面的代碼樣子：
XML/HTML Code復制內容到剪貼板- <!– Don’t copy this code! It’s wrong! –>
- <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>取決于你的設計。)
XML/HTML Code復制內容到剪貼板- <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來讓你繼續前行。
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。