HTML Living Standard/span

span 要素

 要素は、特定の文法的意味や表現を持たないインラインコンテナ要素です。主にスタイルを適用したり、スクリプトで操作する目的で使用されます。他のインライン要素（例:  や ）が適さない場合に使用します。

カテゴリ

フローコンテンツ
フレージングコンテンツ

使用される文脈

フレージングコンテンツが期待される場所

コンテンツモデル

フレージングコンテンツ

タグの省略

開始タグと終了タグは省略できません。

コンテンツ属性

 要素は、グローバル属性のみをサポートします。

アクセシビリティの考慮事項

 は意味を持たないため、スクリーンリーダーには特別な情報として解釈されません。必要に応じて、aria-* 属性やラベルを追加してアクセシビリティを向上させることが重要です。
過剰な使用は避け、意味を持つセマンティックな要素（例: 、<code>）を優先して使用してください。

使用例

基本的な使用例

以下は、 を使用して部分的にスタイルを適用する例です。

<p>この文章の <span style="color: red;">一部</span> に赤色のスタイルが適用されています。</p>

クラスによるスタイルの適用

class 属性を使用してスタイルを適用する例です。

<p>この文章の <span class="highlight">特定の部分</span> にスタイルが適用されています。</p>

CSS

.highlight {
  background-color: yellow;
  font-weight: bold;
}

スクリプトでの操作

JavaScriptを使用して、 要素を動的に操作する例です。

<p>この文章には <span id="dynamic-text">変更可能なテキスト</span> があります。</p>
<script>
  document.querySelector("#dynamic-text").textContent = "新しいテキストに置き換えられました！";
</script>

アクセシビリティ向上のためのラベル付け

aria-label を使用して、スクリーンリーダーに情報を提供する例です。

<p>訪問者数: <span aria-label="10,000">10k</span></p>

注意事項

 要素を無意味に多用すると、HTMLが冗長になり、可読性や保守性が低下します。できるだけセマンティック要素を使用することを優先してください。
スタイル付けやスクリプトでの操作が必要ない場合、 を避けるべきです。