htmlを勉強中の皆さん・コーダーのみなさん、こんにちは。都内でフロントエンドエンジニアをしているきむらです。
今回は、htmlのタグの1つであるspanタグについての記事です。何となく文字装飾につかっていることの多いspanですが、意外とdivタグやpタグとの区別がついていないまま使用していたりします。
このブログを読み、spanタグの基礎知識をきっちりとおさえ、効果的で可読性の高いコードを量産できるコーダーに、また一歩近づきましょう。
htmlのspanタグの概要
さて、ざっくりとspanタグについて押さえておきたいと思います。
まず、使用例です。spanタグは、文字を装飾したい時によく使われるタグです。たとえば、
[html]
<div>
普通の文言。
<span style=”color: red; font-weight: bold;”>赤く強調したい文言。</span>
普通の文言。
</div>
[/html]
なんて書くと、
普通の文言。赤く強調したい文言。普通の文言。
こんな風にspanタグで囲われた部分を強調することができます。（もちろん強調の仕方はcssで自分で設定することができます）
コーディングをするだけならばこれだけおさえておけばとりあえず問題ないのですが、それだけでは物足らないので少しマニアックな知識を以降では解説したいと思います。
まず、spanの語源ですが、「10年のスパンでものを考える」などと日常で使うのと同じ語源のspanです。辞書で載っている中の単語でしいて翻訳するならば、「しばらくの間」という単語がもっともふさわしいのかもしれません。
要素は、html4の区分でいうと、「インライン要素（文章の一部として扱われる要素）」 になります。インライン要素とは、ラインの中に使われる要素です。他の要素にはブロック要素（一つのかたまりとして認識される要素）というのがあります。
また、html5になって新たに分けられたカテゴリーによると「フロー・コンテンツ（子孫にテキストなどを持つもの）」かつ「フレージング・コンテンツ（段落などの中に含まれる文節・語句など）」になります。
次からはこれらの基礎知識を踏まえた上で、spanタグとdivタグ、それから、pタグとの違いを見ていきましょう。
spanタグとdivタグとの違い
divタグは、「division（段とか仕切りの意味）」のdivです。
divタグはhtml4の要素でいうと、ブロック要素になります。ブロックタグは「一つのかたまりとして認識される要素」です。対して、インライン要素は「文章の一部として扱われる要素」です。
そのため、
[html]
<div>
<span>
</span>
</div>
[/html]
とdivの中にspanを入れ込むことはできますが、
[html]
<span>
<div>
</div>
</span>
[/html]
と逆を行うことができません。
html5の分類でもそれは変わりません。divは「フロー・コンテント（子孫にテキストなどを持つもの）」ですが、「フレージング・コンテント（段落などの中に含まれる文節・語句など）」ではありません。言い換えると、divタグは「段落などの中に含まれる文節・語句など」ではないということです。
spanタグとdivタグの違い。
spanタグはdivタグの懐に入り込めるけど、divタグはspanタグの中に入り込めないというのを覚えておいてください。
spanタグとpタグとの違い
さて、次にspanタグとpタグの違いです。
pタグの「p」は「Paragraph（段落）」の頭文字です。
html4の要素で言うと、spanタグとpタグは同じインライン要素に分類されます。
(*記載に誤りがありました。pタグはブロック要素です。ご指摘いただいた方、ありがとうございます)
pタグは「フロー・コンテント（子孫にテキストなどを持つもの）」のみですが、spanタグは「フロー・コンテント（子孫にテキストなどを持つもの）」かつ「フレージング・コンテント（段落などの中に含まれる文節・語句など）」というdivと同じ違いが出てきます。そのため、divタグと同じようにspanはpタグの懐に入り込めるけど、pタグはspanタグの中に入り込めません。
これだけだと<div>タグと何も変わりはないですよね。なので語源に立ち返りましょう。
divタグは「division（仕切り）」の「div」なので、ページ内にブロックを作りたい時に使用。
<p>は「paragraph（段落）」の「p」なのでページ内で段落を作る際に使用。
<span>は、「しばらくの間」の意味の「span」なのでしばらくの間文章あるいは何か要素を装飾したい時に使用。
これを理解していれば十分です。
htmlのspanタグについてのまとめ
今回は、spanタグについて基本的な使い方、それから、divタグpタグとの違いについて説明しました。
spanタグは文章を装飾する際に非常に多用するタグです。こちらの記事の内容であなたのspanタグへの理解を少しでも深めていただければ幸いです。
