概要
HTML <span>
要素は、何か特定のセマンティクスを表すものではない、フレージング・コンテンツの為の汎用コンテナです。CSS によるスタイリングの用途等で、要素のグループ化が必要な場合に用います。多くの場合、 class
属性か id
属性、lang
属性等と共に使われます。セマンティクス上で他に適切な要素がある場合はそちらを使用して下さい。<span>
は {{ HTMLElement("div") }} 要素と非常に似た役割を持っています。 {{ HTMLElement("div") }} 要素がブロックレベル要素の汎用コンテナであるのに対し、<span>
はインラインレベル要素の為の汎用コンテナの役割を果たします。
コンテンツカテゴリ | フローコンテンツ、フレージングコンテンツ |
---|---|
許可された内容 | フレージングコンテンツ |
タグの省略 | {{no_tag_omission}} |
許可された親要素 | フレージングコンテンツを受け入れるすべての要素。また、フローコンテンツを受け入れるすべての要素。 |
DOM インターフェイス | {{domxref("HTMLSpanElement")}} (HTML 5 より前は {{domxref("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;
}
結果
仕様
仕様書 | 策定状況 | コメント |
---|---|---|
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-span-element', '<span>')}} | {{Spec2('HTML WHATWG')}} | |
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-span-element', '<span>')}} | {{Spec2('HTML5 W3C')}} | DOM インターフェイスを {{domxref("HTMLSpanElement")}} に変更 |
{{SpecName('HTML4.01', 'struct/global.html#edef-SPAN', '<span>')}} | {{Spec2('HTML4.01')}} |
ブラウザ実装状況
{{CompatibilityTable}}
機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
基本サポート | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
基本サポート | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
関連情報
- {{htmlelement("div")}}
{{HTMLRef}}