span要素(generic inline container)は特に意味を持っているわけではなく、行内容(インライン要素やテキスト)をグループ化(含まれた内容を一つの単位とする)し、文書に構造的意味合いを付加・補強することで文書の情報的価値を高めます。span要素がインライン(行内)レベルでのグループ化を示すのに対し、div要素はブロックレベルの範囲のグループ化を示します。

div要素も span要素も単体で使用することはなく、まとめてlang属性XHTML では xml:lang属性)で言語情報や dir属性で書字方向に関する設定をしたり、id属性class属性を割り振って構造化したものに対し、CSSでのスタイリングやJavaScriptでのスクリプティングなどを効果的に併用できます。

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
要素型
インライン要素
開始タグ
必須
終了タグ
必須
非推奨
-
内容モデル

span要素の属性

共通属性
イベント属性

span要素のサンプル

span要素は、テキスト水準のある情報をマークアップするのに HTML, XHTML に定義されている要素では適当な要素がない場合によく用いられています。次にあげる用例が正しい・適切な使い方というわけではなく、その部分が何であるかを、あえて span要素を使ってマークアップすることで、その趣旨を知ることができます。

span.time   { font-style: italic ; }
span.sunday { color : red ; }
<p>運動会:
<span class="time">2005/09/25(<span class="sunday">Sun</span>)</span></p>

HTML4.01, XHTML1.0, XHTML1.1には日付を示す適当な要素はないので、英数字の羅列を日付として明示するために span要素に "time" という値の class属性でマークアップし、さらに、その日が日曜日ということを示唆できるように、日曜日がカレンダーではよく赤色で表記されることから "sunday" という値の class属性を付けて、スタイルを適用するためのセレクタとしても効果を発揮しています。

このようなマークアップが行われたXHTML文書であれば、XMLのスタイルシートであるXSLT を使って、日付情報の span要素だけを取り出すことが可能になります。

Updated / Published