html - significa - ¿Válido para usar<a>(etiqueta de anclaje) sin el atributo href?
href html ejemplos (4)
He estado usando Twitter Bootstrap para construir un sitio, y gran parte de su funcionalidad depende de incluir cosas en <a> , incluso si solo van a ejecutar Javascript. He tenido problemas con la táctica href="#" que la documentación de Bootstrap recomienda, así que estaba tratando de encontrar una solución diferente.
Pero luego intenté eliminar el atributo href 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 de por qué esto es un problema. ¿O es eso?
Creo que puede encontrar su respuesta aquí: ¿Es segura una etiqueta de anclaje sin el atributo href?
Además, si no desea vincular la operación con href, puede usarla como:
<a href="javascript:void(0);">something</a>
El elemento <a> nchor 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 usa para especificar un atributo [id] (aunque para la compatibilidad con versiones anteriores aún puede especificar atributos [name] ). Un elemento <a> sin un atributo [href] sigue siendo válido .
En lo que respecta a la semántica y el estilo, 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 por defecto.
La verdadera pregunta es si el elemento <a> solo es una representación adecuada de un <button> . En un nivel semántico, hay una clara diferencia entre un link y un button .
Un botón es algo que cuando se hace clic provoca 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 fragmento ( #foo ) o moverse a un nuevo documento en el caso de las urls ( /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 le preocupa la semántica y la accesibilidad para usar un elemento <a> (o <span> , o <div> ) como un botón, debe agregar los siguientes atributos:
<a role="button" tabindex="0" ...>...</a>
La función de botón le dice al usuario que el elemento particular se trata como un botón para anular cualquier semántica que haya tenido el elemento subyacente.
Para los elementos <span> y <div> , es posible que desee agregar oyentes de clave JavaScript para Espacio o Intro para activar el evento de click . <a href> y <button> hacen esto de forma predeterminada, pero los elementos que no son botones no lo hacen. A veces tiene más sentido vincular el disparador de click a una tecla diferente. Por ejemplo, un botón de "ayuda" en una aplicación web podría estar vinculado a F1 .
Es válido. Puede, por ejemplo, usarlo para mostrar modales (o cosas similares que responden a atributos de data-toggle data-target ).
Algo como:
<a role="button" data-toggle="modal" data-target=".bs-example-modal-sm" aria-hidden="true"><i class="fa fa-phone"></i></a>
Aquí uso el ícono font-awesome, que es mejor como a etiqueta que como un button , para mostrar un modal. Además, establecer role="button" hace que el puntero cambie a un tipo de acción. Sin href ni role="button" , el puntero del cursor no cambia.
Sí, es válido usar la etiqueta de anclaje sin un atributo href .
Si el elemento a no tiene ningún atributo
href, entonces el elemento representa un marcador de posición para el lugar en el que, de otro modo, se podría haber colocado un enlace, si hubiera sido relevante, que consistiría solo en el contenido del elemento.
Sí, puede usar class y otros atributos, pero no puede usar target , download , rel , hreflang y type .
Los
reltarget,download,rel,hreflangytypedeben omitirse si el atributo href no está presente.
En cuanto a la parte " ¿Debería? ", Consulte la primera cita: " donde podría haberse 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, debe tener cuidado con los diferentes behaviour y styling (por ejemplo, sin subrayado, sin cursor de puntero, no con un :link ).
Fuente: Recomendación W3C HTML5