在HTML5之前，我們都是通過(guò)div加上屬性來(lái)區(qū)分導(dǎo)航、內(nèi)容以及頁(yè)腳等，比如<div??class="nav"></div>表示導(dǎo)航、<div class="container"></div>表示內(nèi)容區(qū)域、<div class="footer"></div>表示頁(yè)腳。

上面這種方式雖然可以用來(lái)區(qū)分一個(gè)網(wǎng)頁(yè)的各個(gè)部分，但是有一個(gè)缺點(diǎn)：網(wǎng)頁(yè)的各個(gè)區(qū)域都用div標(biāo)簽來(lái)表示，太單調(diào)了！試想一下，如果要你做一個(gè)非常復(fù)雜的網(wǎng)頁(yè)，而且你把網(wǎng)頁(yè)的所有部分都用div來(lái)表示，那將會(huì)導(dǎo)致整個(gè)網(wǎng)頁(yè)的HTML代碼全部都是div標(biāo)簽?？赡苣惝?dāng)時(shí)寫出來(lái)并且按照你預(yù)料的結(jié)果顯示出來(lái)了，但是如果你以后要添加一些新內(nèi)容進(jìn)去，你就會(huì)發(fā)現(xiàn)問(wèn)題了。當(dāng)你回去再看這些代碼的時(shí)候，絕對(duì)會(huì)頭暈眼花，因?yàn)槟憧吹降氖且淮蠖裠iv標(biāo)簽，你可能要找半天才能找到你要添加新內(nèi)容的地方，再說(shuō)過(guò)了這么久你也不可能還記得清清楚楚。用一句專業(yè)的話來(lái)說(shuō)就是語(yǔ)義不清晰，會(huì)給后期維護(hù)帶來(lái)很大的麻煩。

為了避免以后再這種情況，你應(yīng)該使用HTML5提供的新語(yǔ)義元素來(lái)劃分整個(gè)網(wǎng)頁(yè)的區(qū)域。HTML5 提供了定義頁(yè)面不同部分的新語(yǔ)義元素有：

1. <article>

2. <aside>

3. <details>

4.??<figcaption>

5. <figure>

6. <footer>

7.?<header>

8.??<main>

9.??<mark>

10.??<nav>

11.??<section>

12.??<summary>

13.??<time>

關(guān)于這些新語(yǔ)義元素的簡(jiǎn)單用法可以參考W3school教程中的HTML5 語(yǔ)義元素，我覺得多實(shí)踐才會(huì)理解得更深刻，所以多敲敲代碼吧！