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

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

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

Ответ 2

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

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

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

<!DOCTYPE html>

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

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

Ответ 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>