概要
HTML <span> 要素は、何か特定のセマンティクスを表すものではない、フレージング・コンテンツの為の汎用コンテナです。CSS によるスタイリングの用途等で、要素のグループ化が必要な場合に用います。多くの場合、 class 属性か id 属性、lang 属性等と共に使われます。セマンティクス上で他に適切な要素がある場合はそちらを使用して下さい。<span> は <div> 要素と非常に似た役割を持っています。 <div> 要素がブロックレベル要素の汎用コンテナであるのに対し、<span> はインラインレベル要素の為の汎用コンテナの役割を果たします。
| コンテンツカテゴリ | フローコンテンツ、フレージングコンテンツ |
|---|---|
| 許可された内容 | フレージングコンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可された親要素 | フレージングコンテンツを受け入れるすべての要素。また、フローコンテンツを受け入れるすべての要素。 |
| DOM インターフェイス | HTMLSpanElement (HTML 5 より前は HTMLElement) |
属性
他の全ての要素と同様に、この要素はグローバル属性を持ちます。
例 1
<p><span>Some text</span></p>
結果
Some text
例 2
<li><span> <a href="portfolio.html" target="_blank">See my portfolio</a> </span></li>
CSS:
li span {
background: gold;
}
結果
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| WHATWG HTML Living Standard <span> の定義 |
現行の標準 | |
| HTML5 <span> の定義 |
勧告 | DOM インターフェイスを HTMLSpanElement に変更 |
| HTML 4.01 Specification <span> の定義 |
勧告 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 基本サポート | (有) | (有) | (有) | (有) | (有) |
| 機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | (有) | (有) | (有) | (有) | (有) |