最終更新日 2021年4月7日

span要素

span要素自身は何も意味しませんが、span要素で囲んだ複数箇所のテキストなどをまとめて扱うことで、コンテンツに特定の意味付けをしたり、スタイル化の対象としたりできます。class、id、lang、dir属性などのグローバル属性や、CSSのスタイルシートと組み合わせて使うと、書式の自由な設定が可能です。

span要素は、Phrasingコンテンツの記述箇所で使用できます。

HTML5での変更点

・datasrc、datafld、dataformatasの各属性は廃止されました。

カテゴリ	タグの省略	親要素	子要素
Flowコンテンツ Phrasingコンテンツ	省略不可	Phrasingコンテンツを子にできる要素	Phrasingコンテンツ

属性	値	説明
グローバル属性	-	-
イベント属性	-	-

サンプルコード

<body>
  <p>フィレオフィッシュは、酸味がきいた<span class="sauce">タルタルソース</span>です。</p>
  <p>てりやきバーガーは、にんにく風味の<span class="sauce">てりやきソース</span>です。</p>
  <p>ベーコンバーガーは、コクのある<span class="sauce">マスタードソース</span>です。</p>
</body>

参考文献：W3C HTML5「4.6.25 The span element」

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。