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

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

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

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

spanタグ

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

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

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

divタグとspanタグの違い

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

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

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

最後に

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

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

それでは、また!