HTML語義化標籤
什麼是語義化標籤？
HTML賦予了每個標籤以不同的語義。高質量的HTML程式碼，要求我們在遵循HTML語法的同時，也應該遵循HTML的標籤語義，如：
div 語義：Division(分隔)
span 語義：Span(範圍)
ol 語義：Ordered List(排序列表)
ul 語義：Unordered List(不排序列表)
li 語義：List Item(列表專案)
...
HTML常用標籤語義：
<Hx>
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作為標題使用，並且依據重要性遞減。<h1>是最高的等級。
由於一些瀏覽器會預設地把 <h1> 元素顯示為很大的字型，因此會有一些 web 開發者使用 <h2> 元素代替 <h1> 元素來顯示最上層的標題。這樣做不會對讀者產生影響，但會使那些試圖“理解網頁結構
”的搜尋引擎和其他軟體感到迷惑。
請確保把 <h1> 用於最頂層的標題，<h2> 和 <h3> 用於較低的層級。
從語義上講，它們應該適用於所有標題文字。
但這裡會出現一個語義上的分歧。h1究竟該理解為一級標題呢還是理解為1號字型大小的標題。我通常理解為一級標題，一級標題下再有小標題就用h2。但是事實上回顧HTML設計之初，h1-h6後面的數字
更多的被理解為控制標題文字大小的。用h3或許只是為了使用三號大小的字型，而並非它就是三級標題。否則一級標題全用h1，個個都是斗大的字，又不得不用CSS來控制字號，感覺很累贅。所以，這是
一個待商榷的問題。
例如：
-
<h1>標題1</h1>
-
<h2>標題2</h2>
<b>標籤與<strong>標籤
<b>：標籤語義為“加粗”
<strong>：標籤語義為“強調”
當我們知道了<b>標籤和<strong>標籤的語義時，做SEO時就好決定用哪個來強調重要的關鍵字了，強呼叫<strong>，純粹加粗用<b>
<ul>標籤、<ol>標籤、<li>標籤
<ul>語義: 定義無序列表
<ol>語義：定義有序列表
<li>語義：定義列表專案
所以涉及到列表的專案，應該用<ul><li>或<ol><li>來佈局，而不是用<table>或<p>甚至<span>，當然也可以用<dl><dt><dd>
應該要補充的是，別忘了li裡面還可以再用ul或ol，形成第二級列表。
<dl>標籤、<dt>標籤、<dd>標籤
<dl>語義：定義了定義列表
<dt>語義：定義了定義列表中的專案（即術語部分）
<dd>語義：定義列表中定義條目的定義部分
一些帶標題的列表可採用<dl><dt><dd>自定義列表
<span>標籤
<span>語義：被用來組合文件中的行內元素
列如：
Code:-
pspan{color:#ff0000;font-weight:bold;}
-
<p>
-
<span>提示：</span>：這是提示內容
-
</p>
可以為 span 應用 id 或 class 屬性，這樣既可以增加適當的語義，又便於對 span 應用樣式。
<table>、<th>、<td>、<caption>
<table>語義： 定義 HTML 表格
<th>語義： 定義表格內的表頭單元格
<caption>語義: 定義表格標題
<button>標籤、<input>標籤、<textarea>標籤
<button> 標籤定義一個按鈕
<input> 標籤用於蒐集使用者資訊，根據不同的 type 屬性值，輸入欄位擁有很多種形式。輸入欄位可以是文字欄位、複選框、掩碼後的文字控制元件、單選按鈕、按鈕等等。
<button> 控制元件 與 <input type="button"> 相比，提供了更為強大的功能和更豐富的內容。<button> 與 </button> 標籤之間的所有內容都是按鈕的內容，其中包括任何可接受的正文內容，比如文字或
多媒體內容。
<textarea>語義：定義多行的文字輸入控制元件
<label> 標籤
<label>語義： 為 input 元素定義標註（標記）
<center>，<font>不建議使用