HTML5新增的結構元素 詳解
阿新 • • 發佈：2018-08-27
ade 我們 分享圖片 web頁面 .com section 還要 cti img
H5添加了那些新的結構元素
| 標簽 | 說明 |
| header | 頁面或頁面中某一個區塊的頁眉，通常是一些引導和導航信息。 |
| nav | 可以作為頁面導航的鏈接組 |
| section | 頁面中的一個內容區塊，通常由內容及其標題組成 Web頁面中的一塊獨立區域 |
| article | 代表一個獨立的、完整的相關內容塊，可獨立於頁面其它內容使用 |
| aside | 非正文的內容，與頁面的主要內容是分開的，被刪除而不會影響到網頁的內容 |
| footer | 頁面或頁面中某一個區塊的腳 |
看完以上的標簽我們發現 這些標簽本身並沒有其特殊的功能 其實萬能的DIV就可以完成這些事情 為什麽還要在H5中添加這些標簽那？
這裏要提到 語義化標簽 這個概念,回想一下,我們通常用的div來完成的網頁結構,一般我們都會用 id class來標識
這些元素的用途,但是從機器搜索引擎的角度出發,它並不認識這些div元素具體是用來做什麽的,因為它看不懂這些id class的意義,所以 為了能夠讓機器理解這些元素的意義,我們就會用這些語義化標簽來代替之前的div布局方式 這樣的網頁結構對於搜索引擎更加友好,使得網頁內容能夠更好的被搜索引擎抓取。
我們用一個比較暴走漫畫的網站來更直觀的說明這些標簽的作用
在沒有語義化標簽之前的做法是
在有了語義化標簽後的做法是
HTML5新增的結構元素 詳解