HTML5之語義標籤介紹

2022-09-21 10:42:12 字數 1153 閱讀 3197

在html5標準中,新加了幾個用於增添頁面語義的標籤,這些標籤有:article、section、n**和aside等。與別的大多數標籤不 同,瀏覽器在解釋渲染這些標籤的時候僅僅把它作為普通的div塊級元素來處理,不會新增任何額外的展現邏輯;也即,這些標籤僅用於增添語義。對於web開 發人員而言,使用這些標籤的實際意義主要有2點:搜尋引擎優化,以及增加頁面的可用性(accessibility)。

在元素分類上,article、section、n**和aside稱之為「sectioning content」

article

article元素可用於表示頁面上某塊具有一定獨立性的內容,這個內容可以是一篇文章、論壇上的乙個帖子/評論、一篇部落格、乙個可互動的控制項 等。article標籤可以巢狀使用,當這麼做時,子article元素與父article元素在邏輯上必須有相應的關聯。如web開發者可以將一篇部落格toxqtalxx 的正文以及評論作為父級article元素,而將其中的各個評論作為子article元素。

article元素內部不能出現main元素 — main元素意指頁面的主要內容,當有main元素時,article元素作為main元素的子元素而存在。

section

section元素意指頁面或web應用中的一部分,不同的section互相之間其「主題」或者說「基調」應當有所不同,一般toxqtalxx會通過在section元素內放置heading元素(h1-h6)來定義這個「主題」/「基調」。

把section當成div使用是一種錯誤 — 除了頁面可展現的內容,section的子元素不應該承擔任何其它角toxqtalxx色(樣式、行為、輔助標籤等)。

n**n**元素主要用於包含頁面上的導航鏈結,因此在n**元素中直接包含ul元素或者ol元素是一種非常常見的做法。儘管如此,n**中也可以不包含ul或者ol元素,比如在n**元素中可以包含乙個文章段落(p標籤),而在該文章段落中包含一些鏈結(a標籤)。

與article元素一樣,n**元素內部不能出現main元素。

aside

aside元素一般用於表示頁面上的側邊欄,不過該元素僅僅只在語義上表示「側邊欄」,瀏覽器在解析渲染程式設計客棧該標籤時只會將其作為普通的div塊級元素來處理。如果要真正得到側邊欄的效果,則web開發人員需要自己編寫css來實現。

原文位址:

本文標題: html5之語義標籤介紹

本文位址:

html5語義化標籤

1.文章標題 文章內容.文章內容.2.定義文件中的節 區段,比如章節 頁首或文章中的其他部分。比如我們對一篇文章進行分章節。文章標題 章節一的標題 文章內容.章節二的標題 文章內容.應包含一組內容及其標題。如果內容沒有標題,不推薦使用。3.定義頁面的導航區域。頁面a頁面b 頁面c4.定義頁面主區域內...

HTML5語義化標籤

語義化標籤 h5的語義化標籤 css的方式進行布局 標籤有自己的含義,瀏覽器或者程式設計師一看就知 瀏覽器支援情況 ie9 firefox chrome safari oprea 針對ie9以下相容性問題 1 在 該標籤的css樣式中設定 display block 通過dom的方式建立這個標籤 d...

html5新增的語義化標籤

html5新增的語義化標籤 標籤定義外部的內容。標籤定義 article 以外的內容。aside 的內容應該與 article 的內容相關。標籤用於描述文件或文件某個部分的細節。標籤定義 figure 元素的標題。標籤用於對元素進行組合。標籤定義文件的頁首 介紹資訊 標籤用於對網頁或區段 secti...