空のdivはありなのか？

タナビーの高梨です。

皆さんは中身のない空のdivを使うことはありますでしょうか？

空のdivを使うシチュエーションとしては、要素間の隙間を調整するといったことが主たる目的ではないかと思います。

私の場合はmarginやpaddingで調整することが多いのですが、最近WordPressを使っていてふと気になったので、空のdivについてちょっと触れてみたいと思います。

空のdivはありなのか？

WordPressで投稿記事や固定ページをブロックエディタで作っていると、ブロックに「スペーサー」というのがあります。

スペーサーを使うと上下の要素の隙間を調整できるのですが、出来上がったHTMLのソースを見てみると、こんな感じになっています。

<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>

見事に空のdivになっていますね。

HTMLやCSSを勉強したての頃に、「HTMLは文章として意味のあるものを記述し、CSSでそのデザインを調整する」という原則だと覚えた記憶があり、自分の中のDNA的には空divは少し気持ち悪い感じでした。

実際どうなのか調べてみたところ諸説あり、人によって考え方が異なる、という結論に達しました。

空のdivはダメだという説

ダメだという論拠としては要約すると、先ほどの「 HTMLは文章として意味のあるものを記述し、CSSでそのデザインを調整する」ものだから、文章として意味のないdivを記述するのはおかしい、とするものです。

よく例に挙げられるのが、文字サイズを大きくする目的で<h1>など見出しを使ってはいけないよ、というものです。

これにならうと、スペースを確保する目的だけで何も要素のないところに<div>を使ってはいけないよ、となります。

感覚的にこれは何となく言っていることがつじつまが合っていて、ストンと落ちてきます。

空のdivは問題ないという説

一方で、<div>とか<span>はそれ自体に意味がないもの、と定義付けられています。

つまり、解釈の仕方によっては、存在しないことと同意です。

たまたま文章が何も存在しないところを囲っただけだと。

さらにそこに対してCSSでデザインしているのだから特に問題ない。

それが問題であると言うのであれば、CSSでデザインをかけるためにdivで囲うということ自体が否定される。(display:flexにしたい時とか)

というのがおよその理屈になります。

なるほど、そう言われればそんな気もします。

では結論は？

冒頭に書いた通り、人によって考え方が異なる、というのが私の結論です。

ただ、手書きでコーディングする際には空divを使うことは自分ではないかなぁ、と思っています。

でも、WordPressのブロックエディタでは気にせず使っていますので、実はそれほどこだわりがありません。

HTML Living standardをしっかり読み込めば、確固とした意見が持てるのかもしれませんが、たくさんの人が色んな解釈を主張している以上は、そこには実は答えは書いていないということではないでしょうか。

HTML Living standardに「空要素のdivは使っちゃダメ」とか「使ってもOK」と明記してあれば簡単なんですけどね。

でも、ダメと明記された瞬間にWordPressのブロックエディタはどうするんでしょうか？？？