HTML span 要素完全ガイド (インライン汎用コンテナ / div との違い / アクセシビリティ)

とは

は HTML のインライン汎用コンテナです。要素自体には意味がなく、CSS でスタイルを当てたい・JavaScript で部分操作したい時に、テキストの一部を囲むために使います。

<!-- 基本: テキストの一部だけ色を変える -->
<p>今日の気温は<span style="color:red;font-weight:bold">35度</span>です。</p>

<!-- クラス付与でスタイル分離 -->
<p>ステータス: <span class="badge badge-success">完了</span></p>

<!-- 一部だけ別言語を示す -->
<p>これは <span lang="en">Hello World</span> と表示されます。</p>

<!-- JS から参照するための ID 付与 -->
<p>カート数: <span id="cart-count">0</span></p>

vs

の決定的な違い

<!-- ❌ NG: span の中にブロック要素 (HTML 仕様違反) -->
<span><div>これは仕様違反</div></span>

<!-- ✅ OK: div の中に span -->
<div><span>これは OK</span></div>

<!-- ❌ NG: span は改行しないので、ボックスにしたいなら div か display 変更 -->
<span style="width:200px;height:50px;background:red">幅は効かない</span>

<!-- ✅ OK: inline-block で span にも幅・高さを効かせる -->
<span style="display:inline-block;width:200px;height:50px;background:red">効く</span>

セマンティック要素を優先する

「意味」がある場合は で誤魔化さず、適切な HTML 要素を使うとアクセシビリティ・SEO・LLMO が向上します:

JavaScript からの動的操作

<p>カート内: <span id="cart-count">0</span> 個</p>
<button onclick="addToCart()">追加</button>

function addToCart() {
    const el = document.getElementById('cart-count');
    el.textContent = parseInt(el.textContent) + 1;
    el.classList.add('flash');
    setTimeout(() => el.classList.remove('flash'), 500);
}

// React / Vue でも span は頻出
// React: <p>カート: <span>{count}</span> 個</p>
// Vue:   <p>カート: <span>{{ count }}</span> 個</p>

display プロパティで挙動を変える

/* デフォルト: インライン */
.tag-inline { display: inline; }

/* インライン-ブロック: テキスト中に流れつつ幅・高さ指定可 */
.tag-ib {
    display: inline-block;
    width: 80px;
    padding: 4px 8px;
    background: #2563eb;
    color: white;
    border-radius: 4px;
    text-align: center;
}

/* ブロック: div と同等 */
.tag-block {
    display: block;
    margin: 1em 0;
}

/* フレックス: 子要素を flex 配置 */
.tag-flex {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

アクセシビリティ (Lighthouse / WAI-ARIA)

はデフォルトでアクセシビリティツリーに現れません。スクリーンリーダーで読み上げさせたい場合は role / aria-label 等を付与します。

<!-- ❌ アイコンだけだとスクリーンリーダーが認識できない -->
<span class="icon-trash" onclick="del()"></span>

<!-- ✅ ボタンとして認識させる -->
<button aria-label="削除" onclick="del()">
    <span class="icon-trash" aria-hidden="true"></span>
</button>

<!-- ✅ 装飾用 span は aria-hidden -->
<p><span aria-hidden="true">★</span> 重要なお知らせ</p>

<!-- ✅ ステータスを通知 -->
<p>状態: <span role="status" aria-live="polite">送信中</span></p>

多言語 / 双方向テキスト:

<!-- 言語混在で双方向アルゴリズム壊れ防止 -->
<p>ユーザー名: <bdi>إيان</bdi> さんが投稿しました</p>

<!-- 強制的に方向指定 -->
<p>これは <bdo dir="rtl">逆順に表示される</bdo> 部分</p>

<!-- lang 属性で言語明示 -->
<p>英語の <span lang="en">Hello World</span> と中国語の <span lang="zh">你好</span></p>

FAQ

Q: と

はどう違う？
A:

は段落 (ブロック・意味あり)、 はインライン・意味なし。文章なら

、文中の一部装飾なら 。

Q: 何個までネストして良い？
A: 仕様上の制限はなし。実用上は 3〜4 段までが可読性の限界。

Q: SEO に影響する？
A: 自体は中立。ただし を で代用すると検索エンジンが重要キーワードを認識しにくくなります。