html - tipos - que significa alt en una imagen
¿Qué es href="#" y por qué se usa? (8)
Acerca de los hipervínculos:
El uso principal de las etiquetas de anclaje, <a></a>
, es como hyperlinks . Eso básicamente significa que te llevan a algún lado. Los hipervínculos requieren la propiedad href
, porque especifica una ubicación.
Picadillo:
Un hash - #
dentro de un hipervínculo especifica una identificación de elemento html a la que se debe desplazar la ventana.
href="#some-id"
se desplazaría a un elemento en la página actual como <div id="some-id">
.
href="//site.com/#some-id"
iría a site.com
y se desplazaría al ID en esa página.
Vuelve al comienzo:
href="#"
no especifica un nombre de ID, pero tiene una ubicación correspondiente, la parte superior de la página. Al hacer clic en un ancla con href="#"
se moverá la posición de desplazamiento hacia arriba.
Este es el comportamiento esperado según la documentación de w3.
Marcadores de hipervínculo:
Un ejemplo en el que un marcador de hipervínculo tiene sentido está dentro de las vistas previas de la plantilla En demostraciones de una sola página para plantillas, a menudo he visto <a href="#">
modo que la etiqueta de anclaje es un hipervínculo, pero no va a ninguna parte. ¿Por qué no dejar la propiedad href
blanco? Una propiedad href
blanco es en realidad un hipervínculo a la página actual. En otras palabras, causará una actualización de la página. Como comenté, href="#"
también es un hipervínculo y provoca el desplazamiento. Por lo tanto, la mejor solución para los hipervínculos es realmente href="#!"
La idea aquí es que, con suerte, no hay un elemento en la página con id="!"
(¿Quién hace eso?) y, por lo tanto, el hipervínculo no se refiere a nada, por lo que no sucede nada.
Acerca de las etiquetas de anclaje:
Otra pregunta que quizás se pregunte es: "¿Por qué no dejar la propiedad href fuera?". Una respuesta común que he escuchado es que la propiedad href
es obligatoria, por lo que "debería" estar presente en los anclajes. ¡Esto es FALSO! La propiedad href
solo es necesaria para que un ancla sea un hipervínculo. Lee esto desde w3 . Entonces, ¿por qué no dejarlo solo para los marcadores de posición? Los navegadores representan los estilos predeterminados para los elementos y cambiarán el estilo predeterminado de una etiqueta de anclaje que no tiene la propiedad href. En su lugar, será considerado como texto regular. Incluso cambia el comportamiento del navegador respecto al elemento. La barra de estado (parte inferior de la pantalla) no se mostrará cuando se desplace sobre un ancla sin la propiedad href. Es mejor utilizar un valor href de marcador de posición en un ancla para asegurarse de que se trata como un hipervínculo.
Vea esta demostración que demuestra las diferencias de estilo y comportamiento.
En muchos sitios web veo enlaces que tienen href="#"
. Qué significa eso? ¿Para qué se usa esto?
Como algunas de las otras respuestas han señalado, el elemento a requiere un atributo href
y el #
se usa como marcador de posición, pero también es un artefacto histórico.
Desde la Red de Desarrolladores de Mozilla :
href
Este fue el único atributo requerido para los anclajes que definen un enlace de origen de hipertexto, pero ya no es necesario en HTML5. Omitir este atributo crea un enlace de marcador de posición. El atributo href indica el destino del enlace, ya sea una URL o un fragmento de URL. Un fragmento de URL es un nombre precedido por una marca hash (#), que especifica una ubicación de destino interna (una ID) dentro del documento actual.
Además, por la spec HTML5:
Si el elemento a no tiene un atributo href, entonces el elemento representa un marcador de posición donde, de lo contrario, un enlace podría haber sido colocado, si hubiera sido relevante, y consistiría solo en el contenido del elemento.
Desafortunadamente, el uso más común de <a href="#">
es por programadores perezosos que desean elementos codificados en javascript sin hipervínculo que se pueden hacer clic como anclas, pero no pueden ser arsados para agregar cursor: pointer;
o :hover
estilos a una clase para sus elementos sin hipervínculo, y además es demasiado perezoso para establecer href
en javascript:void(0);
.
El problema con esto es que uno <a href="#" onclick="some_function();">
inevitablemente termina con un error de javascript, y un ancla con un error de onclick javascript siempre termina después de su href
. Normalmente, esto termina siendo un salto molesto a la parte superior de la página, pero en el caso de los sitios que utilizan <base>
, <a href="#">
se maneja como <a href="[base href]/#">
, resultando en una navegación inesperada. Si se generan errores registrables, no los verá en este último caso a menos que habilite los registros persistentes.
Si un elemento de anclaje se utiliza como un no ancla, debe tener su href
establecido en javascript:void(0);
por el bien de la degradación agraciada .
Acabo de perder dos días depurando un redireccionamiento inesperado aleatorio de la página que simplemente debería haber actualizado la página, y finalmente lo <a href="#">
hasta una función que <a href="#">
el evento de clic de un <a href="#">
. Reemplazando el #
con javascript:void(0);
arreglado.
Lo primero que hago el lunes es purgar el proyecto de todas las instancias de <a href="#">
.
El problema con el uso de href = "#" para un enlace vacío es que lo llevará a la parte superior de la página, que puede no ser la acción deseada. Para evitar esto, para navegadores más antiguos o tipos de documentos que no sean HTML5, use
<a href="javascript:void(0)">Goes Nowhere</a>
Es un enlace que enlaza con ninguna parte esencialmente (solo agrega "#" a la URL). Se utiliza por una serie de razones diferentes. Por ejemplo, si está utilizando algún tipo de JavaScript / jQuery y no quiere que el HTML real se vincule en ningún lugar.
También se usa para anclajes de página, que se usa para redirigir a una parte diferente de la página.
Las listas desordenadas a menudo se crean con la intención de usarlas como un menú, pero un elemento de la lista li
es texto. Debido a que el elemento de la lista li
es texto, el puntero del mouse no será una flecha, sino un "cursor I". Los usuarios están acostumbrados a ver un dedo señalador para un puntero del mouse cuando se puede hacer clic en algo. El uso de una etiqueta de anclaje dentro de la etiqueta li
hace que el puntero del mouse cambie a un dedo que apunta. El dedo señalador es mucho mejor para usar la lista como un menú.
<ul id="menu">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a></li>
</ul>
Si la lista se utiliza para un menú y no necesita un enlace, no es necesario que se designe una URL. Pero el problema es que si deja de lado el atributo href
, el texto en la etiqueta <a>
se verá como texto y, por lo tanto, el puntero del mouse regresará a un I-cursor. El cursor I puede hacer que el usuario piense que no se puede hacer clic en el elemento del menú. Por lo tanto, aún necesita un href
, pero no necesita un enlace a ninguna parte.
Podría usar muchas etiquetas div
o p
para una lista de menú, pero el puntero del mouse también sería un cursor I para ellas.
Podría usar muchos botones apilados uno encima del otro para una lista de menú, pero la lista parece ser preferible. Y esa es probablemente la razón por la que href="#"
que apunta a ninguna parte se usa en etiquetas de anclaje dentro de las etiquetas de lista.
Puede configurar el estilo del puntero en CSS, por lo que es otra opción. El href="#"
a ninguna parte podría ser la forma perezosa de establecer un estilo.
Poner el símbolo "#" como href para algo significa que no apunta a una URL diferente, sino a otra identificación o etiqueta de nombre en la misma página. Por ejemplo:
<a href="#bottomOfPage">Click to go to the bottom of the page</a>
blah blah
blah blah
...
<a id="bottomOfPage"></a>
Sin embargo, si no hay un id o nombre, entonces va "no a dónde".
Aquí hay otra pregunta similar hecha con anclajes HTML con ''nombre'' o ''id''?
Por lo que sé, generalmente es un marcador de posición para enlaces que tienen algunos JavaScript adjuntos. El punto principal del enlace se sirve mediante la ejecución del código JavaScript; Los navegadores compatibles con JS ignoran el objetivo de enlace real. Si el navegador no es compatible con JS, la marca hash esencialmente convierte el enlace en un no-op. Véase también JavaScript discreto .