什麼是HTML語意化標籤？常見HTML語意化標籤大全

一、什麼是HTML語意化標籤

語意化的標籤，旨在讓標籤有自己的意義。

<p>一行文字</p><span>一行文字</span>

如上程式碼，p 標籤與 span 標籤都區別之一就是，p 標籤的意思是：段落。而 span 標籤責沒有獨特的意思。

二、語意化標籤的優點

1. 程式碼結構清晰，方便閱讀，有利於團隊合作開發。

2. 方便其他裝置解析（如螢幕閱讀器、盲人閱讀器、行動裝置）以語意的方式渲染網頁。

3. 有利於搜尋引擎最佳化（SEO）。

三、常見的語意化標籤

因此我們在寫頁面結構時，應盡量使用有語意的HTML 標籤

• b2386ffb911b14667cb8f0f91ea547a7：頁面主體內容。

• b35601808ee30eac9a0f11ecc3d2c015：h1~h6，分級標題，4a249f0d628e2318394fd9b75b4636b1 與 b2386ffb911b14667cb8f0f91ea547a7 協調有利於搜尋引擎最佳化。

• ff6d136ddc5fdfeffaf53ff6ee95f185：無序列表。

• 25edfb22a4f469ecb59f1190150159c6：有序列表。

• 1aa9e5d373740b65a0cc8f0a02150c53：頁眉通常包括網站標誌、主導航、全站連結以及搜尋框。

• c787b9a589a3ece771e842a6176cf8e9：標記導航，僅對文件中重要的連結群使用。

• 61b85035edf2b42260fdb5632dc5728a：頁面主要內容，一個頁面只能使用一次。如果是web應用，則包圍其主要功能。

• 23c3de37f2f9ebcb477c4a90aac6fffd：定義外部的內容，其中的內容獨立於文件的其餘部分。

• 2f8332c8dcfd5c7dec030a070bf652c3：定義文件中的節（section、區段）。例如章節、頁首、頁尾或文件中的其他部分。

• 15221ee8cba27fc1d7a26c47a001eb9b：定義其所處內容以外的內容。如側欄、文章的一組連結、廣告、友情連結、相關產品清單等。

• c37f8231a37e88427e62669260f0074d：頁腳，只有當父級是body時，才是整個頁面的頁腳。

• d015d241ae6d34c34210679b5204fe85：呈現小號字體效果，指定細則，輸入免責聲明、註解、署名、版權。

• 8e99a69fbe029cd4e2b854e244eab143：和 em 標籤一樣，用於強調文本，但它強調的程度更強一些。

• 907fae80ddef53131f3292ee4f81644b：將其中的文字表示為強調的內容，表現為斜體。

• f920514e6447cf1d171079d1371f007f：使用黃色突出顯示部分文字。

• 24203f2f45e6606542ba09fd2181843a：規定獨立的串流內容（影像、圖表、照片、程式碼等等）（預設有40px左右margin）。

• 614eb9dc63b3fb809437a716aa228d24：定義 figure 元素的標題，應該被置於 figure 元素的第一個或最後一個子元素的位置。

• f3a85e1241a187c5ac462d886e9a968b：表示所包含的文字對某個參考文獻的引用，例如書籍或雜誌的標題。

• fa57c8becaf0b8746ebae103568d6733：定義區塊引用，區塊引用擁有它們自己的空間。

• 1244aa79a84dea840d8e55c52dc97869：短的引述（跨瀏覽器問題，盡量避免使用）。

• 46dd80ba616c57a652514755c74c4211：datetime屬性遵循特定格式，如果忽略此屬性，文字內容必須是合法的日期或時間格式。

• 8a7974376be5f6c00c121222b727adb9：簡稱或縮寫。

• 7f9d788ef50b059a7f76f3d2e4ccc9d1：定義術語元素，與定義必須緊鄰，可以在描述列表dl元素中使用。

• 208700f394e4cf40a7aa505373e0130b：作者、相關人士或組織的聯絡資訊（電子郵件地址、指向聯絡資訊頁的連結）。

• 823db3943044a0a9a620ada8d4b1d965：移除的內容。

• 426be984ffbbb815d7d88e3543a85d91：新增的內容。

• ffbe95d20f3893062224282accb13e8f：標記代碼。

• 49c6123c49c6be380cb91db06cd3bfa9：定義已知範圍或分數值內的標量測量。 （Internet Explorer 不支援 meter 標籤）

• 6ecb87e5318a36c03c59e25d55f43372：定義運作中的進度（進程）。

更多相關教學請上 Html5影片教學