span 要素は「意味のついていない“文字レベルの小さな箱”」
まずイメージから。
<div> が「ブロック全体をまとめる大きめの箱」だとしたら、<span> は 「文章の一部分だけを囲う、小さな箱」 です。
どちらも「特別な意味を持たない汎用コンテナ」ですが、
<div> はブロック要素（段落やカードなどの“かたまり”用）<span> はインライン要素（文章の中の“部分”用）
という違いがあります。
「この一部分だけ色を変えたい」
「この一部分だけ JavaScript で書き換えたい」
そんなときに、<span> がちょうどいい“つまみ”になります。
span の基本：文章の一部をピンポイントで囲う
例：名前の部分だけ色を変える
<p>
こんにちは、<span class="name">山田太郎</span>です。
</p>
CSS:
.name {
color: #e91e63;
font-weight: bold;
}
ここでやっていることは、
段落全体は <p>
その中の「名前」の部分だけを <span> で囲む
見た目の変更は CSS で .name に対して行う
という分担です。
重要なのは、<span> 自体には「意味」がない ということです。
「ここが名前です」という意味を本当に伝えたいなら、<span> ではなく <span itemprop="name"> のように属性を足したり、
場合によっては別のセマンティックな要素を検討します。
ただ、実務では
「とりあえずここだけスタイルを変えたい・JS で触りたい」
という用途で <span> を使うことがとても多いです。
div と span の違いをしっかり押さえる
「ブロックか」「文章の中か」
よくある混乱ポイントなので、ここを深掘りします。
<div>
ブロック要素。前後で改行され、ひとかたまりとして扱われる。
レイアウトの箱・カード・セクションの中のグループなどに使う。
<span>
インライン要素。文章の流れの中に溶け込む。
文の一部だけを囲ってスタイルや JS の対象にしたいときに使う。
悪い例（span をブロックっぽく使う）：
<span class="box">
<h2>タイトル</h2>
<p>本文です。</p>
</span>
これは構造として不自然です。<h2> や <p> はブロック要素なので、
本来は <div> や <section> の中に入れるべきです。
正しい方向性：
<div class="box">
<h2>タイトル</h2>
<p>本文です。</p>
</div>
逆に、文章の中で一部分だけを囲うのに <div> を使うのも不自然です。
悪い例：
<p>こんにちは、<div>山田太郎</div>です。</p>
これは段落の途中でブロック要素を挟んでしまっているので、
ブラウザが勝手に構造を補正してしまいます。
このあたりの違いを、
「div は段落レベルの箱、span は文字レベルの箱」
と覚えておくと整理しやすいです。
span と CSS：細かい装飾や強調に使う
例：文中のキーワードだけハイライトする
<p>
このサイトでは、<span class="keyword">JavaScript</span> と
<span class="keyword">HTML</span> の基礎を学ぶことができます。
</p>
CSS:
.keyword {
background-color: yellow;
padding: 0 0.2em;
}
ここでは、
「キーワード」という意味で .keyword クラスを付け、<span> で囲んだ部分だけ背景色を付けています。
<strong> や <em> のような「意味のある強調タグ」もありますが、
単に「見た目だけ変えたい」「意味としての強調ではない」
というときには <span>＋クラスで表現するのがよくあります。
span と JavaScript：ピンポイントで値を差し替える
例：ユーザー名だけ動的に変える
HTML：
<p>
ようこそ、<span id="userName">ゲスト</span> さん。
</p>
JavaScript：
const userNameSpan = document.querySelector("#userName");
// 例えばログイン後に取得したユーザー名を表示する
userNameSpan.textContent = "MONO";
ここで <span id="userName"> は、
「ユーザー名を表示する場所」という“つまみ”になっています。
段落全体を差し替える必要はなく、
一部分だけを変えたいときに <span> は非常に便利です。
同じように、
価格・残り時間・カウント数など、
「文中の一部だけが動的に変わる」場面でよく使われます。
span を乱用しないための感覚づくり
「意味のあるタグで足りないときの最後の手段」
<span> は便利なので、
何でもかんでも <span> で囲みたくなりますが、
それをやると HTML の意味がどんどん薄くなります。
例えば、全部をこう書いてしまうと：
<span class="title">自己紹介</span>
<span class="text">こんにちは。山田太郎です。</span>
見た目は CSS でどうにでもできますが、
HTML としては「これは見出し」「これは段落」という情報が失われます。
本来はこう書くべきです。
<h1>自己紹介</h1>
<p>こんにちは。山田太郎です。</p>
その上で、
どうしても文中の一部だけを装飾したい・操作したいときに<span> を使います。
「意味のあるタグで表現できない部分だけ、最小限を span で囲う」
この感覚を持てると、<span> の使い方が一気に上手くなります。
初心者として「span 要素」で掴んでほしいこと
<span> は、
「特別な意味を持たない、インライン（文字レベル）の小さな箱」 です。
文章の一部だけをスタイル変更・JS 操作したいときに使う
div はブロックの箱、span は文中の箱、と役割を分けて考える
見出しや段落の代わりに span を使わない（意味のあるタグを優先）
CSS ではクラスと組み合わせて細かい装飾に使う
JS では id やクラスを付けて、値を差し替える“つまみ”として使う
あなたが <span> を書くときに、
「この部分、本当に“文中の一部だけ”を囲いたい場面か？」
「h や p では表現できない“部分的な対象”か？」
と一度考えられるようになったら、
もう span を“なんとなくの装飾タグ”ではなく、
“意図のあるピンポイントの箱”として扱えている状態です。