<span></span>

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / フレージング・コンテンツ / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容 フレージング・コンテンツ

span要素は、テキストの範囲を指定します。この要素は行内のコンテナとして機能するたけで、それ以外の特別な意味は持ちません。

  • 特定の範囲を1つのブロックとしてグループ化したい場合は、この要素ではなくdiv要素を使用します。

<span>テキストの範囲を指定します</span>

span要素は、主にclass属性、id属性、lang属性などと併せて使用することになります。

例えば、次のような用途に使用することができます。

  • class属性を使い、スタイルの適用範囲を設定する
  • id属性を使い、スクリプトの対象となる範囲を設定する
  • lang属性を使い、特定範囲の言語情報を示す

使用例

class属性を使ってスタイルを適用させた例

<!DOCTYPE html>
<html>
<head>

<title>文書のタイトル</title>

<style>

span.element { color: #cc0000; }
span.attribute { color: #008040; }
span.value { color: #0080c0; }

</style>

</head>
<body>

<p>次の例では、要素を<span class="element">赤色</span>、属性を<span class="attribute">緑色</span>、値を<span class="value">青色</span>で表示しています。</p>

<pre>
<code><span class="element">&lt;p <span class="attribute">class="<span class="value">example</span>"</span>&gt;</span>サンプルテキストです。<span class="element">&lt;/p&gt;</span></code>
</pre>

</body>
</html>
表示例

次の例では、要素を赤色、属性を緑色、値を青色で表示しています。

<p class="example">サンプルテキストです。</p>
lang属性を使って言語情報を示した例

<!DOCTYPE html>
<html lang="ja">
<head>

<title>文書のタイトル</title>

</head>
<body>

<p>緑色は、英語では<span lang="en">Green</span>、イタリア語では<span lang="it">Verde</span>と表記します。</p>

</body>
</html>
表示例

緑色は、英語ではGreen、イタリア語ではVerdeと表記します。