span HTML要素

<span> タグは、それ自体には何の効果も意味もありません。属性を指定したいときに指定します。<div> タグと異なり、インライン要素となります。

書式

<span>
  <!-- Phrasing content -->
</span>

開始タグと終了タグは省略できません。開始タグと終了タグの間にはインライン要素が任意回数表れます。

属性

次に示す属性をspan要素に指定できる。

accesskey
要素に対するアクセスキーを指定する。空白で区切って、複数の文字を指定できる。
class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
contenteditable
ユーザによる編集が可能かどうかを指定する。
contenteditable
説明
true 編集できる
false 編集できない
data-*
カスタムデータ属性を指定する。
dir
文字の書字方向を指定する。
id
HTML文書内で一意な識別子を指定する。
lang
要素の言語を指定する。
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。
title
要素のアドバイザリー情報を指定する。

SPAN 要素の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

特定の一部分だけに<span style="color:red;">スタイル</span>を指定するときに使用します。

特定の一部分だけにスタイルを指定するときに使用します。

内容

span要素の内容には記述コンテンツを含めることができる。具体的には、次の要素である。

JavaScript

JavaScriptからはHTMLSpanElementインタフェースを通じてspan要素へアクセスできる。

HTMLSpanElementインタフェースには、次に示すプロパティがある。

title
span要素のtitle属性
lang
span要素のlang属性
translate
span要素のtranslate属性
dir
span要素のdir属性
hidden
span要素のhidden属性
accessKey
span要素のaccessKey属性
accessKeyLabel
要素に割り当てられたアクセスキー
draggable
span要素のdraggable属性
spellcheck
span要素のspellcheck属性
autocapitalize
span要素のautocapitalize属性
innerText
ノードに描画されるテキスト
id
span要素のid属性

HTMLタグ

参考文献

WHATWG (2021) "Text-level semantics" HTML Living Standard