語意比你想像的還更重要，那些你不重視的 HTML 標籤

前言

這一篇來稍微認真聊一下大家很常忽略的一個東西，那就是 HTML 標籤的語意，而這個問題就會導致出現各種問題，像是 SEO 不佳、網頁閱讀性差、維護性差等等，所以這篇就來聊聊這個問題。

語意/語義是什麼？

首先我們先來聊一下什麼是語意、語義化（後面統稱語意化），其實這單字比較常見於前端開發上，主要是在講這個 HTML 的標籤是否有符合它的用途及語意。

有點攏統吧？那麼語意化有什麼好處呢？相信你應該很常見人家跟你說

「良好的語意化可以讓網頁的 SEO 更好」

就這樣而已嗎？不，其實還有很多的好處，舉例來講，如果你有一段文字要用來標題，你會用哪個標籤呢？

1
2
3

<h1>這是一段標題</h1>

<div>這是一段標題</div>

如果你本身是有一定年資的開發者，相信你應該很快就會選擇 h1，但是如果你是新手，你可能會選擇 div 也說不定，但是為什麼呢？因為我們並沒有認真地去了解這些標籤的用途，所以我們才會選擇錯誤的標籤。

那麼為了避免發生這種狀況，我們就要來了解一下這些標籤的用途以及語意。

語意化的標籤

首先這邊我想先講一件事情 HTML 標籤非常的多，不可能每一個都介紹到，因此我只會舉例出幾個常見的標籤，例如：

• h1 ~ h6 -> 標題
• p -> 段落
• a -> 超連結
• img -> 圖片
• ul、ol、li -> 列表
• table、tr、td -> 表格
• form、input、button -> 表單
• header、footer、main、nav、section、article、aside -> 網頁結構標籤

基本上這幾個都是比較常見的 HTML 標籤，而這些標籤都有屬於它各自的用途，因此如何正確地使用就會變得很重要，因為這也會大大影響到 SEO 與網頁的閱讀性。

這邊也額外補一篇大家很常在爭論的「淺談 HTML 究竟是不是程式語言？」這個主題給予補充。

標題（h1 ~ h6）

首先 h1 ~ h6 的 h 其實是 Heading(標題) 的縮寫，而 1~6 代表著標題的重要性與樣式大小，當然樣式可以隨著開發者的喜好決定，但是重要性就不行了，因此最重要的標題就是 h1，而最不重要的就是 h6。

在語意上閱讀假設是這樣子的：

• h1 -> 最重要的標題
• h2 -> 次重要的標題
• h3 -> 第三重要的標題
• h4 -> 第四重要的標題
• h5 -> 第五重要的標題
• h6 -> 最不重要的標題

整體來講透過標籤閱讀就可以快速了解到這個標題的重要程度，用法也極其簡單

1
2
3
4
5
6

<h1>這是一個 h1 標題</h1>
<h2>這是一個 h2 標題</h2>
<h3>這是一個 h3 標題</h3>
<h4>這是一個 h4 標題</h4>
<h5>這是一個 h5 標題</h5>
<h6>這是一個 h6 標題</h6>

段落（p）

p 是 Paragraph（段落）的縮寫，而段落就是用來放置一段文字的標籤，而這段文字可以是一段敘述、一段說明、一段故事等等，而這段文字的長度可以是任意的。

基本上最常見的場景莫過於文章的段落，而這段文字的長度可以是任意的，但是要注意如果你要換行的話，會建議你使用第二個 p 標籤，因為通常一段文字都會有一個段落的結尾，而這個段落的結尾就是換行。

如果你要換行的話，就要使用第二個 p 標籤，這樣就代表是一個新的段落開始，如果都使用 <br> 標籤的話就會不清楚這個段落倒底是結束了沒有，而且這也會導致你難以維護，例如：你可能想針對第二段 p 標籤給予一個特殊的樣式，但是因為你使用了 <br> 標籤，因此你就會很難針對第二段 p 標籤給予特殊的樣式，為此可能就要補上額外的標籤，如：span。

因此以下的寫法是不建議的：

1
2
3
4
5

<p>
  這是第一段文字
  <br>
  這是第二段文字
</p>

而是比較推薦你這樣子寫：

1
2

<p>這是第一段文字</p>
<p>這是第二段文字</p>

超連結（a）

a 全名是 Anchor（錨點，表示連結），主要是用來連結到其他網頁，例如從 Google 跳到 Facebook，或是從 Facebook 跳到 YouTube 等等。

而 a 標籤的屬性 href 就是用來設定連結的網址，例如：

1

<a href="https://israynotarray.com">是 Ray 不是 Array</a>

非常的顧名思義，如果你要連到其他網頁的話，就要使用 a 標籤，而 a 標籤的內容就是你要顯示的文字，例如：是 Ray 不是 Array

圖片（img）

img 全名是 Image（圖片）這應該是全部標籤中最簡單的一個，因為它只有一個屬性 src，而這個屬性就是用來設定圖片的網址，例如：

1

<img src="https://example.com/logo.png">

就是在跟瀏覽器說…

「我這邊要呈現一張圖，來源是 https://example.com/logo.png，你可以幫我把它顯示出來嗎？」

接著畫面就會出現你的圖片了

列表（ul、ol、li）

這個稍微有趣了，所以我直接列出這幾個相對應的全名：

• ul -> Unordered List（無序列表）
• ol -> Ordered List（有序列表）
• li -> List Item（列表項目）

這邊有件事情我想強調一下，也就是 ul 標籤內只會有 li / ol 標籤，為什麼特別說這個呢？因為我很常看到有人在 ul 標籤內塞入其他各種標籤，例如：p、div、span 等等，這樣子是不對的，因為 ul 標籤內只能有 li / ol 標籤，而 li 標籤內可以有任何標籤。

那麼接下來來解釋一下這三個標籤的用途，首先 ul 為什麼會被稱為無序列表，無序列表的意思是說用來表示一組沒有特定順序的項目，在網頁中顯示時，無序列表的會有一個符號（如圓點）作為前綴。

ol 有序列表的意思是說會有一個有特定順序，在網頁上顯示時，會有數字或字母作為前綴。

而 li 就是列表的項目，而用法很簡單，不論是有有序/無序列表都必定會有 li 標籤，而 li 標籤內可以有任何標籤，例如：p、div、span 等等

以下是一個無序列表的範例：

1
2
3
4
5

<ul>
  <li>項目一</li>
  <li>項目二</li>
  <li>項目三</li>
</ul>

而以下是一個有序列表的範例：

1
2
3
4
5

<ol>
  <li>項目一</li>
  <li>項目二</li>
  <li>項目三</li>
</ol>

表格（table、tr、td）

如果你有使用過 Word、Excel 等辦公室軟體的話，那麼你對於這東西應該是不會很陌生。

• table -> Table（表格）
• tr -> Table Row（表格列）
• td -> Table Data（表格資料）

其實表格不只有這些，還有 thead、tbody、tfoot 等等

• thead -> Table Head（表格頭）
• tbody -> Table Body（表格身體）
• tfoot -> Table Foot（表格腳）

關於這一個我應該是不用特別去描述了，因為就是一個表格，只是要注意的是 table 標籤內只能放 tr 或 thead、tbody、tfoot 標籤，而 tr 標籤內只能放 td 標籤。

以下是一個表格的範例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<table>
  <thead>
    <tr>
      <td>姓名</td>
      <td>年齡</td>
      <td>性別</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ray</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
      <td>Array</td>
      <td>18</td>
      <td>女</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>總人數</td>
      <td>2</td>
      <td></td>
    </tr>
  </tfoot>
</table>

上面是一個明確表示表格頭、身體、腳的表格，但其實你也可以這樣寫：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<table>
  <tr>
    <td>姓名</td>
    <td>年齡</td>
    <td>性別</td>
  </tr>
  <tr>
    <td>Ray</td>
    <td>18</td>
    <td>男</td>
  </tr>
  <tr>
    <td>Array</td>
    <td>18</td>
    <td>女</td>
  </tr>
  <tr>
    <td>總人數</td>
    <td>2</td>
    <td></td>
  </tr>
</table>

那麼這邊你就可以發現如果有使用 thead、tbody 與 tfoot 的話，在維護可讀性上你會發現比較明確知道哪邊是表格的頭、身與尾吧。

表單（form、input、button）

基本上不論是你逛哪一個網頁，必定會看到表單元素，而表單元素不外乎有三個：

• form -> Form（表單）
• input -> Input（輸入框）
• button -> Button（按鈕）

這三個合併稱為表單三劍客，而表單元素還有很多，像是 select、textarea、label、fieldset、legend 等等，這邊就不一一介紹了，有興趣的話可以自行查詢。

基本上一個網站的表單不外乎就是這樣：

1
2
3
4

<form>
  <input type="text" />
  <button>送出</button>
</form>

那麼這邊提一下關於 button 的部分，在實戰開發上 button 會建議你要明確的寫清楚 type 屬性，至於原因的話，我就不說明了，你可以看我先前寫的這一篇「關於 Button 有一個很奇妙的 Type 現象」

最後這邊也提一件事情，我們通常會很常使用 label 與 input 一起搭配使用，像是：

1
2

<label for="name">姓名</label>
<input type="text" id="name" />

當使用者點了 label 標籤後，input 會自動聚焦，這樣在使用者體驗上是比較好的，而使用 label 標籤是有助於提高表單的可讀性以及無障礙訪問的唷。

網頁結構標籤

網頁結構標籤就真的非常多了，舉凡…

• header -> 頁首(Header)
• footer -> 頁尾(Footer)
• main -> 主要內容(Main)
• nav -> 導覽列(Navigation)
• section -> 群組區塊(Section)
• article -> 文章(Article)

前面四個比較沒有什麼太大問題，在語意上就滿明瞭的，所以就不特別說明了。

但這邊通常 section 就比較難懂他的意思，而這個標籤在一個網頁上是可以多個的，而 section 的意思就是群組區塊，也就是說你可以把一些相關的內容放在一起，像是：

1
2
3
4
5
6
7
8
9

<section>
  <h2>熱門文章</h2>
  <p>...</p>
</section>

<section>
  <h2>最新文章</h2>
  <p>...</p>
</section>

Note
只是這邊要注意一件事情，有些人會把 section 拿來做 CSS 排版，這是一個錯誤的行為，如果你要排版的話正確是使用 div 標籤，而 section 標籤是用來區分群組區塊的。

article 跟 section 的概念非常接近，但是還是有有一定得差異，article 的意思就是文章，而 section 的意思是群組區塊，所以 article 標籤通常會搭配 header 與 footer 一起使用，像是：

1
2
3
4
5
6
7
8
9
10

<article>
  <header>
    <h2>文章標題</h2>
    <p>作者</p>
  </header>
  <p>文章內容</p>
  <footer>
    <p>發布日期</p>
  </footer>
</article>

使用情境比較常見在部落格、論壇、新聞網站等等。

那麼 HTML 標籤真的非常非常的多，如果要每個解釋的話真的是沒完沒了，所以這一篇文章主要是希望你在使用 HTML 標籤時，可以思考一下它使用的情境，以及它的語意，這樣在未來的開發上才會更加的順利更不用說也可以增加 SEO。

最後你可能會問 div 呢？div 標籤在 MDN 的描述是

<div>: The Content Division element

中文翻譯就是「內容分割元素」，也就是說 div 標籤是用來分割內容的，你也可以把它想成是一個空白的容器，而 div 標籤是可以多個，因此 div 是沒有特定的語意的，因此為了讓整個網頁架構更具有語意化以及好維護就會建議你善加利用 HTML5 的語意標籤。

那麼希望這一篇有讓你對於 HTML 標籤的語意化有更深入的了解唷。