【HTML】spanタグとは？divタグとの違いは？

こんにちは！CODE CLUB965のKです！

今回はspanタグについて解説したいと思います。

divタグと同じくspanタグもよく使うので使い所を知っておきましょう！
divタグについては以前に記事にしていますので参考にして下さい。

spanタグ

<div>~</div>と同じく、<span>~</span>のようにタグで囲んで使います。

段落を表す pタグや、見出しを表す h1タグと違って divタグも spanタグもそれ自体に意味はありません。

タグで囲んだ範囲をcssで調整したりとデザインを変えたいときに使います。

divタグとspanタグの違い

違いとして、divタグはブロックレベルの要素としてグループ化されるので、見出しや段落、リストなどとみなされ、前後に「改行」が入ります。

一方「spanタグ」はインライン要素で文章の一部として利用されるので前後に「改行」が入りません。

もっと具体的にどう違うか詳細を知りたい方は、以下のサイトが分かりやすかったので参考にどうぞ。

divとspanの違いは？使い分け方を初心者向けに解説

分かりづらいHTMLの「div」と「span」の意味と違いについて初心者の方でも分かるように図解しました。

サルワカ | サルでも分かる図解説明マガジン

最後に

spanタグについて紹介しましたが、インライン要素とブロック要素をまず何か理解しましょう。
そして、html が div や span だらけにならないように記述すると管理が楽になります。

divとspanを要領よく使って、なるべくすっきりとしたhtmlを書けるようにしましょう！

それでは、また！

Follow me!