Este es un problema resultante de intentar mantener mi semántica html lo más correcta posible.

Tengo un botón principal que realiza una función en la misma página y actúa como etiqueta principal para un contenedor grande que anida un ancla, que redirige a otra página, y una etiqueta div que también actúa como principal para otro botón eso se supone para realizar algunas acciones.

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

Traté de anidar el botón, le di una clase y una identificación y ninguna de las propiedades que aplico a la clase y la identificación se realiza en el botón secundario, más Además, el botón secundario sale completamente del contenedor grande y se coloca en el DOM al igual que es una etiqueta independiente completa que no está anidada por ninguna otra etiqueta.

[Actualizar]

Aparentemente, está prohibido anidar un botón dentro de otro, pero además me gustaría una explicación de por qué el comportamiento del botón anidado no responde a los estilos CSS, y cómo exactamente se está colocando con respecto al DOM ahora, ¿es ahora completamente independiente? etiqueta por sí mismo o qué?

Además, ahora me veré obligado a cambiar la etiqueta del botón principal por cualquier otra etiqueta para poder anidar los botones secundarios dentro. Me gustaría una sugerencia para una etiqueta sustituta para la etiqueta del botón principal, por ejemplo: podría cambiar el botón principal en una etiqueta div,

pero necesito una etiqueta que sea más descriptiva semánticamente (algo que no sea solo un div), tuve ese botón principal en primer lugar para actuar como un botón de alternar para que cuando haga clic se muestre y oculte el más grande contenedor-div.