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


J'ai entendu que mettre un élément de bloc dans 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 externe comme display:block dans la feuille de style? Est-ce toujours faux? La spécification HTML 4.01 sur éléments de niveau bloc et en ligne semble le penser:

Les feuilles de style fournissent les moyens de   spécifier le rendu de arbitraire   éléments, y compris si un élément   est rendu en bloc ou en ligne. Dans   certains cas, comme un style en ligne   pour les éléments de la liste, cela peut être   approprié, mais d'une manière générale,   les auteurs sont découragés de   outrepassant le conventionnel   interprétation des éléments HTML dans   par ici.

Quelqu'un at-il d'autres conseils sur ce problème?


442
2017-12-01 18:26


origine


Réponses:


Selon la version de HTML que vous utilisez pour:

  • HTML 5 déclare que le <a> L'élément "peut être entouré de paragraphes entiers, de listes, de 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 précise que <a> les éléments ne peuvent contenir que éléments en ligne. UNE <div> est un élément de bloc, de sorte qu'il ne peut pas apparaître dans un <a>.

    Bien sûr, vous êtes libre de concevoir un élément en ligne tel qu'il apparaît être un bloc, ou même un style pour qu'il soit rendu en ligne. L'utilisation des termes inline et block en HTML se réfère à la relation des éléments à 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 apparaître des éléments en ligne de manière bloquée, c'est bien.

    Cependant, vous devez vous assurer que la structure du document est toujours logique 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.


633
2017-12-01 18:38



Non, cela ne validera pas, mais oui, cela fonctionnera généralement dans les navigateurs modernes. Cela étant dit, utilisez une envergure à l'intérieur de votre ancre, et réglez display: block sur elle aussi, ça va certainement fonctionner partout, et ça va valider!


72
2017-12-01 18:34



Le doc 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, au deuxième paragraphe de Section 4, la spécification 4.01 énumère ses mots comme suit

Les mots clés «DOIT», «NE DOIT PAS», «OBLIGATOIRE», «DOIT», «NE DOIT 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 majuscules de cette spécification.

Dans cet esprit, je crois que la déclaration définitive est en 7.5.3 Eléments au niveau du bloc et en ligne, Où il est 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 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, bloc en ligne, cela semble convenir au but 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 moins pardonner ici, mais la texte de la DTD renvoie à la spécification:

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

Dans un autre commentaire, vous suggérez que vous souhaitiez activer un bloc 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, à savoir si elle est toujours correcte, je dis oui. Par les normes, c'est parfois correct.


27
2017-12-01 18:31



Avec la spécification HTML5 ... Il est maintenant possible de placer 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'.


13
2017-12-28 05:53



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

Même si vous définissez un span avec display: block, vous ne pouvez toujours pas y placer des éléments de niveau bloc: le (X) HTML doit toujours obéir à la DTD (X) HTML (quelle que soit celle que vous utilisez), quel que soit le CSS altère les choses.

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


4
2017-12-01 18:37



Il y a une DTD pour HTML 4 à 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 gouverne XML et HTML 4, en particulier la saveur "transitoire", permet beaucoup de choses qui ne sont pas "légales" XML. Cependant, j'estime que cela revient à codifier l'intention des prescripteurs.

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

En revanche, je trouve intriguant que l’inclusion de special semble permettre la nidification A éléments. Il y a probablement une formulation forte dans la spécification qui interdit cela même si la syntaxe XML est correcte, mais je ne vais pas aller plus loin car ce n'est pas le sujet de la question.


3
2017-12-01 19:27



C'est faux. Utiliser un envergure.


2
2017-12-01 18:41



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


1
2017-12-01 18:31