label要素の子要素としてdiv要素を入れるのは問題なのか

######環境
OS:Windows10 Home
エディタ：ATOM 1.46.0 x64

######状況
youtubeにてこちらの動画を参考にコードを入力したのですが、下図のようなエラーが表示されます。

label要素の子要素にdiv要素を入れるのは許可されていません、というように読めるのですがHTMLの書き方として不正なのでしょうか。
（作ったページ自体は問題なく機能しています）

html
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <link rel="stylesheet" href="style.css">
6    <title>Neumorphism</title>
7    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
8  </head>
9  <body>
10    <ul>
11      <li>
12        <label>
13          <input type="checkbox">
14          <div class="icon-box">
15            <i class="fa fa-phone" aria-hidden="true"></i>
16          </div>
17        </label>
18      </li>
19      <li>
20        <label>
21          <input type="checkbox">
22          <div class="icon-box">
23            <i class="fa fa-plane" aria-hidden="true"></i>
24          </div>
25        </label>
26      </li>
27      <li>
28        <label>
29          <input type="checkbox">
30          <div class="icon-box">
31            <i class="fa fa-moon-o" aria-hidden="true"></i>
32          </div>
33        </label>
34      </li>
35      <li>
36        <label>
37          <input type="checkbox">
38          <div class="icon-box">
39            <i class="fa fa-wifi" aria-hidden="true"></i>
40          </div>
41        </label>
42      </li>
43      <li>
44        <label>
45          <input type="checkbox">
46          <div class="icon-box">
47            <i class="fa fa-volume-up" aria-hidden="true"></i>
48          </div>
49        </label>
50      </li>
51      <li>
52        <label>
53          <input type="checkbox">
54          <div class="icon-box">
55            <i class="fa fa-bluetooth-b" aria-hidden="true"></i>
56          </div>
57        </label>
58      </li>
59    </ul>
60  </body>
61</html>

css
1*
2{
3  margin: 0;
4  padding: 0;
5  box-sizing: border-box;
6}
7body
8{
9  display: flex;
10  justify-content: center;
11  align-items: center;
12  min-height: 100vh;
13  background: #ebf5fc;
14}
15ul
16{
17  position: relative;
18  display: flex;
19  justify-content:center;
20  align-items: center;
21  flex-wrap: wrap;
22  border-radius: 10px;
23  padding: 20px;
24  width: 240px;
25  background: #ebf5fc;
26  box-shadow: -2px -2px 5px rgba(255, 255, 255, 1),
27              3px 3px 5px rgba(0, 0, 0, 0.1);
28
29}
30ul li
31{
32  position: relative;
33  list-style: none;
34  text-align: center;
35  margin: 15px;
36}
37ul li label
38{
39  position: relative;
40}
41ul li label input[type="checkbox"]
42{
43  position: absolute;
44  opacity: 0;
45  cursor: pointer;
46}
47ul li label .icon-box
48{
49  width: 60px;
50  height: 60px;
51  background: #ebf5fc;
52  display: flex;
53  justify-content: center;
54  align-items: center;
55  box-shadow: -2px -2px 5px rgba(255, 255, 255, 1),
56              3px 3px 5px rgba(0, 0, 0, 0.1);
57  border-radius: 10px;
58}
59ul li label .icon-box .fa
60{
61  font-size: 30px;
62  color: #6a9bd8;
63}
64ul li label input[type="checkbox"]:checked ~ .icon-box
65{
66  box-shadow: inset -2px -2px 5px rgba(255, 255, 255, 1),
67              inset 3px 3px 5px rgba(0, 0, 0, 0.1);
68}
69ul li label input[type="checkbox"]:checked ~ .icon-box .fa
70{
71  transform: scale(0.95);
72}
73

行動規範の内容に同意します

回答2件

ベストアンサー

kei344さんの回答にある通り、<div>は使えません。
ただし<span>だとOKのようなので試してみてください。

投稿2020/05/24 15:06

new1ro

総合スコア4528

nanasino

2020/05/25 08:34

ご指導いただきありがとうございます。実際に<span>で置き換えてみたところ、エラーも解消され問題なく動作しています。

行動規範の内容に同意します

HTMLの書き方として不正なのでしょうか。

そうですね。

【<label> - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/label#Technical_summary

許可されている内容記述コンテンツ、ただし、子孫に label 要素を持つことはできない。そのラベルが示すもの以外のラベル付け可能コントロールを入れてはならない。

【#記述コンテンツ | コンテンツカテゴリー - 開発者ガイド | MDN】
https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Content_categories#Phrasing_content

このカテゴリーに属する要素: <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> および通常の文字列です（空白文字だけで構成されたものを除く）。