HTML の <span> 要素は、記述コンテンツの汎用的な行内コンテナーであり、何かを表すものではありません。スタイル付けのため（class または id 属性を使用して）、または lang のような属性値を共有したりするために要素をグループ化する用途で使用することができます。他に適切な意味的要素がない時にのみ使用してください。 <span> は <div> 要素ととても似ていますが、 <div> がブロックレベル要素であるのに対し、 <span> はインライン要素です。
この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
| コンテンツカテゴリ | フローコンテンツ, 記述コンテンツ |
|---|---|
| 許可されている内容 | 記述コンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素、またはフローコンテンツを受け入れるすべての要素。 |
| 許可されている ARIA ロール | すべて |
| 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;
}
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| HTML Living Standard <span> の定義 |
現行の標準 | |
| HTML5 <span> の定義 |
勧告 | DOM インターフェイスを HTMLSpanElement に変更 |
| HTML 4.01 Specification <span> の定義 |
勧告 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| 基本対応 | あり | あり | 1 | あり | あり | あり |
| 機能 | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| 基本対応 | あり | あり | あり | 4 | あり | あり | あり |
関連情報
- HTML の
<div>要素