Est-ce que mettre un div dans une ancre est correct?

J’ai entendu dire que mettre un élément de bloc dans un élément en ligne est un péché HTML:

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.

Mais qu’en est-il si vous stylisez l’ancre externe en tant que display:block dans la feuille de style? Est-ce toujours faux? La spécification HTML 4.01 sur les éléments au niveau du bloc et en ligne semble le penser:

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

Quelqu’un a-t-il d’autres conseils sur ce problème?

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

  • HTML 5 stipule que l’élément peut être intégré à des paragraphes, listes, tableaux, etc., même des sections entières, tant qu’il n’y a pas de contenu interactif (par exemple, des boutons ou d’autres liens) “.

  • HTML 4.01 spécifie que les éléments ne peuvent contenir que des éléments en ligne . Un

    est un élément de bloc , il ne doit donc pas apparaître dans un .

    Bien entendu, vous êtes libre de définir un élément en ligne de manière à ce qu’il apparaisse comme un bloc, ou même un style pour qu’il soit rendu en ligne. L’utilisation des termes inline et block dans HTML fait référence à la relation entre les éléments et la structure sémantique du document, alors que les mêmes termes dans CSS sont davantage liés au style visuel des éléments. Si vous faites apparaître les éléments en ligne de manière bloquée, c’est bien.

    Cependant, vous devez vous assurer que la structure du document a toujours un sens lorsque le 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 validera pas, mais oui, cela fonctionnera généralement dans les navigateurs modernes. Cela étant dit, utilisez une scope à l’intérieur de votre ancre et définissez l’ display: block le également, cela fonctionnera certainement partout, et il sera validé!

Le document W3C n’utilise pas de concepts tels que le mal et le péché , mais il utilise ceux qui, comme fournir les moyens , peuvent être appropriés et découragés .

En fait, au deuxième paragraphe de la section 4 , la spécification 4.01 précise ses mots comme suit:

Les mots clés “DOIT”, “NE DOIT PAS”, “REQUIS”, “DOIT”, “NE SERA PAS”, “DEVRAIT”, “NE DEVRAIT PAS”, “RECOMMANDÉ”, “MAI” et “FACULTATIF” dans ce document sont à interpréter comme décrit dans [RFC2119]. Cependant, pour des raisons de lisibilité, ces mots n’apparaissent pas dans toutes les lettres majuscules de cette spécification.

Dans cet esprit, je crois que l’énoncé définitif est au 7.5.3 Eléments au niveau du bloc et en ligne , où il est dit

Généralement, les éléments en ligne ne peuvent contenir que des données et d’autres éléments en ligne.

La condition “généralement” semble introduire assez 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 convenir à l’objective que vous décrivez. Je ne suis pas sûr que cela ait été largement soutenu, mais il semble que quelqu’un ait anticipé le besoin de ce type de comportement.

La DTD semble être moins tolérante ici, mais le texte de la DTD renvoie à 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 proposez de rendre un bloc actif en l’encapsulant dans une ancre. Je ne crois pas que HTML l’interdit, et CSS le permet clairement. Donc, pour répondre à la question du titre, à savoir si elle est toujours correcte, je dis oui. Par les normes, c’est parfois correct.

Avec la spécification HTML5 … Il est désormais possible de placer un élément de niveau bloc à l’intérieur d’un élément en ligne. Donc, il est maintenant tout à fait approprié de mettre un “div” ou un “h1” à l’intérieur d’un élément “a”.

Vous ne pouvez pas mettre

intérieur de – ce n’est pas valide (X) HTML.

Même si vous stylisez une étendue avec display: block, vous ne pouvez toujours pas y placer d’éléments au niveau du bloc: le (X) HTML doit toujours respecter la DTD (X) HTML (quel que soit celui que vous utilisez). altère les choses.

Le navigateur l’affichera probablement comme vous le souhaitez, mais cela ne résout pas le problème.

C’est faux. Utilisez une travée

Il y a une DTD pour HTML 4 à l’ adresse http://www.w3.org/TR/REC-html40/sgml/dtd.html . Cette DTD est la forme lisible par machine de la spécification, avec la limitation qu’un DTD gouverne XML et HTML 4, en particulier la saveur “transitoire”, permet beaucoup de choses qui ne sont pas “XML” XML. Cependant, j’estime que cela revient à codifier l’intention des prescripteurs.

       

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

Alors que la spécification peut dire “éléments en ligne”, je suis sûr que cela ne signifie pas que vous pouvez contourner l’intention en déclarant le type d’affichage d’un élément de bloc à être en ligne. Les balises en ligne ont une sémantique différente, peu importe la manière dont vous pouvez les utiliser.

D’un autre côté, je trouve insortingguant que l’inclusion de special semble autoriser l’imbrication d’éléments A Il y a probablement un libellé fort dans la spécification, qui ne le permet pas, même si sa syntaxe est XML, mais je ne vais pas aller plus loin car ce n’est pas le sujet de la question.

Si vous devez vous bloquer , pourquoi ne pas mettre dans le div, étant un élément de blocage, cela vous donnera le même effet.

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

Les éléments de niveau bloc tels que

peuvent être dans des balises en HTML5. Bien qu’un

soit considéré comme un conteneur / wrapper pour le contenu de stream et que soient considérés comme du contenu de stream 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.

Je pense que la plupart du temps, lorsque les gens posent cette question, ils ont créé 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 sortingste en fait … mais ça marche …

Juste comme un FYI.

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

Définissez votre div comme ça:

 
This is my div. Try clicking it!

Votre jQuery serait alors implémenté comme ceci:

   

Cela fonctionnerait également pour plusieurs divs – selon le commentaire de Tom dans ce sujet