En muchos sitios web veo enlaces que tienen href="#". Qué significa eso? ¿Para qué se usa esto?
En muchos sitios web veo enlaces que tienen href="#". Qué significa eso? ¿Para qué se usa esto?
Respuestas:
El uso principal de las etiquetas de anclaje <a></a>- es como hipervínculos . Eso básicamente significa que te llevan a algún lado. Los hipervínculos requieren la hrefpropiedad, ya que especifica una ubicación.
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="https://stackoverflow.com//site.com/#some-id"iría site.comy se desplazaría a la identificación en esa página.
href="#"no especifica un nombre de identificación, pero tiene una ubicación correspondiente: la parte superior de la página. Al hacer clic en un ancla con href="#"moverá la posición de desplazamiento a la parte superior.
Este es el comportamiento esperado de acuerdo con la documentación de w3.
Un ejemplo en el que un marcador de posición de hipervínculo tiene sentido es en las vistas previas de plantillas. En demostraciones de una sola página para plantillas, a menudo he visto <a href="#">que la etiqueta de anclaje es un hipervínculo, pero no va a ninguna parte. ¿Por qué no dejar la hrefpropiedad en blanco? Una hrefpropiedad en blanco es en realidad un hipervínculo a la página actual. En otras palabras, provocará una actualización de la página. Como lo mencioné, href="#"también es un hipervínculo y provoca desplazamiento. Por lo tanto, la mejor solución para los marcadores de posición de hipervínculo es en realidad href="#!"La idea aquí es que, con suerte, no hay un elemento en la página con id="!"(¿quién hace eso?
Otra pregunta que quizás se esté preguntando es: "¿Por qué no dejar la propiedad href desactivada?". Una respuesta común que he escuchado es que la hrefpropiedad es necesaria, por lo que "debería" estar presente en las anclas. Esto es falso! ¡La hrefpropiedad se requiere solo para que un ancla sea realmente un hipervínculo! Lea esto de w3. Entonces, ¿por qué no dejarlo solo para los marcadores de posición? Los navegadores representan estilos predeterminados para los elementos y cambiarán el estilo predeterminado de una etiqueta de ancla que no tenga la propiedad href. En cambio, se considerará como texto normal. Incluso cambia el comportamiento del navegador con respecto al elemento. La barra de estado (parte inferior de la pantalla) no se mostrará al pasar el mouse sobre un ancla sin la propiedad href. Es mejor usar un valor href de marcador de posición en un ancla para asegurarse de que se trate como un hipervínculo.
Vea esta demostración que demuestra las diferencias de estilo y comportamiento.
.click()método de jQuery en un <div></div>, no funcionará. O tiene que estar en un ancla o tienes que usar toucheventos.
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 identificación o nombre, entonces va "a ninguna parte".
Aquí hay otra pregunta similar hecha con HTML Anchors con 'nombre' o 'id'.
<a href="#">...</a>no estaba "yendo a ninguna parte", estaba saliendo de la página y cargando site.com/#. ¿Cómo es eso posible?
onclickcontrolador de eventos estaba vinculado a ese elemento, lo que provocó que se llamara a una función de JavaScript que lo redirigió a esa página.
Es un enlace que enlaza a ninguna parte esencialmente (solo agrega "#" a la URL). Se usa por varias razones diferentes. Por ejemplo, si está utilizando algún tipo de JavaScript / jQuery y no desea que el HTML real se vincule a ningún lado.
También se usa para anclas de página, que se usa para redirigir a una parte diferente de la página.
Desafortunadamente, el uso más común <a href="#">es por parte de programadores perezosos que desean elementos codificados con JavaScript sin hipervínculo que se comporten como anclas, pero no se les puede pedir que agreguen cursor: pointer;o agreguen :hoverestilos a una clase para sus elementos que no son hipervínculos, y además demasiado perezoso para ajustar hrefa javascript:void(0);.
El problema con esto es que uno <a href="#" onclick="some_function();">u otro inevitablemente termina con un error de JavaScript, y un ancla con un error de JavaScript onclick 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 usan <base>, <a href="#">se maneja como <a href="[base href]/#">, lo que resulta en una navegación inesperada. Si se generan errores retenibles, no los verá en el último caso a menos que habilite registros persistentes.
Si un elemento de anclaje se usa como un no-ancla, debe estar hrefconfigurado en javascript:void(0);aras de una degradación elegante .
Acabo de perder dos días depurando una redirección de página inesperada y aleatoria que simplemente debería haber actualizado la página, y finalmente la rastreé hasta una función que provocó el evento de clic de un <a href="#">. Reemplazar el #con lo javascript:void(0);arregló.
Lo primero que haré el lunes es purgar el proyecto de todas las instancias de <a href="#">.
<base>realmente hace una gran diferencia para el #. Gracias por señalar!
Las listas desordenadas a menudo se crean con la intención de usarlas como un menú, pero un lielemento de la lista es texto. Debido a que el lielemento de la lista 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 adentro de la lietiqueta hace que el puntero del mouse cambie a un dedo señalador. El dedo acusador es mucho mejor para usar la lista como 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 está utilizando para un menú y no necesita un enlace, entonces no es necesario designar una URL. Pero el problema es que si omite el hrefatributo, el texto en la <a>etiqueta se ve como texto y, por lo tanto, el puntero del mouse vuelve a ser un cursor I. 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.
Se podría usar un montón de divo petiquetas de una lista de menús, pero el puntero del ratón sería un cursor-I para ellos también.
Puede usar muchos botones apilados uno encima del otro para una lista de menú, pero la lista parece preferible. Y probablemente esa es la razón por la href="#"que ese 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. La href="#"nada podría ser la manera perezosa de establecer un estilo.
El problema con el uso de href = "#" para un enlace vacío es que lo llevará a la parte superior de la página, lo que puede no ser la acción deseada. Para evitar esto, para navegadores más antiguos o doctypes que no sean HTML5, use
<a href="javascript:void(0)">Goes Nowhere</a>Hasta donde sé, generalmente es un marcador de posición para los enlaces que tienen algo de JavaScript adjunto. El punto principal del enlace se sirve ejecutando el código JavaScript; los navegadores con soporte de JS ignoran el objetivo del enlace real. Si el navegador no es compatible con JS, la marca hash esencialmente convierte el enlace en no operativo. Ver también JavaScript discreto .
Como han señalado algunas de las otras respuestas, el aelemento requiere un hrefatributo y #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 atributo único requerido para los anclajes que definen un enlace de fuente 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, según la especificación HTML5 :
Si el elemento a no tiene atributo href, entonces el elemento representa un marcador de posición para el lugar donde de otro modo podría haberse colocado un enlace, si hubiera sido relevante, que consiste solo en el contenido del elemento.
El atributo href define la URL del recurso de un enlace. Si la etiqueta de anclaje no tiene etiqueta href, entonces no se convertirá en hipervínculo. El atributo href tiene los siguientes valores:
1. Absolute path: move to another site like href="http://www.google.com"
2. Relative path: move to another page within the site like herf ="defaultpage.aspx"
3. Move to an element with a specified id within the page like href="#bottom"
4. href="javascript:void(0)", it does not move anywhere.
5. href="#" , it does not move anywhere but scroll on the top of the current page.
6. href= "" , it will load the current page but some browsers causes forbidden errors.
Note: When we do not need to specified any url inside a anchor tag then use
<a href="javascript:void(0)">Test1</a>