HTML 語意標籤 vs 樣式標籤 比較

tags: HTML

<b> vs <strong>

標籤	語意	用途
<b>	無	純加粗字體
<strong>	有	表示重要性

範例

<p><b>優惠！</b> 限時折扣中</p>
<p><strong>重要：</strong> 請勿分享密碼</p>

<i> vs <em>

標籤	語意	用途
<i>	無	斜體裝飾用
<em>	有	語意強調內容

範例

<p>產品名稱：<i>SuperWidget X100</i></p>
<p>我<em>真的</em>很喜歡這本書</p>

<tt>（舊） vs <code>, <kbd>

標籤	語意	用途
<tt>	無	等寬字體（已淘汰）
<code>	有	程式碼片段
<kbd>	有	鍵盤輸入，對教學特別有用

範例

<p>請輸入以下命令：<code>npm install</code></p>
<p>按下 <kbd>Ctrl</kbd> + <kbd>C</kbd> 停止程序。</p>

<span> vs <mark>, <abbr>, <time>, <dfn>

標籤	語意	用途
<span>	無	行內容器，通常配合 CSS 使用
<mark>	有	高亮重要資訊或搜尋結果
<abbr>	有	縮寫，提供全稱作為提示
<time>	有	時間/日期資訊，方便機器解析
<dfn>	有	定義某個術語或名詞

範例

<p>搜尋結果：<mark>語意標籤</mark></p>
<p><abbr title="Cascading Style Sheets">CSS</abbr> 是一種樣式語言</p>
<p>活動日期：<time datetime="2025-06-10">2025 年 6 月 10 日</time></p>
<p><dfn>HTML</dfn> 是用來建立網頁的標記語言</p>

<div> vs 語意結構標籤：<section>, <article>, <nav>, <header>, <footer>

標籤	語意	用途
<div>	無	區塊容器（萬用）
<section>	有	主題段落或頁面區塊
<article>	有	獨立內容（如部落格文章）
<nav>	有	導覽區塊
<header>	有	頁首、標題區
<footer>	有	頁尾區塊

範例

<header>
  <h1>我的網站</h1>
</header>

<nav>
  <ul>
    <li><a href="#">首頁</a></li>
    <li><a href="#">關於</a></li>
  </ul>
</nav>

<article>
  <h2>最新消息</h2>
  <p>我們即將推出新產品！</p>
</article>

<footer>
  <p>&copy; 2025 MySite</p>
</footer>

總結

• 語意標籤優先：改善 SEO、可存取性、程式結構
• 樣式標籤適用於視覺目的：但不建議過度依賴
• 適當混合語意與樣式標籤，有助於撰寫語意清晰、視覺一致的 HTML