Должен ли <button>содержать вложенный элемент DOM или нет? - PullRequest
Новая
       60

Должен ли <button>содержать вложенный элемент DOM или нет?

0 голосов
/ 29 октября 2018

Я не осознавал, плохо это или нет, в соответствии с правилами W3C о семантической записи HTML - как мы должны писать элемент button с потомками?

В пути, как этот: 

<button>
 <div>
   <span>'hi'</span>
 </div>
</button>

или только это: 

<button>'hi'</button>

Ответы [ 4 ]

0 голосов
/ 29 октября 2018

Элемент button может содержать элементы, которые формулируют контент , но при этом не являются интерактивным контентом . Другими словами: элементы, которые используются на уровне внутри параграфа (иногда называемые встроенными элементами ), и которые не допускают взаимодействия с пользователем.

Например, это означает, что он может содержать span элементов, но не div элементов. Так что это действительно: 

<button>
  <span>'hi'</span>
</button>
0 голосов
/ 29 октября 2018

Я проверил ваш код в W3C Validator и отображается ошибка Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.)

W3C Validator result

0 голосов
/ 29 октября 2018

Вложенные теги в пределах <button> имеют значение , недопустимо и возвращает следующее при проверке :

Элемент div в этом контексте не разрешен как дочерний элемент button.

Не вложенные теги - правильный путь.

Смотрите сами, если хотите. Для проверки я использовал следующий HTML: 

<!DOCTYPE html>
<html lang="en"> 
<head> 
<title>Button test HTML</title> 
</head>
<body>
<button>
<div>
   <span>'not valid'</span>
 </div>
</button>
<button>Valid</button>
</body>
</html>
0 голосов
/ 29 октября 2018

По существу, спецификация этого не допускает.

Это может сработать для вас, но это не лучшая практика.

Как видите здесь кнопка не должна быть потомком интерактивного контента.

Вы также можете подтвердить свой html в здесь

...