Is It Semantically Incorrect to Put a <Div> or <Span> Inside of a <Button>

placing button tag inside span tag is right way of placement

You can of course use CSS to render the span as a block element, or even an inline-block if that is what you need.

.yourSpanClass {
    display: block;
}

.yourSpanClass {
    display: inline-block;
}

Though, i'd advice you to simply use a div if you have access to the HTML.

Supported browsers: http://caniuse.com/inline-block

Should button contain nested DOM element or not?

I tested your code in W3C Validator & the error shown is

Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.)

Is it bad practice to use spans as buttons ? W3Schools is doing that

Is it bad practice to use spans as “buttons”?

Yes. They are, by default:

• Not announced as being interactive by screen readers
• Not in the tab order so are inaccessible to keyboard users

It's possible to hack around that by use of tabindex and ARIA, but using a real <button> is much simpler and better supported.

You can get a much deeper dive into this subject from Inclusive Components by Heydon Pickering.

W3C is doing that

No, they aren't.

W3Schools is a low-quality advert-ridden tutorial site that happens to have good SEO because they've been around forever.

They've picked a name which lets them be confused with the W3 Consortium. Note, however, that "Consortium" and "Schools" are not the same word!

Weird div in button behaviour

You can't use <div> inside a <button>. W3 HTML docs says that a <button> must contain only phrasing content. Phrasing content is defined as including <span> but not <div>.

It is also incorrect when validated: http://validator.w3.org/#validate_by_input+with_options

SOURCE: Is it semantically incorrect to put a <div> or <span> inside of a <button>?

---

Sidenote: You should also clean up your code. For example linear-gradient can't be used as background-color, but should be used as background-image

div not staying inside button

Per the comment of isherwood:

A block-level element has no business in a button. What's its
purpose here? Use a span instead and set it to inline-block if
necessary.

---

Related Topics