Qu'est-ce que href="#" et pourquoi est-il utilisé ?

Question

Sur de nombreux sites web, je vois des liens qui ont href="#" . Qu'est-ce que cela signifie ? A quoi sert-il ?

Answer 1

À propos des hyperliens :

La principale utilité des balises d'ancrage - <a></a> - est comme hyperliens . Cela signifie essentiellement qu'ils vous emmènent quelque part. Les hyperliens nécessitent le href car elle spécifie un emplacement.

Hash :

Un hash - # à l'intérieur d'un hyperlien spécifie un identifiant d'élément html vers lequel la fenêtre doit défiler.

href="#some-id" défilerait jusqu'à un élément de la page actuelle tel que <div id="some-id"> .

href="http://stackoverflow.com//site.com/#some-id" irait à site.com et faites défiler jusqu'à l'identifiant sur cette page.

Faites défiler vers le haut :

href="#" ne spécifie pas de nom d'identification, mais a un emplacement correspondant - le haut de la page. En cliquant sur une ancre avec href="#" déplacera la position de défilement vers le haut.

Voir cette démo.

C'est le comportement attendu selon le documentation w3.

Espaces réservés aux hyperliens :

Les aperçus de modèles sont un exemple de cas où un hyperlien a un sens. Sur les pages de démonstration des modèles, j'ai souvent vu les éléments suivants <a href="#"> afin que la balise d'ancrage soit un lien hypertexte, mais qu'elle n'aille nulle part. Pourquoi ne pas laisser la balise href propriété vide ? Un blanc href est en fait un lien hypertexte vers la page en cours. En d'autres termes, elle provoquera un rafraîchissement de la page. Comme je l'ai dit, href="#" est également un lien hypertexte, et entraîne un défilement. Par conséquent, la meilleure solution pour les espaces réservés aux hyperliens est en fait la suivante href="#!" L'idée ici est qu'il n'y a pas d'élément sur la page avec id="!" (qui fait ça !?) et l'hyperlien ne renvoie donc à rien - et donc rien ne se passe.

À propos des balises d'ancrage :

Une autre question que vous vous posez peut-être est la suivante : "Pourquoi ne pas simplement laisser la propriété de la href de côté ?". Une réponse courante que j'ai entendue est que la propriété href est obligatoire, donc elle "devrait" être présente sur les ancres. C'est FAUX ! Le site href n'est nécessaire que pour qu'une ancre soit réellement un hyperlien ! Lire ceci à partir de w3 . Alors, pourquoi ne pas le laisser désactivé pour les espaces réservés ? Les navigateurs rendent les styles par défaut des éléments et modifieront le style par défaut d'une balise d'ancrage qui ne possède pas la propriété href. Au lieu de cela, elle sera considérée comme du texte ordinaire. Cela modifie même le comportement du navigateur à l'égard de l'élément. La barre d'état (en bas de l'écran) ne s'affichera pas lors du survol d'une ancre sans la propriété href. Il est préférable d'utiliser une valeur href de type placeholder sur une ancre pour s'assurer qu'elle est traitée comme un hyperlien.

Voir cette démo démontrant des différences de style et de comportement.

Answer 2

Le fait de mettre le symbole "#" comme href pour quelque chose signifie qu'il ne pointe pas vers une autre URL, mais plutôt vers une autre balise id ou name 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'identité ou de nom, il ne va "nulle part".

Voici une autre question similaire posée Ancres HTML avec 'name' ou 'id' ?

Answer 3

Il s'agit d'un lien qui ne mène nulle part (il ajoute simplement "#" à l'URL). Il est utilisé pour un certain nombre de raisons différentes. Par exemple, si vous utilisez une sorte de JavaScript/jQuery et que vous ne voulez pas que le HTML actuel renvoie à un lien quelconque.

Il est également utilisé pour les ancres de page, qui servent à rediriger vers une autre partie de la page.

Answer 4

Les listes non ordonnées sont souvent créées dans l'intention de les utiliser comme un menu, mais une li L'élément de la liste est un texte. Parce que la 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é à la place du pointeur de la souris lorsque quelque chose est cliquable. Utilisation d'une balise d'ancrage a à l'intérieur de la li fait en sorte que le pointeur de la souris se transforme en un doigt d'honneur. Le doigt pointé est bien meilleur pour utiliser la liste comme un 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, c'est que si vous omettez l'élément href le texte dans l'attribut <a> est considérée comme du texte, et le pointeur de la souris redevient donc un curseur I. Le curseur I peut faire croire à l'utilisateur que l'élément de menu n'est pas cliquable. Par conséquent, vous avez toujours besoin d'une balise href mais vous n'avez pas besoin d'un lien vers quelque chose.

Vous pourriez utiliser beaucoup de div o p pour une liste de menus, mais le pointeur de la souris serait un curseur I pour eux aussi.

Vous pourriez utiliser de nombreux boutons empilés les uns sur les autres pour une liste de menus, mais la liste semble être préférable. Et c'est probablement la raison pour laquelle l'option href="#" qui ne pointe nulle part est utilisé dans les balises d'ancrage à l'intérieur des balises de liste.

Vous pouvez définir le style du pointeur en CSS, ce qui constitue une autre option. Le site href="#" à nulle part pourrait être la façon la plus paresseuse de définir un certain style.

Answer 5

Pour autant que je sache, il s'agit généralement d'un espace réservé aux liens auxquels est associé du JavaScript. Le point principal du lien est servi par l'exécution du code JavaScript ; les navigateurs supportant JS ignorent alors la cible réelle du lien. Si le navigateur ne prend pas en charge JS, la marque dièse rend le lien inutilisable. Voir aussi JavaScript discret .