HTML5新增的結構元素 詳解


這篇文章我們不老生常談的講基礎的HTML 就講講H5中新添加的一些知識

¶首先廢話不多說 先來看看H5添加了那些新的結構元素

標簽 說明
header 頁面或頁面中某一個區塊的頁眉,通常是一些引導和導航信息。
nav 可以作為頁面導航的鏈接組
section 頁面中的一個內容區塊,通常由內容及其標題組成
article 代表一個獨立的、完整的相關內容塊,可獨立於頁面其它內容使用
aside 非正文的內容,與頁面的主要內容是分開的,被刪除而不會影響到網頁的內容
footer 頁面或頁面中某一個區塊的腳

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

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

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

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

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

 在有了語義化標簽后的做法是


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM