<button> should be transparent content model like <a>

[Wes1262]

As in subject, I think there should be no difference between the two tags.

Browsers (tested latest Chrome, Firefox, Safari) support this pretty well already - subtree is not fixed. E.g. this is not touched and rendered correctly as specified:

<button><p>Label</p></button>

HTML should really try to keep up and be more flexible while still being unambiguous. Sometimes it is really hard to understand why certain limitations are still imposed. For example I often wonder why I cannot wrap tag structures with arbitrary tags like <ul><div><li>item</li></div></ul> like I would do with microdata and with arbitrary HTML.

Thank you in advance.

[zcorpan]

Can you elaborate on the use case? Why do you want to use paragraphs in a button?

[Wes1262]

For the same reason <a> allows any content. But for web apps, not websites.

<button>
    <article>
        <h1>....</h1>
        <p>Product desc...</p>
        <p role="note">Click to add to cart</p>
        <dl><dt>Price</dt><dd>...</dd><dt>Size</dt><dd>...</dd></dl>
        <img ...>
    </article>
</button>

[domenic]

It sounds like what you want is a clickable article, not a button that contains an article. To make a clickable article, add a handler for the click event to your <article> element.

[Wes1262]

So why did you guys even bother with <a>? just add role="button" to all the things, use microdata and let html die, is this what you are saying?

[zcorpan]

For a, that was paving a cowpath. Can you show any pages that are using button in this manner?

[Wes1262]

I'm going to start my own cowpath then, with <button>s all over the place, blackjack and everything :-P No of course you won't find many sites doing that, but again, it's a restriction that shouldn't be there, like most of HTML's restrictions.

[domenic]

It seems you're disagreeing with the general concept of semantics (i.e. restrictions on how to use elements). That's your prerogative, but in that case I'm not sure we're going to make much progress in this issue. Let's close this, although you can feel free to continue discussing in the closed thread.

[Wes1262]

For example regarding the list example, <li> would belong to the closest <ul or ol> ancestor, rather than being forced to be direct child of that element. How is that not semantic?

We were not going to make progress anyway, if you intended to continue with patronizing answers.

If I want the "add to cart" <button> to contain the product's <article>, with its thumbnail, the short description and everything, why am I not allowed to do that?