Неправильно ли семантически <div> или <span>внутри <button>?</button></span></div>

Я хотел бы сделать следующее, но разве это семантически правильно?

<button>
  <div></div>
  <div></div>
</button>

Ответ 1

В текущем проекте HTML5 это неверно.

http://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element говорит, что <button> должен содержать только контент -фразатор. Фраза-контент определяется как включающий <span> но не <div>.

Ответ 2

Нет, это неверно. Вы можете проверить его на W3C.

http://validator.w3.org/#validate_by_input+with_options

Вставьте это в прямом вводе, а затем подтвердите.

<!DOCTYPE html>

<button>
  <div></div>
  <div></div>
</button>

Установите кодировку UTF8 и выберите HTML5 при тестировании на W3C.

Ответ 3

Спан кажется законным.

(снимок экрана с https://validator.w3.org/)

Ответ 4

Элементы Div и span не имеют семантики. Это общий блок и встроенные элементы. Единственный вопрос, который вам нужно задать себе о семантике, когда вы их используете, - это элемент с лучшей семантикой для этого контента?.

Тем не менее, неправильно размещать div внутри кнопки по причинам, не связанным с семантикой. В спецификации говорится о модели контента для кнопок:

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

... span - это фразирование контента, но div - нет.

Ответ 5

Я уверен, что это еретично, но если вы хотите проверить, вы всегда можете использовать элементы <span> внутри своей кнопки и создавать их как <div>:

button span {

  display: block;

}

<button>
  <span>I'm a div</span>
  <span>I'm a div</span>
  <span>I'm a div</span>
</button>