¿Es correcto poner un div dentro de un ancla?

He oído que poner un elemento de bloque dentro de un elemento en línea es un pecado HTML:

<a href="http://www.mydomain.com"><div>
What we have here is a problem. 
You see, an anchor element is an inline element,
and the div element is a block level element.
</div></a>

Pero, ¿qué pasa si da estilo al ancla exterior como display:blocken la hoja de estilo? ¿Todavía está mal? La especificación HTML 4.01 en elementos de nivel de bloque e inline parece pensar que sí:

Las hojas de estilo proporcionan los medios para especificar la representación de elementos arbitrarios, incluido si un elemento se representa como bloque o en línea. En algunos casos, como un estilo en línea para elementos de lista, esto puede ser apropiado, pero en general, se desaconseja a los autores anular la interpretación convencional de elementos HTML de esta manera.

¿Alguien tiene más consejos sobre este tema?

Dependiendo de la versión de HTML que esté atendiendo:

• HTML 5 establece que el<a>elemento "puede estar envuelto alrededor de párrafos enteros, listas, tablas, etc., incluso secciones completas, siempre que no haya contenido interactivo (por ejemplo, botones u otros enlaces)".

• HTML 4.01 especifica que los<a>elementos solo pueden contener elementos en línea . A<div>es un elemento de bloque , por lo que puede no aparecer dentro de un<a>.

  Por supuesto, tiene la libertad de diseñar un elemento en línea de modo que parezca un bloque, o incluso diseñar un bloque para que se procese en línea. El uso de los términos inliney blocken HTML se refiere a la relación de los elementos con la estructura semántica del documento, mientras que los mismos términos en CSS están más relacionados con el estilo visual de los elementos. Si hace que los elementos en línea se muestren en bloque, está bien.

  Sin embargo, debe asegurarse de que la estructura del documento todavía tenga sentido cuando CSS no está presente, por ejemplo, cuando se accede a través de una tecnología de asistencia como un lector de pantalla, o de hecho cuando es examinado por el poderoso Googlebot.

No, no validará, pero sí, generalmente funcionará en los navegadores modernos. Dicho esto, use un espacio dentro de su ancla y configúrelo display: blocktambién, eso definitivamente funcionará en todas partes, ¡y se validará!

El documento W3C no usa conceptos como mal y pecado , pero sí usa aquellos como proporcionar los medios , puede ser apropiado y desalentado .

En realidad, en el segundo párrafo de la sección 4 , la especificación 4.01 detalla sus palabras de la siguiente manera

Las palabras clave "DEBE", "NO DEBE", "REQUERIDO", "DEBE", "NO DEBE", "DEBE", "NO DEBE", "RECOMENDARSE", "PUEDE" y "OPCIONAL" en este documento. para ser interpretado como se describe en [RFC2119]. Sin embargo, para facilitar la lectura, estas palabras no aparecen en mayúsculas en esta especificación.

Con eso en mente, creo que la declaración definitiva está en 7.5.3 Elementos de nivel de bloque e inline , donde dice

En general, los elementos en línea pueden contener solo datos y otros elementos en línea.

La condición "en general" parece introducir suficiente ambigüedad para decir que HTML 4.01 permite que los elementos en línea contengan elementos de bloque.

Ciertamente, CSS2 tiene un valor de propiedad de visualización, bloque en línea , que parece ser adecuado para el propósito que usted describe. No estoy seguro de si alguna vez fue ampliamente compatible, pero parece que alguien anticipó la necesidad de ese tipo de comportamiento.

El DTD parece ser menos indulgente aquí, pero el texto de la DTD difiere de la especificación:

La especificación HTML 4.01 incluye restricciones sintácticas adicionales que no se pueden expresar dentro de los DTD.

En otro comentario, sugiere que desee activar un bloque envolviéndolo en un ancla. No creo que HTML lo prohíba, y CSS claramente lo permite. Entonces, para responder la pregunta del título sobre si alguna vez es correcto, digo que sí. Según los estándares, a veces es correcto.

Con la especificación HTML5 ... Ahora es posible poner un elemento a nivel de bloque dentro de un elemento en línea. Así que ahora es perfectamente apropiado poner un 'div' o 'h1' dentro de un elemento 'a'.

No se puede poner <div>dentro <a>: no es HTML (X) válido.

Aunque diseñe un lapso con pantalla: bloque, aún no puede colocar elementos de nivel de bloque dentro de él: el (X) HTML todavía tiene que obedecer al (X) HTML DTD (cualquiera que use), sin importar cómo sea el CSS Altera las cosas.

El navegador probablemente lo mostrará como desee, pero eso no lo hace correcto.

Hay un DTD para HTML 4 en http://www.w3.org/TR/REC-html40/sgml/dtd.html . Este DTD es la forma de especificación procesable por máquina, con la limitación de que un DTD gobierna XML y HTML 4, especialmente el sabor "transitorio", permite muchas cosas que no son XML "legales". Aún así, considero que se trata de codificar la intención de los especificadores.

<!ELEMENT A - - (%inline;)* -(A)       -- anchor -->

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

<!ENTITY % fontstyle "TT | I | B | BIG | SMALL">

<!ENTITY % phrase "EM | STRONG | DFN | CODE | SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >

<!ENTITY % special "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">

<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">

Interpretaría que las etiquetas enumeradas en esta jerarquía son el total de etiquetas permitidas.

Si bien la especificación puede decir "elementos en línea", estoy bastante seguro de que no tiene la intención de que pueda evitar la intención declarando el tipo de visualización de un elemento de bloque está en línea. Las etiquetas en línea tienen una semántica diferente, independientemente de cómo pueda abusar de ellas.

Por otro lado, me parece intrigante que la inclusión de specialparece permitir Aelementos de anidación . Probablemente hay una redacción fuerte en la especificación que no lo permite, incluso si es XML sintácticamente correcto, pero no lo seguiré más allá, ya que no es el tema de la pregunta.

Los elementos de nivel de bloque como <div>pueden ser envueltos por <a>etiquetas en HTML5. Aunque a <div>se considera un contenedor / envoltorio para el contenido de flujo y <a>se considera contenido de flujo de acuerdo con MDN . Semánticamente, puede ser mejor crear elementos en línea que actúen como elementos de nivel de bloque.

Si desea evitar el problema semántico de colocar divs dentro de las etiquetas de anclaje, simplemente coloque la etiqueta de anclaje en el mismo nivel que los divs, envuélvalos todos con un contenedor con posición: relativo, haga su posición de etiqueta de anclaje: absoluta y amplíelo a llenar el recipiente Además, si no está al final del flujo de contenido, asegúrese de colocar un índice z allí para colocarlo sobre el contenido.

Como sugerí, he agregado un código de marcado:

<div class="div__container>
  <div class="div__one>
  </div>
  <div class="div__two">
  </div>
  <a href="#"></a>
</div>

Y el css:

.div__container {
  position: relative; 
}
.div__container a {
  position: absolute;
  top: 0;
  bottom: 0;      
  left: 0;
  right: 0;
  z-index: 999;
}

Si vas a hacer el esfuerzo de hacer un <a>bloque, ¿por qué no ponerlo <a>dentro del div, siendo un elemento de bloque te dará el mismo efecto?

Si lo cambia a un elemento de estilo de bloque, entonces no, ya no es 'incorrecto', pero probablemente no se validará. Pero no tiene mucho sentido hacer lo que estás haciendo. Debe mantener la etiqueta de anclaje como un elemento de nivel de bloque sin div interno, o colocar el div en el exterior.

Está incorrecto. Usa un lapso .

Creo que la mayoría de las veces cuando las personas hacen esta pregunta, han creado un sitio con solo divs, y ahora uno de los div debe ser un enlace.

Vi a alguien usar una imagen vacía transparente, PNG, dentro de una etiqueta de anclaje solo para hacer un enlace dentro de un div, y la imagen tenía el mismo tamaño que el div.

Bastante triste en realidad ... pero funciona ...

puede lograr esto agregando ":: before" Pseudo-elemento

Truco CSS puro;)

a:before{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0,0,0,0);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/250" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>
</div>

Solo como un FYI.

Si su objetivo es hacer que su div sea clicable, puede usar jQuery / Java Script.

Define tu div así:

<div class="clickableDiv" style="cursor:pointer">
  This is my div. Try clicking it!
</div>

Su jQuery se implementaría así:

 <script type="text/javascript">

    $(document).ready(function () {

        $("div.clickableDiv").click(function () {
            alert("Peekaboo"); 
        });
    });
</script>

Esto también funcionaría para múltiples divs, según el comentario de Tom en este hilo