やっぱり大切なdiv要素とspan要素！これがないと私のWebは成り立たない！

フロントエンドエンジニアで生きてきている自分にはこの汎用的なタグに何度も何度も助けられてきました。
この記事を書くのに今更感みたいのはありますが、このタグに敬意を表し描いていこうと思います（大袈裟）

セマンティックな構造

HTML5になってより一層セマンティックな構造が推奨されheader要素やfooter要素、article要素、section要素などが構造部分に追加されました。
それ以前は

<div class="header">
  headerのコンテンツ
</div>

このようにdiv要素にclass属性やid属性をつけてその部分を明示的にわかるようにしていました。
ただ、この方法ではheaderという意味があるわけでもないので、グループ化したというだけになります。
現在は

<header>
  headerのコンテンツ
</header>

header要素でしっかり意味をつけることができるようになりました。
これでdiv要素の登場は、、、なくなると思いきや。

div要素

divとはdivision（ディヴィジョン）の略で、分割という意味があります。このタグは分割やグループ化にするのに使われるブロック要素になります。

意味を持たないため、ありとあらゆるところで使うことが可能です。

コンテンツでflexボックスを作りたい場合、div要素で囲みclass属性をつけてCSSでコントロールします。
複数要素をJavaScriptで消したい時など、div要素で囲みclass属性、id属性で要素をコントロールします。

このように意味がないからこそ自由に使うことができるのです！

SEとの会話の中で
SE「ここに要素が出したいんだけど、、」
自分「あーとりあえずdivで囲んで作ってください」
というやりとりがあります。今ではSEは基本的にdiv要素を使いタグの制御をしてくれています。
div要素で制御してくれれば構造的な間違いは大きくぶれることはありません。
実装後、div要素をsection要素などに変更することはありますが、実装スピードが落ちてしまうことはありません。

意味を持たないタグがこんな大きな意味を持っているのです。

span要素

span要素はdiv要素と似ていますが、インライン要素を分割、グループ化するものになります。div要素と違いあまり登場しないかな？と思いますが、とても重要な役割があります。

<p>この部分が<span style="color:red">赤色</span>で表示されます。</p>

この記述ではspan要素で囲んだところが赤で表示される事になります。
ただ、これは見た目だけの問題で重要な強調など意味をもたないのです。ユーザーに対して「赤色」だよって教えているというだけなんです。

細かく意味付けをする場合、太字にしたいからstrong要素を使うのはNGです。その場合はb要素を使います。

では、ここからが難しいのですが、
b要素には太字にするという意味を持っています。
ただ、見た目だけ太字で太字という意味を持たないものがテキストがあった場合（どんな場合か想像してみてください）
その場合はspan要素で囲みCSSで太字にする指定をします。

span要素はこのような細かいときに非常に役に立ちます。

おわりに

div要素とspan要素については意味を持たない事で大きな意味を持っているという優秀なHTMLタグになります。
ただし、div要素を過剰に使用すると、HTMLの構造が複雑化して、メンテナンス性が低下する可能性があります。そのため、div要素の使用は適切に制限することが重要です。
適切に使用される場合、div要素は非常に便利で強力なツールであり、ウェブページのレイアウトの構築に欠かせない存在となっています。