html5被忽略的語義化標籤

在html5沒出來以前，一直用html的div+css進行佈局，通篇div+span，確實不優雅。html5新增了不少語義化的標籤，幫助咱們寫出更優雅的html結構。

1.<article>能夠是頁面任何獨立的內容區域，好比文章/博客/新聞/故事/論壇帖子/評論等等任何獨立的內容。

<article>
    <header>
        <h1>文章標題</h1>
        <p>發佈時間：<time pubdate='2019-05-06'>2019-05-06</time></p>
        <p>做者：xxx</p>
    </header>
    <p>文章內容.........</p>
    <p>文章內容.........</p>
</article>

2.<section>定義文檔中的節、區段，好比章節、頁眉或文章中的其餘部分。好比咱們對一篇文章進行分章節。

<article>
    <header>
        <h1>文章標題</h1>
        <p>發佈時間：<time pubdate='2019-05-06'>2019-05-06</time></p>
        <p>做者：xxx</p>
    </header>
    <section>
        <h2>章節一的標題</h2>
        <p>文章內容.........</p>
    </section>
    <section>
        <h2>章節二的標題</h2>
        <p>文章內容.........</p>
    </section>
</article>

<section>應包含一組內容及其標題。若是內容沒有標題，不推薦使用<section>。

3.<nav>定義頁面的導航區域。

<nav>
    <a href='/a'>頁面a</a>
    <a href='/b'>頁面b</a>
    <a href='/c'>頁面c</a>
</nav>

4.<aside>定義頁面主區域內容以外的內容（好比側邊欄）
5.<header>描述文檔頭部區域，用於定義內容的介紹展現，能夠使用多個<header>。
6.<footer>描述文檔底部區域，一般包含文檔做者，著做權，使用條款，聯繫信息等，能夠使用多個<footer>

文檔的大體結構能夠分爲

下面是更細緻的語義化標籤，也是更容易被忽略的標籤。

7.<figure>和<figcaption>
<figure>定義獨立的流內容（圖像、圖表、照片、代碼等等）。
<figcaption>定義<figure>的標題，一般置於figure元素的第一個或最後一個子元素

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>