<span>特定部分を指定

<span>タグは、とくに意味を持つことのないテキスト範囲を表します。 <span>自体は何も意味を持ちませんが、特定のテキスト範囲にclass属性などを適用したい場合に便利です。

例えばclass属性・id属性・lang属性・dir属性などのグローバル属性と併せて使用する事で、任意の範囲にスタイルシートでスタイルを適用したり、言語を示す事などが可能です。

またspan要素を使用すべき場所として、lang属性やdir属性が必要となるような場所が想定されています。

※lang属性は、言語を指定する際に使用します。 例えば主言語とは異なる言語を用いる場合になどに利用します。
dir属性では、文字表記の方向を指定する事ができます。

例えば、英語などの日本人に馴染みがある言語の場合lang属性を指定しても、あまり意味はないかもしれません。 ですが、ポルトガル語など日本人に馴染みがない言語の場合、lang属性を意図的に使用する事で、seo対策になる可能性もあります。

HTML5での変更点

HTML5のspan要素は、HTML4.01から大きな変化はありません

書式

  • <span 属性="値">~</span> ……… 汎用的なインライン要素

使用した時の例

<p>りんごの色は<span style="color:red;">赤色</span>です。<br />
ちなみにリンゴはポルトガル語で<span lang="pt">maçã</span>といいます。</p>

ブラウザ上の表示例

りんごの色は赤色です。
ちなみにリンゴはポルトガル語でmaçãといいます。

対応ブラウザなどのデータ

形式 <span>~</span> カテゴリ フローコンテンツ, フレージングコンテンツ, パルパブルコンテンツ
親要素 フレージングコンテンツが期待される場所 子要素 フレージングコンテンツ
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~