在HTML5出現以前，HTML的文檔結構不夠清晰、明確。我們會發現整個頁面的頭部、主體、頁腳、導航，還有邊欄皆是使用DIV元素來構成。
我在學習前端的過程中也經常能看到諸如《DIV+Css》教程之類的書籍，但是<div>並不是一個很能表示文檔結構的標籤，特別對於搜索引擎和屏幕閱讀器來說過多的使用<div>元素，那麼這些程序就連“從哪裏到哪裏是正文”“這個<ul>元素是表示導航菜單，還是表示項目列表”等對於結構分析來說最基本的答案也都不知道。
首先簡單看下HTML5的文檔結構示意圖：
在HTML5中增加了很多跟結構相關的元素，隨着現代瀏覽器的發展H5的標籤基本已經可以放心的使用，so 讓我們來講講這幾個標籤的用法吧！let's go
-
article元素
article元素代表文檔，頁面或應用程序中獨立的、完整的、可以獨自被外部應用的內容。
- 論壇帖子
- 報紙文章
- 博客條目
- 用戶評論
除了內容部分，一個article元素通常還有自己的標題，或者腳註。
<article>
<header>
<h1>蘋果</h1>
<p>發表日期：
<time pubdate datetime="2020/05/09">2020/05/09</time>
</p>
</header>
<p><b>蘋果</b>，植物類水果，多次花果...</p>
<section>
<h2>評論</h2>
<p>我喜歡蘋果...</p>
</section>
</article>
-
section元素
section元素用來對網站或應用程序中頁面上的內容進行分塊，一個section通常由內容及其標題組成。
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
-
nav元素
nav元素是一個可以用來作爲頁面導航的鏈接組，值得一提的是一個頁面可以擁有多個nav元素，作爲頁面整體或不同部分的導航。
<body>
<h1>技術質料</h1>
<nav>
<li><a href="#">主頁</a></li>
<li><a href="#">開發文檔</a></li>
..moer..
</nav>
<article>
<header>
<h1>html5與Css3</h1>
<nav>
<ul>
<li><a href="#">html5</a></li>
<li><a href="#">Css3</a></li>
..more.
</ul>
</nav>
</header>
</article>
</body>
-
aside元素
aside元素用來表示當前頁面或文章的附屬信息部分，它可以包含與當前頁面或主要內容相關的引用。
- 側邊欄
- 廣告
- 導航條
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
-
header元素
header元素用於展示介紹性內容，通常包含一組介紹性的或是輔助導航的實用元素。它可能包含一些標題元素，但也可能包含其他元素，比如 Logo、搜索框、作者名稱，等等。
<header class="page-header">
<h1>Cute Puppies Express!</h1>
</header>
<main>
<p>I love beagles <em>so</em> much! Like, really, a lot. They’re adorable and their ears are so, so snuggly soft!</p>
</main>
-
footer元素
footer元素可以作爲其上層父級內容區塊或者一個根區塊的腳註。
- 腳註信息
- 作者
- 相關鏈接
- 版權信息
爲什麼說其上層父級內容區塊，因爲footer元素在頁面中也不是唯一的
<article>
<header>
<h1>html5與Css3</h1>
<nav>
<ul>
<li><a href="#">html5</a></li>
<li><a href="#">Css3</a></li>
..more.
</ul>
</nav>
</header>
..more..
<footer>
<p>
<a href="#">編輯</a>
<a href="#">刪除</a>
<a href="#">重命名</a>
</p>
</footer>
</article>
<footer>
<p><small>版權所有</small></p>
</footer>
-
main元素
mian元素呈現了文檔的 <body> 或應用的主體部分。主體部分由與文檔直接相關，或者擴展於文檔的中心主題、應用的主要功能部分的內容組成。
<header>Gecko facts</header>
<main role="main">
<p>Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Australia.</p>
<p>Many species of gecko have adhesive toe pads which enable them to climb walls and even windows.</p>
</main>
ok以上就是HTML5中常用到的結構標籤啦！
從只會使用層面，到了解標籤語義和用法，知其然知其所以然。
參考文獻與摘要
- MDN web docs
- 菜鳥教程
- html5與css3權威指南