HTML 行內容器 span：用途與常見錯誤
無任何語意，主要用來包覆部份文字，方便使用 CSS 或 JavaScript 控制樣式或進行互動。它是行內元素，不能包區塊元素；文字本身有強調的意思時，改用 <strong>、<em> 這類有語意的元素更好。
html
<p>Web 前端開發三劍客: <span>HTML</span>、<span>CSS</span>、<span>JavaScript</span></p>它是行內元素
<span> 只包住文字本身，不會換行，也沒有任何預設樣式；區塊容器 <div> 則會自己佔滿一整行。
html
<p>總計 <span class="price">1,280</span> 元</p>上面這種寫法很常見：把會變動的數字包起來，JavaScript 就能只更新那一小段，不必重寫整個 段落。
小提醒
<span> 不能包 <div>、<p> 這類區塊元素。要包區塊內容，請改用 <div>。
有語意的行內元素
只是要上色或換字級才用 <span>；文字本身帶有語氣或意義時，請挑有語意的元素：
| 元素 | 語意 |
|---|---|
<strong> | 重要、需要強調的內容 |
<em> | 語氣上的強調 |
<mark> | 標記出與當下情境相關的文字 |
<time> | 日期或時間 |
<code> | 一段程式碼 |
html
<!-- ❌ 用 span 加粗，機器讀不出這是重點 -->
<p>請於 <span class="bold">3 月 1 日</span> 前完成。</p>
<!-- ✅ 有語意，螢幕閱讀器會讀出強調 -->
<p>請於 <strong><time datetime="2026-03-01">3 月 1 日</time></strong> 前完成。</p>常見問題
span 裡面可以放 div 嗎？
不行。<span> 是行內元素，只能包行內內容。硬包區塊元素雖然畫面上可能看得出效果，但結構不合法，也容易出現預期外的排版問題。
想讓文字變粗，該用 span 還是 strong？
看有沒有語氣。單純的視覺變化用 <span> 搭配 CSS；這段文字在語意上真的是重點就用 <strong>，它會被螢幕閱讀器讀出強調的語氣。
span 有預設樣式嗎？
沒有。它不帶任何外觀變化，也不會換行，就只是一個純粹的行內容器，所有效果都得由 CSS 自己加上去。
