你是不是像我一樣對老IE深惡痛疾，你是否對H5和CSS3新標簽或者新屬性望而卻步？

但是我想告訴你的是在保證低版本功能無誤，樣式差的不是太遠的情況下，大膽使用新標簽、新屬性吧，畢竟技術總會去淘汰不適應歷史發展的東西！

首先說下，為什么要使用H5結構化標簽：

1.頁面結構更加清晰，更加語義化。

2.良好的SEO。

3.可讀性好，后期維護更加容易。

4.提供特殊終端閱讀，為社會特殊群體提供閱讀體驗（譬如盲人）。

下面做了一個簡單的H5頁面的布局圖：

讓我們先看下html代碼：

廢話少說，讓我們開始依據上面的例子，看看這些新結構化標簽：

①section

內容區塊，應用的典型場景有文章的章節、標簽對話框中的標簽頁、或者論文中有編號的部分、分區，簡介、文章條目和聯系信息等。

<section>section1</section>

以下幾種情況不建議使用：

■ section不是一般意義的容器元素，對于設置頁面樣式或者js操作容器，不推薦使用，建議使用div。

■ 強調獨立區塊時，最好使用article。

■ 在文章內頁，最好用article。?

■ 對于沒有標題的內容，不推薦使用。?

②article

article表示頁面中的一塊與上下文不相關的內容，獨立的、完整的區塊；article是大主體，section是構成這個大主體的一部分；可以互相嵌套。

<article>article1</article>

VS section

■ 強調獨立區域塊，最好的區分方法就是假設該區塊拿掉，是否對頁面其他區域有影響。

■ 在article配合aside使用時，不建議使用section。

③aside

可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告等使用；在article之外，則可做側邊欄，沒有article與之對應，最好不用。

<aside id="aside">i am aside</aside>

④header

通常放置在整個頁面或者頁面內的一個內容區塊的標題。

<header?id="header">i am header</header>

⑤footer

可以作為文檔的尾部，也可以做某一部分的尾部。

<footer?id="footer">footer</footer>

⑥nav

主要用于導航條、業內導航、翻頁等，可以在頭部尾部，頁面中間。

⑦main

表示頁面的主要顯示內容，頁面有且只有一個，不應該被任何其他結構標簽包含，不能是以下元素的后代: section/nav/footer/header/aside/article等。

<main>main</main>

雖然這個標簽很好，但是重點強調：IE不支持！IE不支持！IE不支持！

H5結構化布局的標簽基本講述完畢，其他H5常用標簽，請繼續關注我的下一篇文！