【html】spanタグの使い方!divやpとの違いもわかりやすく解説

htmlを勉強中の皆さん・コーダーのみなさん、こんにちは。都内でフロントエンドエンジニアをしているきむらです。

今回は、htmlのタグの1つであるspanタグについての記事です。何となく文字装飾につかっていることの多いspanですが、意外とdivタグやpタグとの区別がついていないまま使用していたりします。

このブログを読み、spanタグの基礎知識をきっちりとおさえ、効果的で可読性の高いコードを量産できるコーダーに、また一歩近づきましょう。

【初心者向け】CSS(スタイルシート)の書き方を丁寧に解説



htmlのspanタグの概要

さて、ざっくりとspanタグについて押さえておきたいと思います。

まず、使用例です。spanタグは、文字を装飾したい時によく使われるタグです。たとえば、

<div>
普通の文言。
<span style="color: red; font-weight: bold;">赤く強調したい文言。</span>
普通の文言。
</div>



なんて書くと、

普通の文言。赤く強調したい文言。普通の文言。

こんな風にspanタグで囲われた部分を強調することができます。(もちろん強調の仕方はcssで自分で設定することができます)

コーディングをするだけならばこれだけおさえておけばとりあえず問題ないのですが、それだけでは物足らないので少しマニアックな知識を以降では解説したいと思います。

まず、spanの語源ですが、「10年のスパンでものを考える」などと日常で使うのと同じ語源のspanです。辞書で載っている中の単語でしいて翻訳するならば、「しばらくの間」という単語がもっともふさわしいのかもしれません。

要素は、html4の区分でいうと、「インライン要素(文章の一部として扱われる要素)」 になります。インライン要素とは、ラインの中に使われる要素です。他の要素にはブロック要素(一つのかたまりとして認識される要素)というのがあります。

また、html5になって新たに分けられたカテゴリーによると「フロー・コンテンツ(子孫にテキストなどを持つもの)」かつ「フレージング・コンテンツ(段落などの中に含まれる文節・語句など)」になります。

次からはこれらの基礎知識を踏まえた上で、spanタグとdivタグ、それから、pタグとの違いを見ていきましょう。

spanタグとdivタグとの違い

div

divタグは、「division(段とか仕切りの意味)」のdivです。

divタグはhtml4の要素でいうと、ブロック要素になります。ブロックタグは「一つのかたまりとして認識される要素」です。対して、インライン要素は「文章の一部として扱われる要素」です。

そのため、


<div>
 <span>
 </span>
</div>


とdivの中にspanを入れ込むことはできますが、

<span>


<div>
</div>


</span>

と逆を行うことができません。

html5の分類でもそれは変わりません。divは「フロー・コンテント(子孫にテキストなどを持つもの)」ですが、「フレージング・コンテント(段落などの中に含まれる文節・語句など)」ではありません。言い換えると、divタグは「段落などの中に含まれる文節・語句など」ではないということです。

spanタグとdivタグの違い。

spanタグはdivタグの懐に入り込めるけど、divタグはspanタグの中に入り込めないというのを覚えておいてください。

spanタグとpタグとの違い

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」なのでしばらくの間文章あるいは何か要素を装飾したい時に使用。

これを理解していれば十分です。

うまくいかないときは…

なんか思ったようにいかない・・解決方法がわからない・・という方は無料でエンジニアに質問ができるteratail(テラテイル)を利用しましょう。Yahoo!知恵袋のように気軽に質問でき、多くの過去質問も見ることができるので基本的なことであればこちらのサイトだけで解決します。

公式サイト:https://teratail.com

htmlのspanタグについてのまとめ

今回は、spanタグについて基本的な使い方、それから、divタグpタグとの違いについて説明しました。

spanタグは文章を装飾する際に非常に多用するタグです。こちらの記事の内容であなたのspanタグへの理解を少しでも深めていただければ幸いです。









この記事をかいた人

きむら こうじ

都内でフロントエンドエンジニアをしてます。読書と人狼ゲームが大好きです。 積極的にお受けいたしますので、仕事・執筆の依頼はこちらのアドレスにお願いします。 contactwithkimura(アットマーク)gmail.com