Menu
I'd like to do the following, but is it semantically correct?
<button> <div></div> <div></div> </button> 
360
The first thing to be aware of is that a SPAN should never be used as a button. “Elements that only expose the HTML core attributes are represented by the base HTMLElement interface.”
If you want to use a custom button, you'll have to replace the button tag with a div or an input. It looks like a div is what you want in this case. You'll just have to add any necessary event handlers, (for your submit).
Nothing is wrong with placing a div inside a tag. In fact, you can place just about anything inside a tag as long as they are categorized as transparent , except that no descendant may be interactive content (eg: buttons or inputs) or an a element, and no descendant may have a specified tabindex attribute.
What are Semantic Elements? A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: <div> and <span> - Tells nothing about its content. Examples of semantic elements: <form> , <table> , and <article> - Clearly defines its content.
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>.
138
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
