Réponses:
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>
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.
Ce n'est pas grave - ils sont tous les deux autorisés l'un dans l'autre.
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.
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.
Cela fonctionnera à la fois, mais personnellement je préférerais l'option 2 donc la durée est "autour" du lien.