&

admin

2025年7月28日 16:1 本文熱度 291

這題啊，說簡單也簡單，說細了還能展開不少。HTML里的這些標簽，看起來功能差不多，實則背后差異可不小——特別是你要考慮SEO、可訪問性（Accessibility）或者瀏覽器行為的時候。下面我分三組講清楚它們的區別，配合我的一些開發經驗，力求讓你一眼就明白，別再混用了。

1）<title> 和 <h3> 的區別

先說結論：它們完全不是一類東西！別搞混了兄弟！

<head>
  <title>我的網站首頁</title>
</head>

??這個不會出現在網頁正文里，它是給瀏覽器和搜索引擎看的，SEO權重極高！！

<h3>這是小標題</h3>

我之前遇到有人把 <title> 放到 <body> 里當作頁面標題用，結果樣式全掛了，瀏覽器直接忽略它的渲染，SEO也抓不到標題——白做了！

2）<b> 和 <strong> 的區別

這倆都能加粗，但語義天差地別！

<b>粗體文本</b>

<strong>重點強調內容</strong>

??我之前踩過坑，有一次做無障礙網站，結果頁面全是 <b>，讀屏器完全讀不出重點，直接被無障礙審查打回，后來換成 <strong> 一下就過了！

所以總結一句話：能用<strong>，別用<b>，除非你就是想單純美化。

3）<i> 和 <em> 的區別

也是一對看似“斜體”的孿生兄弟，實則差別老大了！

<i>JavaScript</i>

<em>我真的非常生氣！</em>

??這個語義重要性我在做郵件模板和政府項目時感觸特別深，如果你要兼容屏幕閱讀器，這種語義標簽必須用對！

總結一下

標簽	作用	是否語義化	瀏覽器表現
`<title>`	網頁標題（用于瀏覽器標簽和SEO）	?	不顯示在頁面正文
`<h3>`	第三級標題（頁面結構）	?	頁面中顯示為小標題
`<b>`	加粗但無語義	?	顯示為粗體
`<strong>`	加粗且強調	?	顯示為粗體，語義強調
`<i>`	斜體但無語義	?	顯示為斜體
`<em>`	斜體且語義強調	?	顯示為斜體，有語音強調

??對了，我之前還寫過一個小測試頁面，把 <b> 和 <strong> 放一起，然后配合讀屏器試了一下，效果差別巨大，推薦你有空也測試看看。

感興趣的朋友可以試試把這幾組標簽混在一起用，打開讀屏工具（mac上是VoiceOver，Windows是NVDA），你就會感受到——語義真不是樣式能替代的！

閱讀原文：原文鏈接

該文章在 2025/7/29 12:30:58 編輯過

關鍵字查詢

HTML

區別

正在查詢...