Is it semantically incorrect to put a or inside of a <button>?
I\'d like to do the following, but is it semantically correct?
-
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.
讨论(0)
-
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...
讨论(0)
-
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.
讨论(0)
-
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>.
讨论(0)
-
Span seems legit.
(screenshot from https://validator.w3.org/)
讨论(0)
I\'d like to do the following, but is it semantically correct?
-
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.
讨论(0) -
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...
讨论(0) -
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.
讨论(0) -
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>.讨论(0) -
Span seems legit.
(screenshot from https://validator.w3.org/)
讨论(0)
加载中...
- 热议问题