一、什麼是HTML語義化標籤
語義化的標籤，旨在讓標籤有自己的含義。
<p>一行文字</p>
<span>一行文字</span>
如上代碼，p 標籤與 span 標籤都區別之一就是，p 標籤的含義是：段落。而 span 標籤責沒有獨特的含義。
二、語義化標籤的優勢
代碼結構清晰，方便閱讀，有利於團隊合作開發。
方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以語義的方式來渲染網頁。
有利於搜索引擎優化（SEO）。
三、常見的語義化標籤
因此我們在寫頁面結構時，應儘量使用有 語義的HTML 標籤
<title>：頁面主體內容。
<hn>：h1~h6，分級標題，<h1> 與 <title> 協調有利於搜索引擎優化。
<ul>：無序列表。
<li>：有序列表。
<header>：頁眉通常包括網站標誌、主導航、全站鏈接以及搜索框。
<nav>：標記導航，僅對文檔中重要的鏈接羣使用。
<main>：頁面主要內容，一個頁面只能使用一次。如果是web應用，則包圍其主要功能。
<article>：定義外部的內容，其中的內容獨立於文檔的其餘部分。
<section>：定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分。
<aside>：定義其所處內容之外的內容。如側欄、文章的一組鏈接、廣告、友情鏈接、相關產品列表等。
<footer>：頁腳，只有當父級是body時，纔是整個頁面的頁腳。
<small>：呈現小號字體效果，指定細則，輸入免責聲明、註解、署名、版權。
<strong>：和 em 標籤一樣，用於強調文本，但它強調的程度更強一些。
<em>：將其中的文本表示爲強調的內容，表現爲斜體。
<mark>：使用黃色突出顯示部分文本。
<figure>：規定獨立的流內容（圖像、圖表、照片、代碼等等）（默認有40px左右margin）。
<figcaption>：定義 figure 元素的標題，應該被置於 figure 元素的第一個或最後一個子元素的位置。
<cite>：表示所包含的文本對某個參考文獻的引用，比如書籍或者雜誌的標題。
<blockquoto>：定義塊引用，塊引用擁有它們自己的空間。
<q>：短的引述（跨瀏覽器問題，儘量避免使用）。
<time>：datetime屬性遵循特定格式，如果忽略此屬性，文本內容必須是合法的日期或者時間格式。
<abbr>：簡稱或縮寫。
<dfn>：定義術語元素，與定義必須緊挨着，可以在描述列表dl元素中使用。
<address>：作者、相關人士或組織的聯繫信息（電子郵件地址、指向聯繫信息頁的鏈接）。
<del>：移除的內容。
<ins>：添加的內容。
<code>：標記代碼。
<meter>：定義已知範圍或分數值內的標量測量。（Internet Explorer 不支持 meter 標籤）
<progress>：定義運行中的進度（進程）。
不同標籤之間的比較：
title與h1的區別
定義：title是網站標題，h1是文章主題
作用：title概括網站信息，可以直接告訴搜索引擎和用戶這個網站是關於什麼主題和內容的，是顯示在網頁Tab欄裏的；h1突出文章主題，面對用戶，更突出其視覺效果，指向頁面主體信息，是顯示在網頁中的。
b與strong的區別
定義：b(bold)是實體標籤，用來給文字加粗，而strong是邏輯標籤，作用是加強字符語氣
區別：b標籤只是加粗的樣式，沒有實際含義，常用來表達無強調或着重意味的粗體文字，比如文章摘要中的關鍵詞、評測文章中的產品名稱、文章的導言； 而strong表示標籤內字符重要，用以強調，其默認格式是加粗，但是可以通過CSS添加樣式，使用別的樣式強調。
建議：爲了符合CSS3的規範，b應儘量少用而改用strong
i與em的區別
定義：i(italic)是實體標籤，用來使字符傾斜，而em(emphasis)是邏輯標籤，作用是強調文本內容
區別：i標籤只是斜體的樣式，沒有實際含義，常用來表達無強調或着重意味的斜體，比如生物學名、術語、外來語（比如「de facto」這樣的英語裏常用的拉丁語短語）；而em表示標籤內字符重要，用以強調，其默認格式是斜體，但是可以通過CSS添加樣式
建議：爲了符合CSS3的規範，i應儘量少用而改用em
下面擴展一些其它的標籤屬性區別：
img中的alt與title屬性
alt屬性是在你的圖片因爲某種原因不能加載時在頁面顯示的提示信息，它會直接輸出在原本加載圖片的地方
title屬性是在你鼠標懸停在該圖片上時顯示一個小提示，鼠標離開就沒有了，有點類似jQuery的hover
src與href的區別
定義：href指定網絡資源的位置建立鏈接或關係，用在link和a等元素上。src將外部資源嵌入到當前標籤所在位置，如img圖片和js腳本等
區別：我們在可替換的元素上使用src，然而把href用於在涉及的文檔和外部資源之間建立一個關係。 瀏覽器解析src屬性時，會暫停其他資源的下載和處理，直至將該資源加載，編譯，執行完畢。 瀏覽器解析到href的時候會識別該鏈接內容，對其進行下載不會停止對當前文檔的處理