HTML5學習筆記（三）：語義化和新增結構元素

標籤：頭部   表示   time   元素   例子   年月日   部分   header   資訊   

在HTML5之前，使用機器來閱讀一個網頁是非常困難的，我們使用不同樣式的div來標記不同的內容，所以實際上機器無法得知頁面的哪個部分是本文，哪個部分是標題，那麼在HTML5裡，針對這個問題就引入了語義化的概念，同時提供了新的標籤來指定對應的內容類型。

語義化的好處

• 語義化的html只用來搭建網頁的結構，去掉css後，網頁結構不會變；
• 螢幕助讀程式（如果訪客有視障）會完全根據你的標記來“讀”你的網頁；
• 搜尋引擎的爬蟲也依賴於標記來確定上下文和各個關鍵字的權重；
• 你的頁面是否對爬蟲容易理解非常重要，因為爬蟲很大程度上會忽略用於表現的標記，而只注重語義標記；

和div的關係

div本身就是沒有任何額外意義的，作為一個純粹的容器用來進行css的樣式定義的，他只是一個標籤，僅僅是用來構建外觀和結構。因此是最適合做容器的標籤。所以不能因為有了HTML5的新標籤就棄用了div，每個事物都有它的專屬作用的。div就是只是想用來把元素組合或者給它們加樣式時使用。

新增結構元素header元素

header 元素代表“網頁”或“section”的頁首。

通常包含h1-h6元素或hgroup，作為整個頁面或者一個內容塊的標題。也可以包裹一節的目錄部分，一個搜尋方塊，一個nav，或者任何相關logo。

整個頁面沒有限制header元素的個數，可以擁有多個，可以為每個內容塊增加一個header元素：

1 <header>2     <hgroup>3         <h1>網站標題</h1>4         <h1>網站副標題</h1>5     </hgroup>6 </header>

header使用注意：

• 可以是“網頁”或任意“section”的頭部部分；
• 沒有個數限制。
• 如果hgroup或h1-h6自己就能工作的很好，那就不要用header。

footer元素

footer元素代表“網頁”或“section”的頁尾，通常含有該節的一些基本資料，譬如：作者，相關文檔連結，著作權資料。如果footer元素包含了整個節，那麼它們就代表附錄，索引，提拔，許可協議，標籤，類別等一些其他類似資訊。

1 <footer>2     [email protected]小C3 </footer>

footer使用注意：

• 可以是“網頁”或任意“section”的底部部分；
• 沒有個數限制，除了包裹的內容不一樣，其他跟header類似。

hgroup元素

hgroup元素代表“網頁”或“section”的標題，當元素有多個層級時，該元素可以將h1到h6元素放在其內，譬如文章的主標題和副標題的組合

1 <hgroup>2     <h1>這是一篇介紹HTML 5語義化標籤和更簡潔的結構</h1>3     <h2>HTML 5</h2>4 </hgroup>

hgroup使用注意：

• 如果只需要一個h1-h6標籤就不用hgroup
• 如果有連續多個h1-h6標籤就用hgroup
• 如果有連續多個標題和其他文章資料，h1-h6標籤就用hgroup包住，和其他文章中繼資料一起放入header標籤

nav元素

nav元素代表頁面的導航連結地區。用於定義頁面的主要導航部分。

1 <nav>2     <ul>3         <li>HTML 5</li>4         <li>CSS3</li>5         <li>JavaScript</li>6     </ul>7 </nav>

但是我在有些時候卻情不自禁的想用它，譬如：側邊欄上目錄，麵包屑導航，搜尋樣式，或者下一篇上一篇文章，但是事實上規範上說nav只能用在頁面主要導航部分上。頁尾地區中的連結清單，雖然指向不同網站的不同地區，譬如服務條款，著作權頁等，這些footer元素就能夠用了。

nav使用注意：

• 用在整個頁面主要導航部分上，不合適就不要用nav元素；

aside元素

aside元素被包含在article元素中作為主要內容的附屬資訊部分，其中的內容可以是與當前文章有關的相關資料、標籤、名次解釋等。（特殊的section）

在article元素之外使用作為頁面或網站全域的附屬資訊部分。最典型的是側邊欄，其中的內容可以是日誌串聯，其他組的導航，甚至廣告，這些內容相關的頁面。

1 <article>2     <p>內容</p>3     <aside>4         <h1>作者簡介</h1>5         <p>小北，前端一枚</p>6     </aside>7 </article>

aside使用總結：

• aside在article內表示主要內容的附屬資訊，
• 在article之外則可做側邊欄，沒有article與之對應，最好不用。
• 如果是廣告，其他日誌連結或者其他分類導航也可以用

section元素

section元素代表文檔中的“節”或“段”，“段”可以是指一篇文章裡按照主題的分段；“節”可以是指一個頁面裡的分組。

section通常還帶標題，雖然html5中section會自動給標題h1-h6降級，但是最好手動給他們降級。如下：

 1 <section> 2     <h1>section是啥？</h1> 3     <article> 4         <h2>關於section</h1> 5         <p>section的介紹</p> 6         <section> 7             <h3>關於其他</h3> 8             <p>關於其他section的介紹</p> 9         </section>10     </article>11 </section>

section使用注意：

• 一張頁面可以用section劃分為簡介、文章條目和聯絡資訊。不過在文章內頁，最好用article。section不是一般意義上的容器元素，如果想作為樣式展示和指令碼的便利，可以用div。
• 表示文檔中的節或者段；
• article、nav、aside可以理解為特殊的section，所以如果可以用article、nav、aside就不要用section，沒實際意義的就用div

article元素

article元素最容易跟section和div容易混淆，其實article代表一個在文檔，頁面或者網站中自成一體的內容，其目的是為了讓開發人員獨立開發或重用。譬如論壇的文章，部落格上的文章，一篇使用者的評論，一個互動的widget小工具。（特殊的section）

除了它的內容，article會有一個標題（通常會在header裡），會有一個footer頁尾。我們舉幾個例子介紹一下article，好更好區分article、section、div：

1 <article>2     <h1>一篇文章</h1>3     <p>文章內容..</p>4     <footer>5         <p><small>著作權：html5jscss網所屬，小北</small></p>6     </footer>7 </article>

article使用注意：

• 自身獨立的情況下：用article
• 是相關內容：用section
• 沒有語義的：用div

address元素

作為聯絡資訊出現，郵編地址、郵件地址等等,一般出現在footer。

time元素

用來標記一篇文章的發布時間。

<time datetime="2012-02-15" pubdate>2012年02月15日</time>

一般有三個組成部分

• 機器可識別的時間戳記：格式必須是年月日的數字以減號相隔，如果增加時間，那就在日期後面加字母T然後跟24小時格式的時間值以及時區位移量，形如datetime="2012-2-15T22:49:40+08:00"
• 人可識別的常值內容：格式隨意，只要能看懂。
• 一個可選的pubdata標記：pubdata是個布爾值，如果需要，寫上屬性名稱就好pubdata。但是為了美觀，我們也可以寫成pubdata=""

我們還要注意的是，如果該time位於一個article中，那麼它表示這篇文章的發布時間；如果不在article之中表示整個文檔的發布時間。

1 <article>2     <header>3         <h1>html5jscss網<time datetime="2012-02-14">2月14日</time>成立</h1>4         <p>發布 <time datetime="2012-02-15" pubdate>2012年02月15日</time> 分類：前端交流</p>5     </header>6     <p>你好世界！</p>7 </article>

 

HTML5學習筆記（三）：語義化和新增結構元素