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

Sur de nombreux sites Web, je vois des liens qui ont href="#". Qu'est-ce que ça veut dire? A quoi cela sert?

À propos des hyperliens:

Les balises d'ancrage sont principalement utilisées <a></a>comme hyperliens . Cela signifie essentiellement qu'ils vous emmènent quelque part. Les liens hypertexte nécessitent la hrefpropriété, car elle spécifie un emplacement.

Hacher:

Un hachage - #dans un lien hypertexte spécifie un identifiant d'élément html auquel la fenêtre doit être défilée.

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

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

Faites défiler vers le haut:

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

Voir cette démo.

Il s'agit du comportement attendu selon la documentation w3.

Espaces réservés pour les hyperliens:

Un exemple où un espace réservé de lien hypertexte est logique dans les aperçus de modèle. Sur les démos de page unique pour les modèles, j'ai souvent vu <a href="#">que la balise d'ancrage est un lien hypertexte, mais ne va nulle part. Pourquoi ne pas laisser la hrefpropriété vierge? Une hrefpropriété vide est en fait un lien hypertexte vers la page actuelle. En d'autres termes, cela entraînera une actualisation de la page. Comme je l'ai expliqué, href="#"est également un lien hypertexte et provoque le défilement. Par conséquent, la meilleure solution pour les espaces réservés de lien hypertexte est en fait href="#!"L'idée ici est qu'il n'y a, espérons-le, pas d'élément sur la page avec id="!"(qui fait ça!?) Et l'hyperlien ne fait donc référence à rien - donc rien ne se passe.

À propos des balises d'ancrage:

Une autre question que vous vous posez peut-être est: "Pourquoi ne pas simplement laisser la propriété href désactivée?". Une réponse courante que j'ai entendue est que la hrefpropriété est requise, donc elle "devrait" être présente sur les ancres. C'est faux! La hrefpropriété n'est requise que pour qu'une ancre soit réellement un hyperlien! Lisez ceci de w3. Alors, pourquoi ne pas simplement le laisser pour les espaces réservés? Les navigateurs rendent les styles par défaut des éléments et changeront le style par défaut d'une balise d'ancrage qui n'a pas la propriété href. Au lieu de cela, il sera considéré comme du texte normal. Il modifie même le comportement du navigateur concernant l'élément. La barre d'état (en 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 href d'espace réservé sur une ancre pour vous 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 URL différente, mais plutôt vers un autre identifiant ou é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, cela signifie "nulle part".

Voici une autre question similaire posée aux ancres HTML avec «nom» ou «id»?

C'est un lien qui renvoie à nulle part essentiellement (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 réel soit lié n'importe où.

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

Malheureusement, l'utilisation la plus courante <a href="#">est par les programmeurs paresseux qui veulent des éléments codés javascript non hyperliens cliquables qui se comportent comme des ancres, mais ils ne peuvent pas être utilisés pour ajouter des styles cursor: pointer;ou des :hoverstyles à une classe pour leurs éléments non hyperliens, et sont en outre trop paresseux pour se mettre hrefà javascript:void(0);.

Le problème avec cela est que l'un <a href="#" onclick="some_function();">ou l'autre se retrouve inévitablement avec une erreur javascript, et une ancre avec une erreur javascript onclick finit toujours par suivre la sienne href. Normalement, cela finit par être un saut ennuyeux vers le haut de la page, mais dans le cas des sites utilisant <base>, <a href="#">est géré comme <a href="[base href]/#">, ce qui entraîne une navigation inattendue. Si des erreurs enregistrables sont générées, vous ne les verrez pas dans ce dernier cas, sauf si vous activez les journaux persistants.

Si un élément d'ancrage est utilisé en tant que non-ancre, il doit avoir son hrefensemble javascript:void(0);pour une dégradation gracieuse .

Je viens de perdre deux jours à déboguer une redirection de page aléatoire et inattendue qui aurait simplement dû rafraîchir la page, et finalement la retrouver jusqu'à une fonction provoquant l'événement de clic d'un <a href="#">. Remplacer le #avec javascript:void(0);fixé.

La première chose que je fais lundi est de purger le projet de toutes les instances de <a href="#">.

Les listes non ordonnées sont souvent créées dans le but de les utiliser comme menu, mais un liélément de liste est du texte. Étant donné que l' liélément de liste 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 souris lorsque quelque chose est cliquable. L'utilisation d'une balise d'ancrage à l' aintérieur de la libalise fait que le pointeur de la souris se transforme en un doigt pointé. Le doigt pointé est beaucoup mieux pour utiliser la liste comme 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 n'a pas besoin de lien, il n'est pas nécessaire de désigner une URL. Mais le problème est que si vous omettez l' hrefattribut, le texte dans la <a>balise est considéré comme du texte, et donc le pointeur de la souris est de retour sur un curseur en I. Le curseur en I peut faire penser à l'utilisateur 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 divou ppour une liste de menus, mais le pointeur de la souris serait également un curseur en I pour eux.

Vous pouvez utiliser de nombreux boutons empilés les uns sur les autres pour une liste de menus, mais la liste semble 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, c'est donc une autre option. Le href="#"nulle part pourrait être juste la façon paresseuse de définir un style.

Le problème avec l'utilisation de href = "#" pour un lien vide est qu'il vous mènera en haut de la page, ce qui n'est peut-être pas l'action souhaitée. Pour éviter cela, pour les navigateurs plus anciens ou les doctypes non HTML5, utilisez

<a href="javascript:void(0)">Goes Nowhere</a>

Pour autant que je sache, il s'agit généralement d'un espace réservé pour les liens auxquels du JavaScript est attaché. Le point principal du lien est servi par l'exécution du code JavaScript; les navigateurs prenant en charge JS ignorent alors la véritable cible du lien. Si le navigateur ne prend pas en charge JS, la marque de hachage transforme essentiellement le lien en no-op. Voir aussi JavaScript discret .

Comme certaines des autres réponses l'ont souligné, l' aélément nécessite un hrefattribut et #est utilisé comme espace réservé, mais il s'agit également d'un artefact historique.

De Mozilla Developer Network :

href

C'était le seul attribut requis pour les ancres définissant un lien source hypertexte, mais il n'est plus requis en HTML5. L'omission de cet attribut crée un lien d'espace réservé. 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'une marque de hachage (#), qui spécifie un emplacement cible interne (un ID) dans le document actuel.

En outre, selon la spécification HTML5 :

Si l'élément a n'a pas d'attribut href, alors l'élément représente un espace réservé pour l'endroit où un lien aurait pu être placé, s'il avait été pertinent, constitué uniquement du contenu de l'élément.

L'attribut href définit l'URL de la ressource d'un lien. Si la balise d'ancrage n'a pas de balise href, elle ne deviendra pas un lien hypertexte. L'attribut href a les valeurs suivantes:

1. Absolute path: move to another site like href="http://www.google.com"
2. Relative path: move to another page within the site like herf ="defaultpage.aspx"
3. Move to an element with a specified id within the page like href="#bottom"
4. href="javascript:void(0)", it does not move anywhere.
5. href="#" , it does not move anywhere but scroll on the top of the current page.
6. href= "" , it will load the current page but some browsers causes forbidden errors.

Note: When we do not need to specified any url inside a anchor tag then use 
<a href="javascript:void(0)">Test1</a>