Je veux un lien qui ne fait rien. Je ne veux pas ça:

<a href="#">

car alors l'URL devient something.com/whatever/#.

La seule raison pour laquelle je veux un lien est que l'utilisateur puisse voir qu'il peut cliquer sur le texte. JavaScript est utilisé pour effectuer une action, je n'ai donc pas besoin du lien pour aller n'importe où, mais j'ai besoin qu'il ressemble à un lien!

Je pourrais utiliser un attribut de données et me dire CSS pour que les éléments ressemblent à des liens s'ils ont cet attribut, mais cela semble un peu exagéré.

Ce qui suit empêchera votre href d'être exécuté

<a href="#" onclick="return false;">

Si vous utilisez jQuery, event.preventDefault()peut être utilisé

Essaye ça:

<a href="javascript:void(0);">link</a>

En HTML5, c'est très simple. Omettez simplement l' hrefattribut.

<a>Do Nothing</a>

De MDN sur l'attribut a tag href :

href

C'était le seul attribut requis pour les ancres définissant un lien source hypertexte, mais il n'est plus requis en HTML5.

Qu'en est-il du curseur de la main au survol?

Les styles par défaut d'un navigateur ne peuvent pas changer le curseur en pointeur, pour les abalises sans href. Vous pouvez changer cela de manière universelle avec le CSS suivant.

a {
    cursor: pointer;
}

<a>Do Nothing</a>

Cependant, il est probablement préférable d'être plus sélectif à ce sujet et de l'appliquer uniquement aux éléments auxquels vous avez l'intention d'ajouter des gestionnaires d'événements.

Qu'en est-il de le rendre focusable par tabulation?

Ajoutez simplement tabindex="0"à l'élément.

<a tabindex="0">Do Nothing</a>

Est-il judicieux d'utiliser une abalise sans lien?

Habituellement non, il est probablement préférable d'utiliser un buttonélément à la place et de le styliser avec CSS. Mais quoi que vous utilisiez, évitez d'utiliser un élément arbitraire comme divlorsque cela est possible, car ce n'est pas du tout sémantique.

Ne pas en faire un lien (bien qu'il soit préférable de le faire) et le styliser avec du CSS pour qu'il ressemble à un lien:

p.not-a-link { text-decoration: underline; cursor: pointer } 

Ou mieux encore, faites-en un lien et laissez la fonction javascript qui est utilisée e.preventDefault()pour empêcher le lien.

Ajoutez également le lien vers le hrefafin que les utilisateurs sans JS activé puissent toujours l'utiliser (comme solution de secours).

<a href="javascript:;">Link text</a> - c'est ce que j'utilise habituellement

Nous pouvons y parvenir en utilisant javascript void qui implique normalement l'évaluation d'une expression et le retour d'undefined, ce qui inclut l'ajout javascript:void(0);de href.

L'opérateur void est généralement utilisé simplement pour obtenir une valeur primitive non définie, en utilisant généralement «void (0)» (qui équivaut à «void 0»). Dans ces cas, la variable globale non définie peut être utilisée à la place (en supposant qu'elle n'a pas été affectée à une valeur autre que celle par défaut).

a {
  text-decoration: initial;
}

<a href="javascript:void(0);"> This link actually does nothing when clicked</a>

La réponse de @ Curt fonctionnera, mais vous pouvez utiliser un style de curseur en css pour le faire ressembler à un lien sans avoir à vous soucier de générer un faux lien. Utilisez la main ou le pointeur selon la conformité du navigateur.

Css de pointeur conforme au navigateur croisé (à partir du guide de style du curseur ):

element {
    cursor: pointer;
    cursor: hand;
}

une façon que personne n'a mentionnée est de pointer le href vers un emplacement de fichier local vide comme ceci

<a href='\\'>my dead link</a>

Pourquoi? Si vous utilisez un framework tel que react ou angular, le compilateur crachera des avertissements qui peuvent rendre votre journal ou votre console sale. Cette technique empêchera également les robots ou les araignées de mal lier les choses.

NE PAS UTILISER <a>... à la place, utilisez <span class='style-like-link'> puis utilisez la classe pour la styliser comme vous le souhaitez.