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 要素の開始タグと終了タグの間には、フレージング・コンテンツを含めることができる。具体的には、以下に示す要素である。

• テキスト
• <a>
• <abbr>
• <area>（マップ要素の子孫である場合）
• <audio>
• <b>
• <bdi>
• <bdo>
• <br>
• <button>
• <canvas>
• <cite>
• <code>
• <data>
• <datalist>
• <del>
• <dfn>
• <em>
• <embed>
• <i>
• <iframe>
• <img>
• <input>
• <ins>
• <kbd>
• <label>
• <link>（本文中で許可されている場合）
• <map>
• <mark>
• <math>
• <meta>（itemprop 属性が存在する場合）
• <meter>
• <noscript>
• <object>
• <output>
• <picture>
• <progress>
• <q>
• <ruby>
• <s>
• <samp>
• <script>
• <select>
• <slot>
• <small>
• <span>
• <strong>
• <sub>
• <sup>
• <svg>
• <template>
• <textarea>
• <time>
• <u>
• <var>
• <video>
• <wbr>
• 自律型カスタム要素

タグの省略

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