Qu'est-ce que href = "#" et pourquoi est-il utilisé?
Sur de nombreux sites Web, je vois des liens contenant href="#". Qu'est-ce que ça veut dire? A quoi cela sert?
À propos des hyperliens:
L'utilisation principale des balises d'ancrage - <a></a> - est la suivante liens hypertexte. Cela signifie fondamentalement qu'ils vous emmènent quelque part. Les liens hypertexte requièrent la propriété href, car elle spécifie un emplacement.
Hacher:
Un hachage - # dans un lien hypertexte spécifie un identifiant d'élément html vers lequel la fenêtre doit défiler.
href="#some-id" permet de faire défiler jusqu'à un élément de la page en cours tel que <div id="some-id">.
href="//site.com/#some-id" irait à site.com et défiler jusqu'à l'id de cette page.
Faites défiler vers le haut:
href="#" ne spécifie pas un nom d'identifiant, mais possède un emplacement correspondant - le haut de la page. Cliquer sur une ancre avec href="#" déplacera la position de défilement vers le haut.
Ceci est le comportement attendu selon le documentation de w3.
Hyperliens réservés:
Un exemple où un espace réservé pour un lien hypertexte a un sens est dans les aperçus de modèle. Sur les démonstrations d'une seule page pour les modèles, j'ai souvent vu <a href="#"> de sorte que la balise d'ancrage est un lien hypertexte, mais ne va nulle part. Pourquoi ne pas laisser la propriété href vierge? Une propriété vierge href est en réalité un lien hypertexte vers la page en cours. En d'autres termes, cela provoquera un rafraîchissement de la page. Comme je l'ai expliqué, href="#" est également un lien hypertexte et entraîne le défilement. Par conséquent, la meilleure solution pour les espaces réservés aux hyperliens est en réalité href="#!" L'idée ici est qu'il n'y a heureusement pas d'élément sur la page avec id="!" (qui fait cela!?) Et que le lien hypertexte ne renvoie donc à rien - donc rien ne se passe.
A propos des tags d'ancrage:
Une autre question que vous pourriez vous poser est la suivante: "Pourquoi ne pas simplement laisser la propriété href désactivée?". Une réponse commune que j'ai entendue est que la propriété href est requise, elle devrait donc "être" présente sur les ancres. C'est faux! La propriété href est requise uniquement pour qu'une ancre soit réellement un lien hypertexte! Lire ceci de w. Alors, pourquoi ne pas le laisser pour les espaces réservés? Les navigateurs affichent les styles par défaut des éléments et modifient le style par défaut d'une balise d'ancrage ne possédant pas la propriété href. Au lieu de cela, il sera considéré comme un texte normal. Cela change même le comportement du navigateur concernant l'élément. La barre d'état (bas de l'écran) ne sera pas affichée lors du survol d'une ancre sans la propriété href. Il est préférable d’utiliser une valeur de substitution href sur une ancre afin de s’assurer qu’elle est traitée comme un lien hypertexte.
Voir cette démo démontrant les différences de style et de comportement.
Mettre le symbole "#" comme href pour quelque chose signifie qu'il ne pointe pas vers une autre URL, mais vers un autre identifiant ou une autre étiquette de nom sur la même page. Par exemple:
<a href="#bottomOfPage">Click to go to the bottom of the page</a>
blah blah
blah blah
...
<a id="bottomOfPage"></a>
Cependant, s'il n'y a pas d'identifiant ou de nom, le résultat est "no where".
Voici une autre question similaire posée HTML Anchors avec 'name' ou 'id'?
C'est un lien qui mène à nulle part essentiellement (il ajoute simplement "#" sur l'URL). Il est utilisé pour différentes raisons. Par exemple, si vous utilisez une sorte de JavaScript/jQuery et que vous ne voulez pas que le code HTML réel soit lié n'importe où.
Il est également utilisé pour les ancres de page, qui permettent de rediriger vers une autre partie de la page.
Les listes non ordonnées sont souvent créées dans le but de les utiliser comme menu, mais un élément de liste li est un texte. Étant donné que l'élément liste li est du texte, le pointeur de la souris ne sera pas une flèche, mais un "curseur I". Les utilisateurs sont habitués à voir un doigt pointé pour un pointeur de la souris lorsque quelque chose est cliquable. L'utilisation d'une balise d'ancrage a à l'intérieur de la balise li force le pointeur de la souris à se transformer en un doigt pointé. Le doigt pointé est bien meilleur pour utiliser la liste en tant que menu.
<ul id="menu">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a></li>
</ul>
Si la liste est utilisée pour un menu et ne nécessite pas de lien, il n'est pas nécessaire de désigner une URL. Mais le problème est que si vous omettez l'attribut href, le texte de la balise <a> est considéré comme du texte et le pointeur de la souris revient donc à un curseur I. Le curseur I peut amener l'utilisateur à penser que l'élément de menu n'est pas cliquable. Par conséquent, vous avez toujours besoin d'un href, mais vous n'avez pas besoin d'un lien vers n'importe où.
Vous pouvez utiliser beaucoup de balises div ou p pour une liste de menus, mais le pointeur de la souris serait également un curseur I pour elles.
Vous pouvez utiliser beaucoup de boutons empilés les uns sur les autres pour une liste de menus, mais cette liste semble être préférable. Et c'est probablement pourquoi le href="#" qui pointe vers nulle part est utilisé dans les balises d'ancrage à l'intérieur des balises de liste.
Vous pouvez définir le style de pointeur en CSS, ce qui en fait une autre option. Le href="#" vers nulle part pourrait être simplement le moyen paresseux de définir un style.
Malheureusement, l'utilisation la plus courante de <a href="#"> est par les programmeurs paresseux qui veulent des éléments cliquables non hyperliens codés en javascript qui se comportent comme des ancres, mais ils ne peuvent pas être arsés pour ajouter cursor: pointer; ou :hover styles à une classe pour leurs éléments non hyperliens, et sont en outre trop paresseux pour définir href sur javascript:void(0);.
Le problème avec ceci est qu'un <a href="#" onclick="some_function();"> ou un autre se termine inévitablement avec une erreur javascript, et une ancre avec une erreur javascript onclick finit toujours par suivre son href. Normalement, cela finit par être un saut ennuyeux en haut de la page, mais dans le cas de sites utilisant <base>, <a href="#"> est traité comme <a href="[base href]/#">, ce qui entraîne une navigation inattendue. Si toutes les erreurs pouvant être journalisées sont générées, vous ne les verrez pas dans ce dernier cas à moins d’activer les journaux persistants.
Si un élément d'ancrage est utilisé comme non-ancre devrait avoir sa href réglée sur javascript:void(0); pour des raisons de gracieux dégradation.
Je viens de perdre deux jours à déboguer une redirection de page inattendue au hasard qui aurait simplement dû rafraîchir la page et l’a finalement retracée vers une fonction qui déclenche l’événement click d’un <a href="#">. Remplacer le # par javascript:void(0); le corrige.
La première chose que je fais lundi consiste à purger le projet de toutes les instances de <a href="#">.
Le problème avec l'utilisation de href = "#" pour un lien vide est que cela vous mènera au haut de la page, ce qui peut ne pas être l'action souhaitée. Pour éviter cela, pour les anciens navigateurs ou les doctypes non HTML5, utilisez
<a href="javascript:void(0)">Goes Nowhere</a>
Autant que je sache, il s’agit généralement d’un espace réservé pour les liens auxquels du code JavaScript est associé. Le point principal du lien est servi en exécutant le code JavaScript; Les navigateurs prenant en charge JS ignorent alors la cible du lien réel. Si le navigateur ne prend pas en charge JS, le signe dièse transforme essentiellement le lien en no-op. Voir aussi JavaScript discret .
Comme certaines des autres réponses l'ont fait remarquer, l'élément a nécessite un attribut href et le # est utilisé comme paramètre générique, mais il s'agit également d'un artefact historique.
De Mozilla Developer Network :
href
Il s’agissait du seul attribut requis pour les ancres définissant un lien source hypertexte, mais n’est plus requis dans HTML5. L'omission de cet attribut crée un lien de substitution. L'attribut href indique la cible du lien, une URL ou un fragment d'URL. Un fragment d'URL est un nom précédé d'un signe de hachage (#), qui spécifie un emplacement cible interne (un ID) dans le document actuel.
En outre, selon HTML5 spec :
Si l'élément a n'a pas d'attribut href, l'élément représente un espace réservé pour l'emplacement où un lien aurait autrement été placé, s'il était pertinent, uniquement constitué du contenu de l'élément.