¿Qué sucede cuando un enlace tiene un signo de almohadilla "#"?

93

He inspeccionado algunos sitios y tienen un signo de libra (#) en la URL. ¿Qué hace?

 <a href="#" >Link name</a>
html Luke101
fuente

Respuestas:

105

Es un "fragmento" o "ancla con nombre". Puede utilizar para vincular a parte de un documento. Normalmente, cuando enlaza a una página, el navegador la abre en la parte superior de la página. Pero si enlaza a una sección a mitad de camino, puede usar el fragmento para enlazar a ese encabezado (o lo que sea).

Si no hay una <a name="whatever"/>etiqueta dentro de la página, el navegador simplemente se vinculará a la parte superior de la página. Si el fragmento está vacío, también se vinculará a la parte superior de la página.

Solo para un fragmento <a href="#">Link name</a>, entonces es solo un enlace a la parte superior de la página actual .

A menudo ves ese tipo de enlace usado junto con javascript. HTML compatible con los estándares requiere un hrefatributo, pero si planea manejar la solicitud con javascript, "#" sirve como un marcador de posición razonable.

Dean Harding
fuente
1
+1 Aunque el término oficial es un fragmento de URL, no una "referencia de hash": w3.org/TR/WD-html40-970708/htmlweb.html#h-4.1.1
Jason Hall
Sí, lo cambié a "fragmento" en mi respuesta, porque eso es lo que la mayoría de la gente usa. Sin embargo, nunca supe que tenía un nombre "oficial" :)
Dean Harding
2
Por qué los navegadores lo tratan como "ir a la parte superior de la página": Técnicamente, cambió la página. Después de hacer clic en el enlace, notará que el # se agrega realmente a la URL en la barra de direcciones, y si hace clic en el botón Atrás, lo eliminará nuevamente. No diría que es un enlace a parte de un documento, más bien un enlace a un lugar dentro del documento. De lo contrario, básicamente lo mismo que estaba escribiendo ...
animuson
Una URI que termina con # está permitida por la sintaxis genérica y podría considerarse como una especie de fragmento vacío. En tipos de documentos MIME como texto / html o cualquier tipo XML, no se permiten identificadores vacíos que coincidan con esta construcción sintácticamente legal. Los navegadores web suelen mostrar la parte superior del documento para un fragmento vacío. - en.wikipedia.org/wiki/Fragment_identifier
IcyBrk
También por "Si no existe tal representación, entonces la semántica del fragmento se considera desconocida y efectivamente no está restringida". De rfc3986 ( tools.ietf.org/html/rfc3986#page-24 )
IcyBrk
23

... solo para agregar algunos consejos útiles adicionales.

Puede acceder y modificarlo document.location.hashen JavaScript.

Puede apuntar a un ancla con nombre (por ejemplo <a name="top"></a>) o a un elemento con un id correspondiente (por ejemplo <div id="top"></div>).

Ver uno solo (por ejemplo <a href="#" onclick="pop()">popup</a>) generalmente significa que se está utilizando un enlace para ejecutar JavaScript exclusivamente. Esta es una mala práctica.

Cualquier aelemento debe tener un hrefque apunte a un recurso válido. Si no existe uno, considere usar otro elemento, como button.

alex
fuente
1
Ese es un buen punto al respecto, no es una práctica particularmente buena ... pero solo porque no sea bueno no significa que no encontrará que se use así en todas partes :)
Dean Harding
1
@alex, si es una mala práctica, díganos cuál sería la buena práctica para usar en su lugar.
Ryan Lundy
@Kyralessa Estaba ahí en el siguiente párrafo. De todos modos, hice una edición, así que espero que sea más clara.
alex
2
@alex, presumiblemente una de las razones por las que las personas usan enlaces en lugar de botones es que quieren el aspecto de enlaces. ¿Qué tal un enlace a una página que describe cómo hacer que un botón parezca un enlace? Por ejemplo, prueba de botón HTML
Ryan Lundy
1
@alex, no es más que decir que usar # en un enlace es una mala práctica. Todo lo que preguntó el OP es qué hace.
Ryan Lundy
11

# indica un enlace a un ancla.

Pensé que también mencionaría algo más:

Usar '#' como href para un enlace que activa JavaScript es malo porque desplaza la página hacia la parte superior, que probablemente no sea lo que desea. En su lugar, utilice javascript:void(0).

Nathan Osman
fuente
+1 por mencionar que hacer clic en estos enlaces obliga a la página a desplazarse hacia la parte superior.
Chris Calo
4
Ya no necesitas un ancla. A partir de HTML5 (y quizás HTML 4) cualquier elemento con una etiqueta <id> puede ser dirigido por un identificador de fragmento. Consulte los documentos HTML5: whatwg.org/specs/web-apps/current-work/multipage/…
Basil Bourque
2
No use javascript:void(0)ninguno de los dos, use un buttonsi no es un enlace.
alex
10

El signo de almohadilla ( #) indica ubicar un ancla en la página. Por ejemplo, si incluye esto en algún lugar de la página:

<a name="foo"></a>

o, más recientemente:

<div id="foo">*part of page*</div>

y luego haces clic en un enlace en la página que tiene el href #foo, navegará al ancla con el nombre o divcon la identificación foo.

Sin embargo, si solo tiene el href #, lo llevará a la parte superior de la página.

ElectroBit
fuente
2

Esto enlaza a la propia página. A menudo se usa con enlaces que realmente ejecutan algo de JavaScript.


fuente