Portée à l'intérieur de l'ancre ou ancrage à l'intérieur de la travée ou cela n'a pas d'importance?

109

Je veux imbriquer spanet abalises. Devrais-je

  1. Mettre <span>dedans<a>
  2. Mettre <a>dedans<span>
  3. Ça n'a pas d'importance?
html css semantic-markup Salman A
la source

Réponses:

110

3 - Cela n'a pas d'importance.

MAIS, j'ai tendance à n'utiliser qu'un <span>inside an <a>si ce n'est que pour une partie du contenu de la balise ie

<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 simplement:

<a href="#" class="red">some text</a>
Jon Hadley
la source
1
Je suis récemment tombé sur un problème d'espace blanc avec le dépassement de texte: points de suspension et débordement: caché, qui pourrait être résolu en ajoutant un élément de bloc en ligne à mon bouton de navigation. J'ai fini avec <a> <span> Texte </span> </a>. Donc, je pense (ou j'espère;)) que ce n'est pas grave de le faire quand vous en avez vraiment besoin.
CunningFatalist
Je vais opter pour l'option 2 parce que c'est important. L'ancre doit être juste pour l'ancrage et non pour contenir des éléments (meilleure pratique). Imaginez une situation où vous créez une tuile cliquable et où l'ancre est l'élément parent du composant de tuile et à l'intérieur du composant se trouvent les liens pour les images, et plus d'images. Le robot d'exploration de Google deviendra fou et finira par devenir, ce n'est pas bon pour votre site.
Imam Bux le
33

Il est parfaitement valide (au moins selon les normes HTML 4.01 et XHTML 1.0) d'imbriquer soit un <span>inside an <a>ou un <a>inside a <span>.

Juste pour vous le prouver, vous pouvez toujours le vérifier auprès du 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 la même chose que ci-dessus, mais avec l' <a>intérieur le<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 à savoir est de vous assurer que vous fermez les balises dans le bon ordre. Donc, si vous commencez par un <span>puis un <a>, assurez-vous de fermer la <a>balise avant de fermer le <span>et vice-versa.

CraigTP
la source
20

Ce n'est pas grave - ils sont tous les deux autorisés l'un dans l'autre.

Greg
la source
Mais <a> est un niveau de bloc et <span> est un élément de niveau en ligne et l'élément de niveau de bloc ne peut pas entrer dans un élément en ligne. Je pense que c'était en validation w3c
Jitendra Vyas
26
Non, les deux sont en ligne
Greg
16

cela dépend de ce que vous souhaitez baliser.

  • si vous voulez un lien dans une travée, mettez-le à l' <a>intérieur <span>.
  • si vous voulez baliser quelque chose dans un lien, mis <span>en<a>
tricot
la source
16

SPAN est un conteneur en ligne GENERIC . Peu importe si un aest à l'intérieur spanou à l' spanintérieur, acar les deux sont des éléments en ligne. N'hésitez pas à faire ce qui vous semble logiquement correct.

Salman A
la source
2

Cela dépend de ce à quoi sert la portée. S'il fait référence au texte du lien, et non au fait qu'il s'agit d'un lien, choisissez # 1. Si l'étendue fait référence au lien dans son ensemble, choisissez # 2. À moins que vous n'expliquiez ce que représente la durée, il n'y a pas beaucoup plus de réponse que cela. Ce sont tous deux des éléments en ligne qui peuvent être imbriqués syntaxiquement dans n'importe quel ordre.

sykora
la source
Correct, ce sont tous les deux des éléments en ligne.
Chris
2

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

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

Normalement, je mettrais la travée à l'intérieur du A, mais le style ne prenait effet qu'après son échange.

utilisateur1368737
la source
1

Personnellement, en tant que développeur Web, je ne mets un span dans une balise d'ancrage que si j'essaie de mettre en évidence une section du texte des liens, par exemple en appliquant un arrière-plan à une section.

Xopa
la source
0

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

Vieille école
la source
0

Sémantiquement, je pense que cela a plus de sens, tout comme un conteneur pour un seul élément et si vous avez besoin de les imbriquer, cela suggère que plus d'un élément sera à l'intérieur de l'extérieur.

Toby
la source