プログラミング勉強日記

2020年10月12日
HTMLでコードを書くときにdivタグをよく使ってしまっていたがよくないと知ったのでその理由をまとめる。

そもそもdivタグとは

　divタグはdivisionの略語で、<div>で囲った部分をブロックレベル要素としてグループ化することができる。divタグを使うことでCSSでレイアウトをそろえることができる。

divタグを多用するのはよくない理由

Webページの読み込み速度が低下
CSSでスタイルを変えるのが大変になる
JavaScriptで要素を参照するときの読み込み速度が低下

　divタグを多用されている場合は、ブラウザの技術が各要素を特定するのに時間がかかるので、Webページの読み込みの速度が遅くなる。
　また、idやclass属性を増えるのでCSSでスタイルを変えることも難しくなってしまう。また、JavaScriptで要素を参照する際にも処理能力が必要になるので、処理が遅れることがある。

正しいdivタグの使い方

分割の目的や要素を集合化したいときに使用する
複数の要素が並んでいる場合にまとめる
他のタグを使う

　divタグではなくulタグやliタグを使って表現することでも簡潔に表すことができる。そのため、用途にあったタグの使い方をすることが大切。

参考文献

divの解説
 HTMLでdivが多いソースをおすすめしない理由を現役デザイナーが解説【初心者向け】