web-dev-qa-db-fra.com

Portée dans l'ancre ou ancre dans la portée ou n'a pas d'importance?

Je veux imbriquer les balises span et a. Devrais-je 

  1. Mettez <span> à l'intérieur de <a>
  2. Mettez <a> à l'intérieur de <span>
  3. Ça n'a pas d'importance? 
htmlcsssemantic-markup
94
user214582

3 - Peu importe.

MAIS, j’ai tendance à utiliser uniquement un <span> dans un <a> s’il s’agit uniquement d’un partie du contenu de la balise i.e.

<a href="#">some <span class="red">text</span></a>

Plutôt que:

<a href="#"><span class="red">some text</span></a>

Ce qui devrait évidemment être juste:

<a href="#" class="red">some text</a>
101
Jon Hadley

Il est parfaitement valide (du moins selon les normes HTML 4.01 et XHTML 1.0) d’imbrancher un <span> dans un <a> ou un <a> dans un <span>.

Juste pour vous le prouver, vous pouvez toujours le vérifier en/ Service de validation W3C MarkUp

J'ai essayé de valider:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html>
    <head>
      <title>Title</title>
    </head>
    <body>
       <p>
         <a href="http://www.google.com/"><span>Google</span></a>
       </p>
    </body>
  </html>

Et aussi comme ci-dessus, mais avec le <a> à l'intérieur du <span>

c'est à dire.

<span><a href="http://www.google.com">Google</a></span>

avec les doctypes HTML 4.01 et XHTML 1.0, et les deux ont réussi la validation!

La seule chose à prendre en compte est de vous assurer de fermer les étiquettes dans le bon ordre. Donc, si vous commencez par un <span> puis un <a>, assurez-vous de fermer la balise <a> avant de fermer le <span> et vice-versa.

32
CraigTP

Peu importe, ils sont tous deux autorisés l'un à l'intérieur de l'autre.

18
Greg

cela dépend de ce que vous voulez marquer.

  • si vous voulez un lien à l'intérieur d'une étendue, mettez <a> à l'intérieur de <span>.
  • si vous voulez marquer quelque chose dans un lien, mettez <span> dans <a>
16
knittl

SPAN est un conteneurGENERICinline. Peu importe si une a est dans span ou span est dans a car les deux sont des éléments en ligne. N'hésitez pas à faire ce qui vous semble logiquement correct.

16
Salman A

Cela dépend de ce que la durée est pour. S'il fait référence au texte du lien et non au fait qu'il s'agisse d'un lien, choisissez # 1. Si l'étendue fait référence au lien dans son ensemble, choisissez # 2. À moins d’expliquer ce que l’espace représente, il n’ya pas beaucoup plus de réponse que cela. Ils sont tous les deux des éléments en ligne, peuvent être imbriqués syntaxiquement dans n’importe quel ordre.

2
sykora

Personnellement, en tant que développeur Web, je ne mets une étendue dans une balise d'ancrage que si j'essaie de mettre en surbrillance une section du texte des liens, telle que l'application d'un arrière-plan à une section.

1
Xopa

Cela peut être important si, par exemple, vous utilisez une police de type icône de tri. J'ai eu cela tout à l'heure avec:

<span class="fa fa-print fa-3x"><a href="some_link"></a></span>

Normalement, je mettrais le span à l'intérieur du A mais le style ne prenait pas effet avant de l'échanger.

1
user1368737

Sémantiquement, je pense qu’il est plus logique de choisir un conteneur pour un seul élément et si vous avez besoin de les imbriquer, cela suggère plus que l’élément sera à l’intérieur du premier.

0
Toby

Cela fonctionnera à la fois, mais personnellement, je préférerais l'option 2, donc la durée est "autour" du lien.

0
Oldskool