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

一、什麼是HTML語意化標籤

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

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

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

二、語意化標籤的優點

<li>

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

<li>

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

<li>

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

三、常見的語意化標籤

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

<li>

<code><title></title>：頁面主體內容。

<li>

<code><hn></hn>：h1~h6，分級標題，<code><h1></h1> 與 <code><title></title> 協調有利於搜尋引擎最佳化。

<li>

<code><ul></ul>：無序列表。

<li>

<code><li>：有序列表。

<li>

<code><header></header>：頁眉通常包括網站標誌、主導航、全站連結以及搜尋框。

<li>

<code><nav></nav>：標記導航，僅對文件中重要的連結群使用。

<li>

<code><main></main>：頁面主要內容，一個頁面只能使用一次。如果是web應用，則包圍其主要功能。

<li>

<code><article></article>：定義外部的內容，其中的內容獨立於文件的其餘部分。

<li>

<code><section></section>：定義文件中的節（section、區段）。例如章節、頁首、頁尾或文件中的其他部分。

<li>

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

<li>

<code><footer></footer>：頁腳，只有當父級是body時，才是整個頁面的頁腳。

<li>

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

<li>

<code><strong></strong>：和 <code>em 標籤一樣，用於強調文本，但它強調的程度更強一些。

<li>

<code><em></em>：將其中的文字表示為強調的內容，表現為斜體。

<li>

<code><mark></mark>：使用黃色突出顯示部分文字。

<li>

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

<li>

<code><figcaption></figcaption>：定義 <code>figure 元素的標題，應該被置於 <code>figure 元素的第一個或最後一個子元素的位置。

<li>

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

<li>

<code><blockquoto></blockquoto>：定義區塊引用，區塊引用擁有它們自己的空間。

<li>

<code><q></q>：短的引述（跨瀏覽器問題，盡量避免使用）。

<li>

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

<li>

<code><abbr></abbr>：簡稱或縮寫。

<li>

<code><dfn></dfn>：定義術語元素，與定義必須緊鄰，可以在描述列表dl元素中使用。

<li>

<code><address></address>：作者、相關人士或組織的聯絡資訊（電子郵件地址、指向聯絡資訊頁的連結）。

<li>

<code><del></del>：移除的內容。

<li>

<code><ins></ins>：新增的內容。

<li>

<code><code>：標記代碼。

<li>

<code><meter></meter>：定義已知範圍或分數值內的標量測量。 （Internet Explorer 不支援 meter 標籤）

<li>

<code><progress></progress>：定義運作中的進度（進程）。

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