<span> - 意味を持たないインライン要素の汎用タグ

spanは、特別な意味を持たないインライン要素の汎用的なタグです。テキスト中のある部分にだけコンテンツ属性(class属性値など)を付けたい場合に利用します。divタグがブロック要素の汎用タグ、spanがインライン要素の汎用タグだと覚えておきましょう。

説明

下記は、「『太陽』という言葉を目立たせたくて赤文字にしたい。だけど、特別な意味付けはしたくない」という理由で、spanタグを使った例です。

HTML

<p>今日の天気はとても良いですね。<span class="red">太陽</span>が輝いている。</p>

CSS

.red {
	color: #f00 ;
}

今日の天気はとても良いですね。太陽が輝いている。

[span]と[div]の違い

同じことを、spanタグではなく、divタグを使ってやった場合、次のようになります。ブロック要素は、横方向のスペースを占領して前後に改行が入ります。対してインライン要素は、改行が入らず溶け込むわけです。divタグとspanタグを適宜、使い分けましょう。

HTML

<p>今日の天気はとても良いですね。<div class="red">太陽</div>が輝いている。</p>
今日の天気はとても良いですね。
太陽
が輝いている。

概要

カテゴリー
  • Flow content (フロー・コンテンツ)
  • Phrasing content (フレージング・コンテンツ)
  • Palpable content (パルパブル・コンテンツ)
コンテンツモデル
フレージングコンテンツ
利用できる場所
フレージングコンテンツが期待される場所で使用できます。
利用できる属性
グローバル属性
許可されている、全てのグローバル属性を指定できます。
タグの省略
spanタグは、開始タグ、終了タグ、共に省略することはできません。

参考情報

span要素に関する情報は、下記サイトで確認できます。

  • W3C … W3CによるHTML5勧告。spanの項目。
  • HTML language reference … W3Cによるspanのリファレンス。
  • WHATWG … WHATWGによる仕様書、HTML Living Standard。span要素の仕様。