第85天：HTML5語義化标簽

一、語義标簽

語義标簽對于我們并不陌生，如<p>表示一個段落、<ul>表示一個無序清單<h1> ~ <h6>表示一系列标題等，在此基礎上HTML5增加了大量更有意義的語義标簽，更有利于搜尋引擎或輔助裝置了解HTML頁面内容。

傳統的做法我們或許通過增加類名如class="header"、class="footer"，使HTML頁面具有語義性，但是不具有通用性。

HTML5則是通過新增語義标簽的形式來解決這個問題，例如<header></header>、<footer></footer>等，這樣就可以使其具有通用性。

此學習目的為了解增加語義标簽的目的，以及各語義标簽所表達的意義，在網頁布局中能夠合理使用标簽。

傳統網頁布局：

    <!-- 頭部 -->

<div class="header">

    <ul class="nav"></ul>

</div>

      <!-- 主體部分 -->

      <div class="main">

         <!-- 文章 -->

      <div class="article"></div>

      <!-- 側邊欄 -->

      <div class="aside"></div>

      </div>

       <!-- 底部 -->

      <div class="footer"></div>

H5 經典網頁布局:

<!-- 頭部 -->

     <header>

       <ul class="nav"></ul>

   </header>

<!-- 主體部分 -->

<div class="main">

   <!-- 文章 -->

   <article></article>

   <!-- 側邊欄 -->

   <aside></aside>

</div>

<!-- 底部 -->

<footer></footer>

二、常用新語義标簽

<nav> 表示導航

<header> 表示頁眉

<footer> 表示頁腳

<section> 表示區塊

<article> 表示文章 如文章、評論、文章、部落格

<aside> 表示側邊欄 如文章的側欄

<figure> 表示媒介内容分組 與 ul > li 做個比較

<mark> 表示标記 (帶用“UI”，不怎麼用)

<progress> 表示進度 (帶用“UI”，不怎麼用)

<time> 表示日期

本質上新語義标簽與<div>、<span>沒有差別，隻是其具有表意性，使用時除了在HTML結構上需要注意外，其它和普通标簽的使用無任何差别，可以了解成<div class="nav"> 相當于 <nav>。不要好奇，它隻是一個标簽！

盡量避免全局使用header、footer、aside等語義标簽。