Is it semantically incorrect to put a <div> or <span> inside of a <button>?
HtmlHtml Problem Overview
I'd like to do the following, but is it semantically correct?
<button>
<div></div>
<div></div>
</button>
Html Solutions
Solution 1 - Html
The current HTML5 draft says it is incorrect.
<http://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element> says that a <button> must contain only Phrasing content. Phrasing content is defined as including <span> but not <div>.
Solution 2 - Html
No it is not valid. You can verify it at W3C.
http://validator.w3.org/#validate_by_input+with_options
Paste this in the direct input and then validate.
<!DOCTYPE html>
<button>
<div></div>
<div></div>
</button>
Set the UTF8 encoding and select HTML5 when testing at W3C.
Solution 3 - Html
I'm sure this is heretical, but if you wanted to validate you could always use <span> elements inside your button and style them like a <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>
This validated today. Whether it will validate in ten years is another story...
Solution 4 - Html
Div and span elements do not have any semantics. They are generic block and inline elements. The only question you need to ask yourself about semantics when you are using them is Is there an element with better semantics for this content?.
That said, it is incorrect to place a div inside a button for reasons unrelated to semantics. The specification says about the content model for buttons:
> Phrasing content, but there must be no interactive content descendant.
… a span is phrasing content but a div is not.
Solution 5 - Html
Solution 6 - Html
button should contain a single div or span, if you wanna Put multiple div or span in a single button, first put every content in a div or span and apply style="Display:flex;" or style="Display:-webkit-box;".