¿Es segura una etiqueta de anclaje sin el atributo href?

232

¿Está bien usar una etiqueta de anclaje sin incluir el hrefatributo y, en su lugar, usar un controlador de eventos de clic de JavaScript? Así que omitiría por hrefcompleto, ni siquiera lo tendría vacío ( href="").

html hyperlink standards anchor Juan
fuente
1
Sin embargo, ¿el evento onclick aún se dispara? Quiero usar etiquetas de anclaje en lugar de span / div porque es la única etiqueta razonable que admite CSS: coloca el cursor en IE
juan
3
@Martin ANCHORS se puede acceder y activar a través del teclado. Los elementos regulares de SPAN no pueden. Ver aquí: jsfiddle.net/simevidas/4DTxv/2
Šime Vidas
3
@ ŠimeVidas, los <span>elementos ciertamente se pueden navegar a través del teclado . También puede hacerlo para que los <a>elementos no sean navegables a través del teclado .
zzzzBov
2
En HTML5, los anclajes sin atributo href son hipervínculos de marcador de posición: dev.w3.org/html5/markup/a.html
Ignacio Lago
1
¿Estás seguro de que no quieres un botón? Esto significaría que las pestañas, etc. funcionan, y puede diseñar sus botones para que parezcan enlaces si es necesario. Es cierto que no sé sobre flotar en IE.
robbie_c

Respuestas:

217

En HTML5, el uso de un aelemento sin un hrefatributo es válido. Se considera un "hipervínculo de marcador de posición".

Ejemplo:

<a>previous</a>

Busque el "hipervínculo de marcador de posición" en la página de referencia de la etiqueta de anclaje w3c: https://www.w3.org/TR/2016/REC-html51-20161101/textlevel-semantics.html#the-a-element .

Y también se menciona en la wiki aquí: https://www.w3.org/wiki/Elements/a

Un enlace de marcador de posición es para casos en los que desea utilizar un elemento de anclaje, pero no hacer que navegue a ningún lado. Esto es útil para marcar la página actual en un menú de navegación o ruta de navegación. (El enfoque anterior hubiera sido usar una etiqueta de extensión o una etiqueta de anclaje con una clase llamada "activa" o "actual" para darle estilo y JavaScript para cancelar la navegación).

Un enlace de marcador de posición también es útil en los casos en que desea establecer dinámicamente el destino del enlace a través de JavaScript en tiempo de ejecución. Simplemente establece el valor del atributo href y la etiqueta de anclaje se puede hacer clic.

Ver también:

dthrasher
fuente
3
¿Cuál es la definición de un "enlace de marcador de posición"?
Gyum Fox
14
Tome en cuenta que sin un hrefel cursor: pointerestilo no se añadirá automáticamente al elemento.
Lucas
38

Está bien, pero al mismo tiempo puede hacer que algunos navegadores se vuelvan lentos.

http://webdesignfan.com/yslow-tutorial-part-2-of-3-reducing-server-calls/

Mi consejo es usar <a href="#"> </a>

Si está utilizando JQuery, recuerde usar también:

.click(function(event){
    event.preventDefault();
    // Click code here...
});
Gunnar Hoffman
fuente
77
No puedo usar href = "#" porque estoy usando marcadores ajax que implica cambiar el hash, ¿qué puedo hacer?
John
55
En lugar de usar javascript: void (0); dentro del href uso javascript :; Es más corto de escribir.
Ally
16
La penalización de rendimiento solo se aplica si realmente especifica un atributo href vacío. La pregunta establece que no hay ningún atributo href en absoluto.
Pete B
18
En realidad, de acuerdo con el artículo (y tiene sentido), la penalización de rendimiento potencial solo se aplica a los atributos src vacíos . No dice nada sobre el rendimiento en cuanto a los atributos href vacíos.
bergie3000
1
Hola @Gunnar, el enlace parece haberse ido ahora. ¿Tiene otra referencia para el reclamo?
user31782
25

Respuesta corta: no.

Respuesta larga:

Primero, sin un atributo href, no será un enlace. Si no es un enlace, entonces no será accesible el teclado (o el interruptor de respiración, u otro dispositivo de entrada no basado en puntero) (a menos que use características HTML 5 de las tabindexcuales no son compatibles universalmente). Es muy raro que sea apropiado que un control no tenga acceso al teclado.

Segundo. Debería tener una alternativa para cuando el JavaScript no se ejecuta (debido a que la carga del servidor fue lenta, se cortó la conexión a Internet (por ejemplo, señal móvil en un tren en movimiento), JS está apagado, etc., etc.).

Utilice la mejora progresiva de JS discreto.

Quentin
fuente
El problema es que quiero algo a lo que pueda adjuntar un evento de clic con el método de "clic" de jQuery, que también se resalta y subraya como un enlace cuando el mouse pasa sobre él. ¿Qué más, además de una etiqueta de anclaje sin href puede lograr eso sin CSS? (es decir, tal como está sin agregar manualmente esa interacción básica, al tiempo que conserva la simplicidad de una asignación de función de clic directo a través de jQuery).
Triynko
@Triynko: utilice un enlace, pero hágalo correctamente. Ver la última línea de la respuesta.
Quentin
55
Tabindex en las etiquetas 'a' ha sido válido desde HTML4 (al menos) w3schools.com/tags/att_global_tabindex.asp
technoTarek
@technoTarek: Sí, pero hrefera obligatorio (a menos que fuera un ancla con nombre en cuyo caso tabindex no tenía sentido). El uso de tabindexagregar elementos desenfocables al orden de tabulación es una nueva innovación en HTML 5.
Quentin
44
Esto simplemente está mal. No puedo decir si estaba haciendo referencia a una especificación anterior para HTML en ese momento, pero de acuerdo con la especificación HTML5, de hecho es perfectamente válido tener una aetiqueta sin un hrefatributo.
michael
23

Si tiene que usar href para la compatibilidad con versiones anteriores, también puede usar

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

en lugar de #, si no quieres usar el atributo

Rasivo
fuente
1
Necesitaba una etiqueta <a> que se comportara como un enlace en todos, excepto en la función. Esto hizo el truco para mí.
Jad S
13

La etiqueta está bien para usar sin un atributo href. Contrariamente a muchas de las respuestas aquí, en realidad hay razones estándar para crear un ancla cuando no hay href. Semánticamente, "a" significa un ancla o un enlace. Si lo usas para cualquier cosa que siga ese significado, entonces estás bien.

Un uso estándar de la etiqueta a sin href es crear enlaces con nombre. Esto le permite usar un ancla con name = blah y luego puede crear un ancla con href = # blah para vincular a la sección con nombre de la página actual. Sin embargo, esto ha quedado en desuso porque también puede usar ID de la misma manera. Como ejemplo, podría usar una etiqueta de encabezado con id = header y luego podría tener un ancla que apunta a href = # header.

Mi punto, sin embargo, no es sugerir el uso de la propiedad de nombre. Solo para proporcionar un caso de uso donde no necesita un href y, por lo tanto, razona por qué no es necesario.

monokrome
fuente
2
Creo que lo que la pregunta intentaba hacer y lo que las otras respuestas abordan es si es seguro omitir el hrefatributo de un <a>elemento que se está utilizando como elemento interactivo (es decir, un enlace). Como mencionas, sin un hrefatributo es simplemente ... no un enlace, solo un ancla, que es algo completamente diferente.
BoltClock
1
Sí, pero, solo para enfatizar, la etiqueta <a> sigue siendo válida en estos casos de uso.
monokrome
9

Desde una perspectiva de accesibilidad <a>sin href no se pueden tabular, todos los enlaces deben poder tabularse, así que agregue un tabindex = '0 "si no tiene un href.

usuario3862605
fuente
1
O use un botón si va a realizar una acción en la página en lugar de una redirección.
SimonDever
8

La <a>etiqueta sin el "href" puede ser útil cuando se utilizan menús de varios niveles y necesita expandir el siguiente nivel, pero no desea que la etiqueta del menú sea un enlace activo. Nunca he tenido ningún problema al usarlo de esa manera.

Jon
fuente
1
¿Has intentado acceder a ese menú con el teclado?
aij
Me acabo de enterar que en IE, si pasas el mouse sobre algunos enlaces y uno es un ancla sin href, la pequeña ventana emergente con la URL a continuación permanece allí, mostrando la URL anterior, en lugar de desaparecer. Sin embargo, no se puede hacer clic en el ancla, por lo que no es un gran problema, pero es suficiente para que yo vaya con un div.
Andrew
1

En algunos navegadores, tendrá problemas si no está dando un atributo href. Le sugiero que escriba su código más o menos así:

<a href="#" onclick="yourcode();return false;">Link</a>

puede reemplazar yourcode () con su propia función o lógica, pero recuerde agregar return false; declaración al final.

shashwat13
fuente
Estoy usando Backbone.js con Backbone.Router y tengo #para la página de índice. Para algunos de mis enlaces de barra de navegación, no quiero activar una ruta a la #que es lo que sucede si lo usa a href="#"solo. El uso <a href="#" onclick="return false;"detiene la ruta que se desencadena, pero el evento de clic todavía aparece en mi controlador (que usa eventos DOM conectados a través de jQuery y Backbone.Radio). Gracias @ shashwat13 :)
David Williamson