先生と生徒の会話形式で理解しよう

生徒

「HTMLのspanタグって、いつ使えばいいのか分からないです。」

先生

「spanタグは、文章の一部だけを目立たせたり、意味づけしたいときに使います。」

生徒

「pタグと何が違うんですか？」

先生

「pタグは文章全体、spanタグは文章の中の一部分、という違いがあります。」

1. HTMLのspanタグとは？

HTMLのspanタグは、文章の中の一部分を囲むためのタグです。段落全体を表すpタグとは違い、spanタグは文章の流れを止めずに使えるのが特徴です。このような性質をインライン要素と呼びます。インラインとは、文字と同じ並び方をする、という意味です。

spanタグ自体には特別な見た目はありませんが、後から色を変えたり、強調したりするための目印として使われます。

2. インライン要素という考え方

インライン要素とは、文章の途中にそのまま入り込める要素のことです。紙の本に例えると、ペンで一部の文字に線を引くようなイメージです。行が改まることはなく、文章の流れの中で自然に使えます。

spanタグは、このインライン要素の代表的な存在で、初心者が最初につまずきやすいポイントでもあります。

spanタグは、強調したい文字や意味を持たせたい言葉だけを囲んで使います。文章全体ではなく、一部分だけに使うことが大切です。


<p>今日は<span class="text-danger">とても大切</span>なお知らせがあります。</p>

ブラウザ表示

この例では、「とても大切」という部分だけをspanタグで囲んでいます。これにより、その部分だけを特別に扱えるようになります。

spanタグは、注意書き、金額、名前、キーワードなど、文章の一部を区別したいときによく使われます。文章の意味を壊さずに、視覚的な変化を加えられるのが大きな利点です。


<p>料金は<span class="fw-bold">3000円</span>です。</p>

ブラウザ表示

このように、重要な数字だけを強調することで、読み手に伝わりやすくなります。

pタグは文章全体をまとめるためのタグで、spanタグは文章の中の一部分を扱うタグです。役割が違うため、同じ目的で使うことはありません。文章を入れる箱がpタグ、その箱の中で目印を付けるのがspanタグ、というイメージを持つと理解しやすくなります。


<p>この<span class="text-primary">商品</span>は期間限定です。</p>

ブラウザ表示

spanタグは見た目を整えるためだけでなく、文章構造を分かりやすくする役割もあります。特定のキーワードをspanタグで囲み、適切に装飾することで、読み手が重要な部分をすぐ理解できます。

ただし、検索エンジン向けに無理に使いすぎるのは逆効果です。自然な文章の中で、必要な部分だけに使うことが大切です。

spanタグは便利ですが、意味もなく多用するとHTMLが読みにくくなります。見た目を変えたいからといって、文章全体をspanタグで囲むのは間違いです。あくまで「部分的に使う」という基本ルールを忘れないようにしましょう。

正しく使えば、spanタグは文章表現を分かりやすくする心強い味方になります。