¿Válido para usar <a> (etiqueta de anclaje) sin atributo href? [duplicar]
He estado usando Twitter Bootstrap para crear un sitio, y gran parte de su funcionalidad depende de envolver cosas en <a>
, incluso si solo van a ejecutar Javascript. he tenido problemas con elhref="#"
táctica que recomienda la documentación de Bootstrap, así que estaba tratando de encontrar una solución diferente.
Pero luego intenté eliminar el href
atributo por completo. he estado usando<a class='bunch of classes' data-whatever='data'>
y haciendo que Javascript se encargue del resto. Y funciona.
Sin embargo, algo me dice que no debería estar haciendo esto. ¿Bien? Quiero decir, técnicamente <a>
se supone que es un enlace a algo, pero no estoy del todo seguro de por qué esto es un problema. ¿O es eso?
El <a>
elemento ancla es simplemente un ancla hacia o desde algún contenido. Originalmente, la especificación HTML permitía anclajes con nombre ( <a name="foo">
) y anclajes vinculados (<a href="#foo">
).
El formato de anclaje con nombre se usa con menos frecuencia, ya que el identificador de fragmento ahora se usa para especificar un [id]
atributo (aunque por compatibilidad con versiones anteriores aún puede especificar [name]
atributos). Un <a>
elemento sin [href]
atributo sigue siendo válido .
En lo que respecta a la semántica y el estilo, el <a>
elemento no es un enlace ( :link
) a menos que tenga un [href]
atributo. Un efecto secundario de esto es que un <a>
elemento sin[href]
no estará en el orden de tabulación de forma predeterminada.
La verdadera pregunta es si el <a>
elemento por sí solo es una representación apropiada de a <button>
. A nivel semántico, existe una clara diferencia entre a link
y a button
.
Un botón es algo que cuando se hace clic provoca que se produzca una acción.
Un enlace es un botón que provoca un cambio en la navegación en el documento actual. La navegación que se produce podría ser moviéndose dentro del documento en el caso de identificadores de fragmentos ( #foo
) o moviéndose a un nuevo documento en el caso de URL (/bar
).
Como los enlaces son un tipo especial de botón, a menudo se han anulado sus acciones para realizar funciones alternativas. Continuar usando un ancla como botón está bien desde el punto de vista de la coherencia, aunque no es del todo exacto semánticamente.
Si le preocupa la semántica y la accesibilidad del uso de un <a>
elemento (o <span>
, o <div>
) como botón, debe agregar los siguientes atributos:
<a role="button" tabindex="0" ...>...</a>
El papel del botón le dice al usuario que el elemento en particular está siendo tratado como un botón como una anulación de cualquier semántica que pueda haber tenido el elemento subyacente.
Para los elementos <span>
y <div>
, es posible que desee agregar detectores de claves de JavaScript Spaceo Enteractivar el click
evento. <a href>
y <button>
los elementos hacen esto de forma predeterminada, pero los elementos que no son botones no. A veces tiene más sentido vincular el click
disparador a una clave diferente. Por ejemplo, un botón de "ayuda" en una aplicación web podría estar vinculado a F1.
Creo que puede encontrar su respuesta aquí: ¿Es segura una etiqueta de anclaje sin el atributo href?
Además, si no desea realizar ninguna operación de enlace con href, puede usarlo como:
<a href="javascript:void(0);">something</a>
Sí, es válido utilizar la etiqueta de anclaje sin href
atributo.
Si el
a
elemento no tiene ningúnhref
atributo, entonces el elemento representa un marcador de posición donde se podría haber colocado un enlace, si hubiera sido relevante, y que consta solo del contenido del elemento.
Sí, puedes usar class
y otros atributos, pero no puedes usar target
, download
, rel
, hreflang
ytype
.
Los atributos
target
,download
,rel
,hreflang
ytype
deben omitirse si el atributo href no está presente.
En cuanto a la parte "¿ Debería? ", consulte la primera cita: " donde, de otro modo, se podría haber colocado un enlace si hubiera sido relevante ". Entonces preguntaría " Si no tuviera JavaScript, ¿usaría esta etiqueta como enlace? ". Si la respuesta es sí, entonces sí, deberías utilizar <a>
sin href
. Si no, todavía 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, debe tener cuidado con los diferentes comportamientos y estilos (por ejemplo, sin subrayado, sin cursor, sin :link
).
Fuente: Recomendación HTML5 del W3C