¿Puedo anidar el botón dentro de otro botón?

Este es un problema que resulta de tratar de mantener mi semántica html lo más correcta posible.

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

 

Intenté 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 realizan en el botón secundario, más. Además, el botón secundario se saca completamente del contenedor grande y se coloca en el DOM al igual que es una etiqueta independiente completa no anidada por ninguna otra etiqueta.

[Actualizar]

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

También ahora me veré obligado a cambiar la etiqueta del botón principal en cualquier otra etiqueta para que pueda 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 más que solo un div), tuve ese botón principal en primer lugar para actuar como un botón de alternar para que cuando lo haga clic en él se muestre y se oculte el más grande contenedor-div

Esto no es válido En la recomendación WC3 para el elemento de botón puede leer:

Modelo de contenido:
Fraseo de contenido, pero no debe haber descendiente de contenido interactivo. [fuente: wc3.org ]

El contenido interactivo incluye:

  • un
  • audio (si el atributo de controles está presente)
  • botón
  • empotrar
  • iframe
  • img (si el atributo de mapa de uso está presente)
  • entrada (si el atributo de tipo no está en el estado oculto)
  • keygen
  • etiqueta
  • objeto (si el atributo usemap está presente)
  • seleccionar
  • textarea
  • video (si el atributo de controles está presente)

No puedes hacer esto. Un botón no está destinado a contener otros elementos. Sin embargo, puede darle un estilo a un elemento div para que tenga la apariencia y el tacto de un botón, así es como se ve con bootstrap:

             
outer button
Intereting Posts