2012-05-09 15 views
90

He estado usando Twitter Bootstrap para construir un sitio, y gran parte de su funcionalidad depende de envolver cosas en <a>, incluso si solo van a ejecutar Javascript. Tuve problemas con la táctica href="#" que la documentación de Bootstrap recomienda, así que estaba tratando de encontrar una solución diferente.Válido para usar <a> (etiqueta de anclaje) sin atributo href?

Pero luego intenté eliminar el atributo href por completo. He estado usando <a class='bunch of classes' data-whatever='data'> y tengo Javascript manejando el resto. Y funciona.

Sin embargo, algo me dice que no debería estar haciendo esto. ¿Derecha? Quiero decir, técnicamente <a> se supone que es un enlace a algo, pero no estoy del todo seguro por qué esto es un problema. ¿O es eso?

Respuesta

156

El elemento nchor <a> es simplemente un ancla hacia o desde algún contenido. Originalmente, la especificación HTML permitía anclas con nombre (<a name="foo">) y anclas vinculadas (<a href="#foo">).

El formato de anclaje con nombre se utiliza con menor frecuencia, ya que el identificador de fragmento ahora se utiliza para especificar un atributo [id] (aunque para la compatibilidad con versiones anteriores puede especificar atributos [name]). An <a> element without an [href] attribute is still valid.

En cuanto a la semántica y el estilo se refiere, el elemento <a> no es un enlace (:link) a menos que tenga un atributo [href]. Un efecto secundario de esto es que un elemento <a> sin [href] no estará en el orden de tabulación de forma predeterminada.

La verdadera pregunta es si el elemento <a> solo es una representación adecuada de <button>. En un nivel semántico, hay una clara diferencia entre link y button.

Un botón es algo que al hacer clic se produce una acción.

Un enlace es un botón que causa un cambio en la navegación en el documento actual. La navegación que se produce podría moverse dentro del documento en el caso de los identificadores de fragmentos (#foo) o pasar a un documento nuevo en el caso de las URL (/bar).

Como los enlaces son un tipo especial de botón, a menudo se han anulado sus acciones para realizar funciones alternativas. Continuar utilizando un ancla como un botón está bien desde un punto de vista de coherencia, aunque no es muy preciso semánticamente.

Si usted está preocupado acerca de la semántica y la accesibilidad de la utilización de un elemento <a> (o <span> o <div>) como un botón, se debe añadir los siguientes atributos:

<a role="button" tabindex="0" ...>...</a> 

El button role indica al usuario que el elemento particular se trata como un botón para anular cualquier semántica que el elemento subyacente pueda haber tenido.

Para <span> y <div> elementos, es posible que desee añadir detectores clave JavaScript para espacio o Introduzca para lanzar el evento click. <a href> y <button> elementos hacen esto de forma predeterminada, pero los elementos que no son botones no lo hacen. A veces tiene más sentido vincular el activador click a una clave diferente. Por ejemplo, un botón de "ayuda" en una aplicación web puede estar vinculado a F1.

+0

'href =" # "' He oído hablar de. 'javascript: void (0)' He oído hablar de. Esto que nunca había escuchado hasta ahora, pero parece tener más sentido. Esto es estándar y funciona en la mayoría de los navegadores, ¿verdad? – Zacqary

+0

@Zacqary, '[role =" button "]' no hace nada concreto, aún necesita escuchar el evento click (pero lo haría de todos modos para hacer un botón JS). Está destinado a ser utilizado para navegación asistida (también conocido como lectores de pantalla) para que el lector de pantalla sepa que representa el elemento como un botón en lugar de su valor semántico original. Al agregar '[tabindex]', se agrega el elemento al orden de tabulación. En circunstancias especiales, es posible que en realidad no desee/necesite que el botón sea navegable en el orden de tabulación, por lo que es un atributo opcional. Los elementos que ya son botones no necesitan '[role =" button "]' ya que es redundante. – zzzzBov

+0

¿Es válido HTML para tener una etiqueta de anclaje sin href y sin nombre? En nuestra aplicación, tenemos algunos enlaces de eliminación que están deshabilitados (por lo tanto, no hay atributo href), pero todavía se muestran al usuario. –

20

creo que se puede encontrar su respuesta aquí: Is an anchor tag without the href attribute safe?

Además, si quieres a ninguna operación de enlace con href, puede utilizarlo como:

<a href="javascript:void(0);">something</a> 
+2

en realidad debería ser 'javascript: undefined' – rybo111

+2

@ rybo111 que tienes razón, pero todavía prefiere void (0); básicamente porque se ve mejor No me gusta que mis clientes vean cosas como "indefinidas" ;-) – Alex

+4

'text'? – diynevala

4

Sí, es válida para usar la etiqueta de ancla sin un atributo href.

Si el elemento no tiene ahref atributo, entonces el elemento representa un marcador de posición para donde de otro modo podría haber sido colocado un enlace, si había sido relevante, que consta de sólo el contenido del elemento.

Sí, puede utilizar class y otros atributos, pero no se puede utilizar target, download, rel, hreflang y type.

Los target, download, rel, hreflang y type atributos deben ser omitirse si el atributo href no está presente.

En cuanto a la "¿Debo?" Parte, ver la primera cita: "donde de otro modo podría haber sido colocado un enlace si hubiera sido relevante". Entonces preguntaría "Si no tuviera JavaScript, ¿usaría esta etiqueta como un enlace?". Si la respuesta es sí, entonces sí, debe usar <a> sin href. Si no, aún así lo usaría, porque la productividad es más importante para mí que la semántica de los casos extremos, pero esta es solo mi opinión personal.

Además, usted debe mirar hacia fuera para diferentes behaviour y styling (por ejemplo, no subrayado, ningún cursor de puntero, no un :link).

Fuente: W3C HTML5 Recommendation

4

Es válido. Puede, por ejemplo, usarlo para mostrar los modales (o cosas similares que responden a los atributos data-toggle y data-target).

Algo así como:

<a role="button" data-toggle="modal" data-target=".bs-example-modal-sm" aria-hidden="true"><i class="fa fa-phone"></i></a> 

Aquí, he utilizado el icono de fuente-impresionante, que es mejor como una etiqueta a en lugar de un button, para mostrar un referente. Además, establecer role="button" hace que el puntero cambie a un tipo de acción. Sin href o role="button", el puntero del cursor no cambia.

Cuestiones relacionadas