HTML5語義化

什麼是HTML語義化？

語義化(semantic)就是你看到某個標籤就知道它是幹什麼的。語義化讓「顯示」與「語義」分離，HTML代碼負責頁面幹什麼，而顯示效果則由CSS完成。讓正確的標籤作正確的事情。

好比：當咱們看到下面的<h1>標籤時，就知道它的功能就是在頁面中顯示一個頂級標題。

<h1>this is a top level heading</h1> 

爲何要語義化？

在HTML5出來以前，咱們習慣用<div>表示頁面章節，可是<div>沒有任何語義，也就是說他要乾的事情全憑開發者說了算。頁面的導航欄是<div>,頁面的邊欄也是<div>,惟一的區別就是他們的id。這樣不方便開發者閱讀代碼，也不利於瀏覽器和搜索引擎的解析。HTML5的核心理念就是「語義」與「顯示」分離，那些沒有「意義」的標籤已經被放棄，如：font。總的來講，語義化有如下做用：

• 易於用戶閱讀：在沒有CSS的狀況下，頁面也能呈現很好地內容結構、代碼結構。
• 提升用戶體驗：例如title、alt用於解釋名詞或者解釋圖片信息。
• 有利於SEO:搜索引擎爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重。
• 方便其餘設備解析：如盲人閱讀器根據語義渲染網頁。
• 有利於開發和維護：語義化更具可讀性。代碼更好維護，與CSS3關係更和諧。

理解幾個標籤

以下圖所示，HTML引入<header>、<nav>、<article>、<section> 、<aside>、

這些語義化標籤以後，咱們在構建頁面佈局時，徹底能夠不用<div>。

 

HTML5 <header> Element

• header 元素表明「網頁」或「section」的頁眉。

• 一般包含h1-h6元素或hgroup，做爲整個頁面或者一個內容塊的標題。也能夠包裹一節的目錄部分，一個搜索框，一個nav，或者任何相關logo。

• 整個頁面沒有限制header元素的個數，能夠擁有多個，能夠爲每一個內容塊增長一個header元素

  header樣例：

<header> <hgroup> <h1>網站標題</h1> <h1>網站副標題</h1> </hgroup> </header> 

HTML5 <footer> Element

• footer與header對應，元素表明頁腳，一般含有：做者，相關文檔連接，版權信息等。

footer樣例：

<footer> COPYRIGHT @ plusye </footer> 

HTML5 <nav> Element

• nav用在導航上,nav一般結合<ul>使用作成導航欄。

nav樣例：

<nav> <ul> <li>HTML 5</li> <li>CSS3</li> <li>JavaScript</li> </ul> </nav> 

HTML5 <aside> Element

1.aside在article內表示主要內容的附屬信息;
2.在article以外則可作側邊欄，沒有article與之對應，最好不用
3.若是是廣告，其餘日誌連接或者其餘分類導航也能夠用

HTML5 <section> Element

1.section元素表明文檔中的「節」或「段」，「段」能夠是指一篇文章裏按照主題的分段；「節」能夠是指一個頁面裏的分組。
2.section一般還帶標題，雖然html5中section會自動給標題h1-h6降級，可是最好手動給他們降級

HTML5 <article> Element

1.article元素最容易跟section和div容易混淆，其實article表明一個在文檔，頁面或者網站中自成一體的內容，其目的是爲了讓開發者獨立開發或重用。譬如論壇的帖子，博客上的文章，一篇用戶的評論，一個互動的widget小工具。（特殊的section）