最終更新日

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」外部リンク
HOME