Can I nest button inside another button?

Question

This is a problem resulting from trying to keep my html semantics as correct as possible.

I have a parent button that does both a function in the same page, and acts as parent tag for a big container that nests an anchor -- which redirects to another page -- and a div tag that also acts as a parent for another button that is suppose to perform some actions.

<button>   <div id="the-most-big-container"     <a href="http://www.RedirectMeToAnotherPage.com"></a>    <div>      <button> do some action </button>    </div>   </div> </button> 

I tried nesting the button, gave it a class and id and none of the properties that I apply to the class and the id get performed on the child button, more Also the child button gets completely out of the big container and lays itself in the DOM just like it is a complete independent tag not nested by any other tag.

[Update]

Apparently this is prohibited to nest a button inside another, but furthermore I would like an explanation to why the nested button's behavior being not responsive to the css styles, and how exactly it is laying itself regarding the DOM now, is it now a complete independent tag by itself or what ?

Also now I will be forced to change the parent button tag into any other tag so that I can nest child buttons inside. I would like a suggestion for a substitute tag for the parent button tag ex: I could change the parent button into a div tag,

but I need a tag that would be more descriptive semantically (something other than just a div),I had that parent button in the first place to act as a toggle button so that when I click it it displays and hides the most-big-container-div.

Answer 1

It is not valid to put a <button> inside a <button> element.
In the W3C recomendation for the button element you can read:

Content model:
Phrasing content, but there must be no interactive content descendant.

[source: w3.org (emphasis mine)]

Interactive content includes:

• a
• audio (if the controls attribute is present)
• button
• embed
• iframe
• img (if the usemap attribute is present)
• input (if the type attribute is not in the hidden state)
• keygen
• label
• object (if the usemap attribute is present)
• select
• textarea
• video (if the controls attribute is present)