概要

<span> は、HTMLにおけるインライン要素の汎用コンテナです。 意味的な役割は持たず、テキストの一部にスタイルを適用したり、JavaScriptで操作するために使用されます。

基本的な使い方

See the Pen <em> / <i>タグについて by 西野, WEBデザイン (西野 誠) (@-WEB-the-vuer) on CodePen.

<p>この文章の中の <span class="highlight">一部だけ</span> に色をつけます。</p>

このように、文章内の一部にクラスやIDを割り当て、CSSやJavaScriptの対象にしたいときに用います。 <div> との違いは、インライン要素である点です。

出力される内容の例

<p>この文章の中の <span class="highlight">一部だけ</span> に色をつけます。</p>

役割とメリット（定義リスト形式）

部分的なスタイル適用

文字列の一部にだけスタイルを当てたいときに使用されます（例：色・太字・背景色）。

インライン構造の維持

文章の流れを壊さずに装飾や識別を加えることができます。

JavaScriptの操作対象

特定のテキスト要素にIDやクラスを付けて、JavaScriptで動的に操作可能です。

マークアップの柔軟性

他の要素と組み合わせて細かい装飾や構造調整ができます。

注意点

• <span> は意味を持たないタグなので、装飾目的以外での多用は避けましょう。
• ブロック要素（<div> や <p> など）を <span> の中に入れるとHTML構文エラーになります。
• アクセシビリティを考慮する場合、意味のあるタグ（例：<strong>, <em>）の方が適切なケースもあります。

まとめ

<span> はインライン要素として最も汎用的に使われるタグのひとつで、主に文章内の一部を装飾・識別する目的で使用されます。 意味を持たないため、構造や意味を正確に伝えたい場合は適切なセマンティック要素と併用しましょう。