Mettre un div à l'intérieur d'une ancre est-il toujours correct?

J'ai entendu dire que mettre un élément de bloc à l'intérieur d'un élément en ligne est un péché 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>

Mais qu'en est-il si vous stylisez l'ancre extérieure comme display:blockdans la feuille de style? Est-ce toujours faux? La spécification HTML 4.01 sur les éléments de niveau bloc et en ligne semble le penser:

Les feuilles de style permettent de spécifier le rendu des éléments arbitraires, notamment si un élément est rendu en bloc ou en ligne. Dans certains cas, comme un style en ligne pour les éléments de liste, cela peut être approprié, mais de manière générale, les auteurs sont découragés de remplacer l'interprétation conventionnelle des éléments HTML de cette manière.

Quelqu'un a-t-il d'autres conseils à ce sujet?

Selon la version de HTML à laquelle vous répondez:

• HTML 5 indique que l'<a>élément "peut être enroulé autour de paragraphes entiers, de listes, de tableaux, etc., même de sections entières, tant qu'il n'y a pas de contenu interactif à l'intérieur (par exemple des boutons ou d'autres liens)".

• HTML 4.01 spécifie que les<a>éléments ne peuvent contenir que des éléments en ligne . A<div>est un élément de bloc , il peut donc ne pas apparaître à l'intérieur d'un<a>.

  Bien sûr, vous êtes libre de styliser un élément en ligne de telle sorte qu'il semble être un bloc, ou bien de styliser un bloc afin qu'il soit rendu en ligne. L'utilisation des termes inlineet blocken HTML fait référence à la relation entre les éléments et la structure sémantique du document, alors que les mêmes termes en CSS sont davantage liés au style visuel des éléments. Si vous faites en sorte que les éléments en ligne s'affichent en bloc, c'est très bien.

  Cependant, vous devez vous assurer que la structure du document a toujours un sens lorsque CSS n'est pas présent, par exemple lorsqu'il est accessible via une technologie d'assistance telle qu'un lecteur d'écran - ou même lorsqu'il est examiné par le puissant Googlebot.

Non, il ne sera pas validé, mais oui, cela fonctionnera généralement dans les navigateurs modernes. Cela étant dit, utilisez une travée à l'intérieur de votre ancre, et placez-la display: blockégalement, cela fonctionnera certainement partout et cela validera!

Le document du W3C n'utilise pas de concepts comme faux et péché , mais il utilise ceux comme fournir les moyens , peut être approprié et découragé .

En fait, dans le deuxième paragraphe de la section 4 , la spécification 4.01 détaille ses mots comme suit

Les mots clés "DOIT", "NE DOIT PAS", "OBLIGATOIRE", "DOIT", "NE DOIT PAS", "DEVRAIT", "NE DEVRAIENT PAS", "RECOMMANDÉ", "MAI" et "FACULTATIF" dans ce document sont à interpréter comme décrit dans [RFC2119]. Cependant, pour plus de lisibilité, ces mots n'apparaissent pas dans toutes les lettres majuscules de cette spécification.

Dans cet esprit, je pense que la déclaration définitive se trouve dans 7.5.3 Éléments de niveau bloc et en ligne , où elle dit

Généralement, les éléments en ligne peuvent contenir uniquement des données et d'autres éléments en ligne.

La condition "généralement" semble introduire suffisamment d'ambiguïté pour dire que HTML 4.01 permet aux éléments en ligne de contenir des éléments de bloc.

Certes, CSS2 a une valeur de propriété d'affichage, inline-block , qui semble être adaptée à l'objectif que vous décrivez. Je ne sais pas si cela a été largement soutenu, mais il semble que quelqu'un ait anticipé le besoin de ce type de comportement.

La DTD semble être moins indulgente ici, mais le texte de la DTD s'en remet à la spécification:

La spécification HTML 4.01 inclut des contraintes syntaxiques supplémentaires qui ne peuvent pas être exprimées dans les DTD.

Dans un autre commentaire, vous suggérez de rendre un bloc actif en l'enveloppant dans une ancre. Je ne crois pas que HTML l'interdit, et CSS le permet clairement. Donc, pour répondre à la question du titre de savoir si elle est jamais correcte, je dis oui. Selon les normes, c'est parfois correct.

Avec la spécification HTML5 ... Il est maintenant possible de mettre un élément de niveau bloc à l'intérieur d'un élément en ligne. Alors maintenant, il est parfaitement approprié de mettre un «div» ou «h1» à l'intérieur d'un élément «a».

Vous ne pouvez pas mettre à l' <div>intérieur <a>- ce n'est pas du (X) HTML valide.

Même si vous créez un span avec display: block, vous ne pouvez toujours pas y mettre d'éléments de niveau bloc: le (X) HTML doit toujours obéir à la (X) HTML DTD (quelle que soit celle que vous utilisez), peu importe la façon dont le CSS modifie les choses.

Le navigateur l'affichera probablement comme vous le souhaitez, mais cela ne le rend pas correct.

Il existe une DTD pour HTML 4 sur http://www.w3.org/TR/REC-html40/sgml/dtd.html . Cette DTD est la forme traitable par machine de la spécification, avec la limitation qu'une DTD régit XML et HTML 4, en particulier la saveur "transitoire", permet beaucoup de choses qui ne sont pas du XML "légal". Pourtant, je considère qu'il est proche de codifier l'intention des spécificateurs.

<!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">

J'interpréterais les balises répertoriées dans cette hiérarchie comme étant le total des balises autorisées.

Bien que la spécification puisse dire «éléments en ligne», je suis presque sûr que ce n'est pas prévu que vous pouvez contourner l'intention en déclarant que le type d'affichage d'un élément de bloc est en ligne. Les balises en ligne ont une sémantique différente, peu importe comment vous pouvez en abuser.

D'un autre côté, je trouve fascinant que l'inclusion de specialsemble permettre l'imbrication d' Aéléments. Il y a probablement une formulation forte dans la spécification qui interdit cela même si elle est syntaxiquement correcte, mais je ne poursuivrai pas cela car ce n'est pas le sujet de la question.

Les éléments de niveau bloc comme <div>peuvent être enveloppés par des <a>balises en HTML5. Bien que a <div>soit considéré comme un conteneur / emballage pour le contenu de flux et que <a>les s soient considérés comme du contenu de flux selon MDN . Sémantiquement, il peut être préférable de créer des éléments en ligne qui agissent comme des éléments de niveau bloc.

Si vous voulez éviter le problème sémantique de placer des divs à l'intérieur des balises d'ancrage, placez simplement la balise d'ancrage au même niveau que les divs, enveloppez-les toutes avec un conteneur avec position: relative, définissez la position de votre balise d'ancrage: absolue et développez-la pour remplissez le récipient. De plus, si ce n'est pas à la fin du flux de contenu, assurez-vous d'y insérer un z-index pour le placer au-dessus du contenu.

Comme suggéré, j'ai ajouté un code de balisage:

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

Et le css:

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

Si vous allez faire l'effort de faire un <a>bloc, pourquoi ne pas le mettre <a>à l'intérieur, étant un élément de bloc, cela vous donnera le même effet.

Si vous le changez en élément de style bloc, alors non, ce n'est plus «faux», mais il ne sera probablement pas validé. Mais cela n'a pas beaucoup de sens de faire ce que vous faites. Vous devez soit conserver la balise d'ancrage en tant qu'élément de niveau bloc sans div interne, soit placer la div à l'extérieur.

C'est faux. Utilisez une envergure .

Je pense que la plupart du temps, lorsque les gens posent cette question, ils ont construit un site avec uniquement des divs, et maintenant l'un des div doit être un lien.

J'ai vu quelqu'un utiliser une image vide transparente, PNG, à l'intérieur d'une balise d'ancrage juste pour créer un lien à l'intérieur d'un div, et l'image avait la même taille que le div.

Assez triste en fait ... mais ça marche ...

vous pouvez y parvenir en ajoutant le pseudo-élément ":: before"

Astuce CSS pure;)

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>

Tout comme un FYI.

Si votre objectif est de rendre votre div cliquable, vous pouvez utiliser jQuery / Java Script.

Définissez votre div comme ceci:

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

Votre jQuery serait alors implémenté comme suit:

 <script type="text/javascript">

    $(document).ready(function () {

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

Cela fonctionnerait également pour plusieurs divs - selon le commentaire de Tom dans ce fil