web前端小白,必學HTML5語義化,原來還有這種技巧?

距HTML5標準規範制定完成並公開發布已經有好些年了,面試時也少不了要問對HTML5語義化得理解。但是在實際運用時,真正使用HTML5標籤來開發的似乎不是很多(ps:查看了幾個巨頭公司網站推論),可能一部分原因是仍有部分用戶使用在使用低版本瀏覽器。

但是就我個人而言,因選取一些標籤時會比較糾結,所以仍使用了div。(PS:正是因為這樣,才有了這篇文章的,沒錯,以後要注意語義化了)

什麼是語義化?就是用合理、正確的標籤來展示內容,比如h1~h6定義標題。

語義化優點:

易於用戶閱讀,樣式丟失的時候能讓頁面呈現清晰的結構。

有利於SEO,搜索引擎根據標籤來確定上下文和各個關鍵字的權重。

方便其他設備解析,如盲人閱讀器根據語義渲染網頁

有利於開發和維護,語義化更具可讀性,代碼更好維護,與CSS3關係更和諧。

今天先介紹主體結構標籤,如圖所示:

web前端小白,必學HTML5語義化,原來還有這種技巧?

1、

定義文檔或者文檔的部分區域的頁眉,應作為介紹內容或者導航鏈接欄的容器。

在一個文檔中,您可以定義多個

元素,但需要注意的是
元素不能作為
元素的子元素。

web前端小白,必學HTML5語義化,原來還有這種技巧?

2、

在一個文檔中,可定義多個

3、

定義文檔的主要內容,該內容在文檔中應當是獨一無二的,不包含任何在文檔中重複的內容,比如側邊欄,導航欄鏈接,版權信息,網站logo,搜索框(除非搜索框作為文檔的主要功能)。

需要注意的是在一個文檔中不能出現多個

標籤。

web前端小白,必學HTML5語義化,原來還有這種技巧?

4、

元素表示文檔、頁面、應用或網站中的獨立結構,是可獨立分配的、可複用的結構,如在發佈中,它可能是論壇帖子、雜誌或新聞文章、博客、用戶提交的評論、交互式組件,或者其他獨立的內容項目。

元素嵌套使用時,則該元素代表與外層元素有關的文章。例如,代表博客評論的
元素可嵌套在代表博客文章的
元素中。

5、

6、

定義最近一個章節內容或者根節點元素的頁腳。一個頁腳通常包含該章節作者、版權數據或者與文檔相關的鏈接等信息。

使用footer插入聯繫信息時,應在 footer 元素內使用

元素。

注意不能包含

或者

7、

表示文檔中的一個區域(或節),比如,內容中的一個專題組。

如果元素內容可以分為幾個部分的話,應該使用

而不是

不要把

元素作為一個普通的容器來使用,特別是當
僅僅是為了美化樣式或方便腳本使用的時候,應使用

好了,今天的內容就分享到這裡,如果你有什麼疑問可以在下方評論哦~

今天的內容就分享到這裡,也希望本次分享對你有所幫助和有所提升!

如果你想學習更多的前端知識以及最新的源碼,你可以關注我,私信,回覆學習資料即可獲取一份web前端精品學習資料


分享到:


相關文章: