¿Es válido un href vacío?

179

Uno de nuestros desarrolladores web utiliza el siguiente html como marcador de posición para diseñar una lista desplegable.

<a href="" class="arrow"></a>

¿Se considera válida esta etiqueta de anclaje?

Como no hay un valor href, aparece como roto en algunos de nuestros informes de verificación de enlaces.

Mateo
fuente
10
¡Sin embargo, no funciona en IE! Bueno, funciona en IE pero con un comportamiento completamente diferente, en contra de las especificaciones. Por lo tanto, es válido según las especificaciones, pero no en la práctica: (((
ZhongYu
Ampliando lo que dijo bayou.io, IE enlaza con el directorio sobre el documento: stackoverflow.com/questions/7966791/…
Nate
1
Sí, un href vacío en versiones anteriores de IE (7/8, etc.) podría tener malas consecuencias, como el listado de directorios. Hay mucho documentado sobre el tema si lo buscas en Google
Ringo
por ejemplo: gtmetrix.com/avoid-empty-src-or-href.html . No importa solo los navegadores antiguos, afecta a los navegadores IE, Edge y Webkit actuales.
Ringo

Respuestas:

60

Aunque esta pregunta ya está respondida ( tl; dr: sí, un hrefvalor vacío es válido), ninguna de las respuestas existentes hace referencia a las especificaciones relevantes.

Una cadena vacía no puede ser un URI. Sin embargo, el hrefatributo no solo toma los URI como valor, sino también las referencias de URI. Una cadena vacía puede ser una referencia de URI.

HTML 4.01

HTML 4.01 usa RFC 2396 , donde dice en la sección 4.2. Referencias del mismo documento (énfasis en negrita mío):

Una referencia de URI que no contiene un URI es una referencia al documento actual. En otras palabras, una referencia de URI vacía dentro de un documento se interpreta como una referencia al comienzo de ese documento , y una referencia que contiene solo un identificador de fragmento es una referencia al fragmento identificado de ese documento.

RFC 2396 está obsoleto por RFC 3986 (que actualmente es el estándar URI de IETF ), que esencialmente dice lo mismo .

HTML5

HTML5 utiliza ( URL válida potencialmente rodeada de espaciosURL válida ) la especificación de URL del W3C , que ha sido descontinuada. El estándar URL de WHATWG se debe utilizar en su lugar (consulte la última sección).

HTML 5.1

HTML 5.1 utiliza ( URL válida potencialmente rodeada de espaciosURL válida ) URL estándar de WHATWG (consulte la siguiente sección).

WHATWG HTML

El HTML de WHATWG usa ( URL válida potencialmente rodeada de espacios ) la definición de cadena URL válida del Estándar URL de WHATWG , donde dice que puede ser una cadena de URL relativa con fragmento , que debe ser al menos una cadena de URL relativa , que puede ser una cadena URL relativa a la ruta relativa sin esquema , que es una cadena URL relativa a la ruta que no comienza con una cadena de esquema seguida por :, y su definición dice (énfasis en negrita mío):

Una cadena de URL relativa a la ruta debe ser cero o más cadenas de segmento de ruta de URL, separadas entre sí por U + 002F (/), y no comenzar con U + 002F (/).

unor
fuente
184

Es válido.

Sin embargo, la práctica estándar es usar href="#"o algunas veces href="javascript:;".

SLaks
fuente
23
Como se indica en RFC 2396: una referencia de URI que no contiene un URI es una referencia al documento actual. En otras palabras, una referencia de URI vacía dentro de un documento se interpreta como una referencia al comienzo de ese documento,
Oct
32
cuando hago clic href="#", el foco se mueve a la parte superior de la página en IE, así que creo que href="javascript:;"es mejor
Deckard
32
href = "#" es un antipatrón. Agrega una entrada adicional al historial del navegador y, en algunos casos, hace que el navegador se desplace hacia arriba, simplemente puede omitir el atributo href si no lo está usando. el valor predeterminado será "" y, por lo tanto, volverá a cargar la página si no está impedido.
Tosh
16
@tosh, no, estoy bastante seguro de que si omites el atributo href, el elemento <a> no tiene el estilo de un enlace, no es enfocable y no crea un enlace como <a href = "" > o <a href> lo hace. Si funciona para usted, ¿podría compartir un JSFiddle que lo muestre?
Gui Prá
66
@tosh, ¿sabes lo que es gracioso? Aparentemente desde HTML5, omitir el atributo debería funcionar de esa manera, ver w3.org/TR/html5/text-level-semantics.html#the-a-element (Gracias halfdan por enviar esa respuesta a continuación). Aparentemente esto no ha sido implementado por los proveedores todavía, y dado que todavía es solo una recomendación del candidato, es difícil saber si se mantendrá en el estándar final o si los proveedores cumplirán antes.
Gui Prá
115

Como otros han dicho, es válido.

Sin embargo, hay algunos inconvenientes en cada enfoque:

href="#" agrega una entrada adicional al historial del navegador (lo cual es molesto cuando, por ejemplo, se abotona).

href="" recarga la página

href="javascript:;" no parece tener ningún problema (aparte de verse desordenado y sin sentido), ¿alguien sabe de alguno?

Hasta el arroyo
fuente
22
Otro interesante es href = "//: 0", que no hará una solicitud al servidor ni dejará ningún historial.
diachedelic
2
El //: 0 hace que algunas de mis imágenes no se carguen en Chrome. Parece que Chrome interpreta eso como recibir un comando de cancelación.
David Grenier
55
href: "javascript :;" era justo lo que necesitaba para que las cosas funcionaran tanto en Android como en iOS webviews
dumazy
2
IE enlaza con el directorio sobre el documento: stackoverflow.com/questions/7966791/…
Nate
1
No he probado esto, pero sospecho que href = "javascript :;" violaría la Política de seguridad de contenido que no permite JavaScript en línea. Si tiene la intención de activar esta política, utilizaría una de las alternativas.
Mark Good
60

Si bien puede ser HTML completamente válido no incluir un href, especialmente con un controlador onclick, hay algunas cosas a tener en cuenta: no podrá enfocarse en el teclado sin tener un valor de tabindex establecido. Además, esto será inaccesible para el software del lector de pantalla que usa Internet Explorer, ya que IE informará a través de las interfaces de accesibilidad que cualquier elemento de anclaje sin un atributo href no puede enfocarse, independientemente de si se ha establecido el índice de tabulación.

Entonces, aunque lo siguiente puede ser completamente válido:

<a class="arrow">Link content</a>

Es mucho mejor agregar explícitamente un atributo href de efecto nulo

<a href="javascript:void(0);" class="arrow">Link content</a>

Para un soporte completo de todos los usuarios, si está utilizando la clase con CSS para representar una imagen, también debe incluir algo de contenido de texto, como el atributo de título para proporcionar una descripción textual de lo que está sucediendo.

<a href="javascript:void(0);" class="arrow" title="Go to linked content">Link content</a>
Mella
fuente
1
Gracias por mencionar que omitir hrefinterferirá con las interfaces de accesibilidad.
Daniel Sokolowski
1
También agregaría, desde una perspectiva de accesibilidad, que establecer el hrefvalor en algo más que una ruta relativa / absoluta causará problemas con el lector de pantalla. Evite usar un símbolo de hash / libra como solución para este problema, ya que no está destinado a esto. Los lectores de pantalla pueden (actualmente VoiceOver lo hace) anunciar que su enlace es un identificador de fragmento (enlace a algún lugar de la página actual) y también es válido desde un punto de vista estándar. ver w3.org/2001/tag/2011/01/HashInURI-20110115#NakedHash
Michel Hébert
27

El borrador HTML5 actual también permite omitir el atributo href por completo.

Si el elemento a no tiene atributo href, entonces el elemento representa un marcador de posición para el lugar donde se podría haber colocado un enlace, si hubiera sido relevante.

Para responder a su pregunta: Sí, es válido.

Halfdan
fuente
66
sí, PERO: un <a>elemento sin hrefestá diseñado directamente en algunos navegadores. Por ejemplo, los estilos ": hover" no funcionan en Chrome (y otras cosas raras)
Alex
Una <a>etiqueta sin un hrefrepresenta algo más , no un enlace (tradicionalmente un ancla). Además, hay una diferencia entre un atributo opcional y un atributo que puede estar vacío.
Kobi
19

De hecho, puede dejarlo vacío (el validador W3 no se queja).

Llevando la idea un paso más allá: omita el = "". La ventaja de esto es que el enlace no se trata como un ancla para la página actual.

<a href>sth</a>
anroots
fuente
Aunque: <a href></a>Atributo href sin un valor explícito visto. El atributo puede ser eliminado por IE7.
c24w
1
También me gusta esta solución. ¿Conoces alguna otra desventaja, excepto el comportamiento de IE7?
rinat.io
Esta es una sintaxis ilegal. De acuerdo con la especificación "La sintaxis [Atributo vacío] está permitida solo para atributos booleanos".
Robert Siemer
9

Si bien el validador de W3 puede no quejarse de un hrefatributo vacío , el Borrador de trabajo HTML5 actual especifica:

El hrefatributo on ay los areaelementos deben tener un valor que sea una URL válida potencialmente rodeada de espacios.

Una URL válida es una URL que cumple con el estándar de URL . Ahora, el estándar de URL es un poco confuso para entenderlo, sin embargo, en ninguna parte se indica que una URL puede ser una cadena vacía.

... lo que significa que una cadena vacía no es una URL válida.

Sin embargo, el Borrador de Trabajo HTML5 continúa:

Nota: El hrefatributo en ay areaelementos no es obligatorio ; cuando esos elementos no tienen hrefatributos, no crean hipervínculos.

Esto significa que simplemente podemos omitir el hrefatributo por completo:

<a class="arrow"></a>

Si su intención es que estos elementos hrefsin código requieran la interacción del ateclado, tendrá que seguir la ruta normal de asignación de roley tabindexjunto con sus controladores habituales de clic / tecla:

<a class="arrow" role="button" tab-index="0"></a>
James Donnelly
fuente
En efecto. Desafortunadamente, como lo citó, dejarlo fuera hrefhace que no sea un hipervínculo, lo que hace que la onclickfuncionalidad sea inaccesible para los usuarios del teclado.
aij
7

Una palabra de precaución:

En mi experiencia, omitir el hrefatributo causa problemas de accesibilidad ya que la navegación del teclado lo ignorará y nunca lo enfocará como lo hará cuando href esté presente. Incluir manualmente su elemento en el índice tabin es una forma de evitarlo.

Jason
fuente
3

es válido pero como UpTheCreek dijo 'Hay algunos inconvenientes en cada enfoque'

si está llamando a ajax a través de una etiqueta, deje href = "" de esta manera, la página se volverá a cargar y el código de ajax nunca se llamará ...

acabo de recibir este pensamiento sería bueno compartir

Ray Tsai
fuente
2

Intenta hacerlo en su <a href="#" class="arrow">lugar. (Tenga en cuenta el #carácter agudo ).

elvenbyte
fuente