HTML5新增的結構元素 詳解

標籤：alt   html5   100%   idt   htm   footer   com   標籤   ble   

H5添加了那些新的結構元素

標籤	說明
header	頁面或頁面中某一個區塊的頁首，通常是一些引導和導航資訊。
nav	可以作為頁面導航的連結組
section	頁面中的一個內容區塊，通常由內容及其標題組成  Web頁面中的一塊獨立地區
article	代表一個獨立的、完整的相關內容塊，可獨立於頁面其它內容使用
aside	非本文的內容，與頁面的主要內容是分開的，被刪除而不會影響到網頁的內容
footer	頁面或頁面中某一個區塊的腳

 

 

 

 

 

 

 

 

 

 

看完以上的標籤我們發現 這些標籤本身並沒有其特殊的功能 其實萬能的DIV就可以完成這些事情 為什麼還要在H5中添加這些標籤那？

這裡要提到 語義化標籤 這個概念,回想一下,我們通常用的div來完成的網頁結構,一般我們都會用 id class來標識

這些元素的用途,但是從機器搜尋引擎的角度出發,它並不認識這些div元素具體是用來做什麼的,因為它看不懂這些id class的意義,所以 為了能夠讓機器理解這些元素的意義,我們就會用這些語義化標籤來代替之前的div布局方式 這樣的網頁結構對於搜尋引擎更加友好,使得網頁內容能夠更好的被搜尋引擎抓取。

我們用一個比較暴走漫畫的網站來更直觀的說明這些標籤的作用

在沒有語義化標籤之前的做法是

 在有了語義化標籤後的做法是

HTML5新增的結構元素 詳解