HTML <span>

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

書式

HTMLではタグ名、属性名及び属性値の大文字と小文字を区別しない。

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

使用例

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

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

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

属性一覧

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

accesskey
要素に対するアクセスキーを指定する。空白で区切って、複数の文字を指定できる。
class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
<span class="badge rounded-pill">
  example
</span>
contenteditable
ユーザによる編集が可能かどうかを指定する。
contenteditable
説明
true 編集できる
false 編集できない
data-*
カスタムデータ属性を指定する。
dir
文字の書字方向を指定する。
<span dir="ltr">
  example
</span>
id
HTML文書内で一意な識別子を指定する。
lang
要素の言語を指定する。
<span lang="en">
  example
</span>
onblur
要素がフォーカスを失ったときに実行する JavaScript を指定する。
onchange
テキストが変更選択されたときに実行する JavaScript を指定する。
onclick
要素をクリックしたときに実行する JavaScript を指定する。
oncontextmenu
要素でコンテキストメニューを開いたときに実行する JavaScript を指定する。
ondblclick
要素をダブルクリックしたときに実行する JavaScript を指定する。
onfocus
要素がフォーカスを得たときに実行する JavaScript を指定する。
onkeydown
要素でキーを押下したときに実行する JavaScript を指定する。
onkeypress
キーを押したときに実行するスクリプト JavaScript を指定する。
onkeyup
要素でキーを離したときに実行する JavaScript を指定する。
onmousedown
要素をマウスのボタンを押下したときに実行する JavaScript を指定する。
onmousemove
マウスポインタを要素内で動かしたときに実行する JavaScript を指定する。
onmouseout
マウスポインタを要素内から要素外に動かしたときに実行する JavaScript を指定する。
onmouseover
マウスカーソルが乗ったときに実行する JavaScript を指定する。
onmouseup
マウスのボタンを押下した後で離すときに実行する JavaScript を指定する。
onselect
テキストが(部分的にでも)選択されたときに実行する JavaScript を指定する。
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。
<span style="color: red;">
  example
</span>
title
要素のアドバイザリー情報を指定する。

コンテンツ・モデル

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タグ

参考文献

Web Hypertext Application Technology Working Group (2022) "Text-level semantics" HTML Living Standard