¿Debo hacer anclas HTML con 'nombre' o 'id'?

784

Cuando se quiere hacer referencia a alguna parte de una página web con el http://example.com/#foométodo " ", se debe usar

<h1><a name="foo"/>Foo Title</h1>

o

<h1 id="foo">Foo Title</h1>

Ambos funcionan, pero ¿son iguales o tienen diferencias semánticas?

Henrik Paul
fuente
2
El enlace debería ser http://example.com#foo(sin el / antes #)
Dana
71
En realidad, http://example.com#fooy http://example.com/#fooson equivalentes como se define en uno de los RFC en URI.
Oliver

Respuestas:

617

De acuerdo con la especificación HTML 5, 5.9.8 Navegación a un identificador de fragmento :

Para documentos HTML (y el tipo MIME text / html), se debe seguir el siguiente modelo de procesamiento para determinar cuál es la parte indicada del documento.

  1. Analice la URL y deje que fragid sea el componente <fragment> de la URL.
  2. Si fragid es la cadena vacía, entonces la parte indicada del documento es la parte superior del documento.
  3. Si hay un elemento en el DOM que tiene una ID exactamente igual a fragid, entonces el primer elemento en orden de árbol es la parte indicada del documento; Detenga el algoritmo aquí.
  4. Si hay un elemento en el DOM que tiene un atributo de nombre cuyo valor es exactamente igual a fragid, entonces el primer elemento en orden de árbol es la parte indicada del documento; Detenga el algoritmo aquí.
  5. De lo contrario, no hay parte indicada del documento.

Entonces, buscará id="foo", y luego seguirá aname="foo"

Editar: como señaló @hsivonen, en HTML5 el aelemento no tiene atributo de nombre. Sin embargo, las reglas anteriores todavía se aplican a otros elementos nombrados.

Greg
fuente
77
No existe una relación implícita entre ese algoritmo y su validez. El <a nombre> no es válido en HTML5 como está redactado actualmente.
hsivonen
13
En realidad no se aplica a otros "elementos con nombre". En cuanto a los atributos de nombre, solo se aplica a <a nombre>. Sin embargo, ese atributo no puede ser utilizado por los autores. Los agentes de usuario deben respetarlo para las páginas HTML más antiguas.
Anne
19
@RafaelSoares <h1 id="foo">Foo Title</h1>funciona incluso en IE6 y es parte de la especificación HTML 4.01
Aprillion
44
No buscará name = "foo" sino <a name="foo">. Ver enlace
Daniel Herzog
3
En un documento HTML5 con a name="foo"y a id="foo"(independientemente de su orden dentro de la página), Chrome y Firefox saltarán al id, pero IE (probado en 11) y Edge saltarán alname
Alvaro Montoro
183

No debe usar <h1><a name="foo"/>Foo Title</h1>ningún tipo de HTML servido text/html, porque la sintaxis de elemento vacío XML no es compatible text/html. Sin embargo, <h1><a name="foo">Foo Title</a></h1>está bien en HTML4. No es válido en HTML5 como está redactado actualmente.

<h1 id="foo">Foo Title</h1>está bien tanto en HTML4 como en HTML5. Esto no funcionará en Netscape 4, pero probablemente usará una docena de otras características que no funcionan en Netscape 4.

hsivonen
fuente
66
+1 por hablar sobre el soporte del navegador. ¿NS4 es el único que no admite url # id => element.id?
Hashbrown
14
@Hashbrown No pude encontrar una respuesta, así que hice algunas pruebas. Descubrí que incluso los navegadores muy antiguos tratan a los ids como nameanclas en términos de fragmentos de URL y compatibilidad del :targetselector CSS . Probado: Chrome 6, Firefox 1.5, IE6, Opera 8.02, Safari 3.1.2, Netscape 7.2, Lynx 2.24 y navegadores móviles: Android 2.2, Chrome 26, Dolphin 9.3, Firefox 19, IE10, Safari 4 y Opera Mini 5.1.
Stephen M. Harris
1
@smhmic, encontré uno. El navegador web Off-By-One reconoce los anclajes definidos a través de <a name="foo"/> pero no reconoce los anclajes definidos a través de <sometag id = "foo"> OB1 actualizado por última vez> hace 8 años. Su autor se jacta de que "puede ser el navegador web más pequeño y rápido del mundo con soporte completo para HTML 3.2". Reclama soporte para Win95 hasta XP, pero funciona bien con Win7 de 64 bits. Entonces, ¿por qué tener un dinosaurio así? Para realizar pruebas, por supuesto, para asegurarme de que mis sitios no se rompan demasiado con navegadores verdaderamente antiguos. Además, también llevo OB1 en una unidad flash. Es pequeño, autónomo e inmune a las infecciones.
Dave Burton
26
Leer esto en 2016 será como ... ¿ Netscape 4?
ADTC
1
usar `<a name="something" id="something> </a> [ELEMENTO PARA DESPLAZARSE] es probablemente mejor porque es compatible, y no da estilo a lo que sea que esté en el elemento para desplazarse.
JustinCB
53

Debo decir que si va a vincular a esa área en la página ... como page.html # foo y Foo Title no es un enlace que debería usar:

<h1 id="foo">Foo Title</h1>

Si, por el contrario, coloca una <a>referencia a su alrededor, su título estará influenciado por un <a>CSS específico dentro de su sitio. Es solo un marcado adicional, y no debería necesitarlo. Recomiendo encarecidamente colocar una identificación en el título, no solo está mejor formada, sino que le permitirá abordar ese objeto en Javascript o CSS.

Tim Knight
fuente
No solo eso, sino que he estado luchando contra un extraño error en la pantalla: no aparecía nada en IE. Al no tener idea de un punto de ataque, lo arrojé a un validador que marcaba las entradas de <a name="foo">, así que las cambié, y ahora la pantalla: ninguna funciona bien.
Loren Pechtel el
Esto es más que suficiente, no se necesita una etiqueta de anclaje por el bien del efecto.
Wallace Sidhrée
28

Wikipedia hace un uso intensivo de esta característica como esta:

<a href="#History">[...]</a>
<span class="mw-headline" id="History">History</span>

Y Wikipedia está funcionando para todos, por lo que me sentiría seguro al seguir este formulario.

Además, no olvide que puede usar esto no solo con tramos sino también con divs o incluso celdas de tabla, y luego tiene acceso a la pseudoclase: target en el elemento. Solo tenga cuidado de no cambiar el ancho, como con texto en negrita, porque eso mueve el contenido, lo cual es inquietante.

Anclajes nombrados: mi voto es evitar:

  • "Los nombres y los ID están en el mismo espacio de nombres ..." - Dos atributos con el mismo espacio de nombres son una locura. Digamos ya en desuso.
  • "Ancla elementos sin atributo href" - ¿Una vez más, la naturaleza de un elemento (hipervínculo o no) se define por tener un atributo ?! Doblemente loco El sentido común dice evitarlo por completo.
  • Si alguna vez diseña un ancla sin una pseudoclase, el estilo se aplica a cada uno. En CSS3 puede solucionar esto con selectores de atributos (o el mismo estilo para cada pseudoclase), pero aún así es una solución alternativa. Esto generalmente no aparece porque eliges colores por pseudo-clase, y el subrayado que está presente de manera predeterminada solo tiene sentido eliminarlo, lo que lo hace igual a otro texto. Pero si alguna vez decides poner en negrita tus enlaces, causarás problemas.
  • Es posible que Netscape 4 no sea compatible con la función de identificación, pero aún así un atributo desconocido no causará ningún problema. Eso es lo que se llama compatibilidad para mí.
Zoltán Morvai
fuente
1
Sugiera editar la viñeta 3 de 4: si alguna vez a {color:red}diseña, coloreará sus enlaces <a href> Y sus fragmentos <a name>. Puede solucionar esto con pseudo clases a:link {color:red]}o selectores de atributosa:not([href]) {color:red;}
Bob Stein
Tienes razón, pero para mí la bala 3 dice exactamente esto. Aunque podría ser mi inglés ...
Zoltán Morvai
Finalmente, tengo su punto: "Si alguna vez diseñas un ancla sin una pseudoclase, el estilo se aplica a cada uno". Ambiguo: puede pensar "cada pseudoclase". Derecha. Pero estaba pensando en "cada caso" de usar un ancla, lo que significa nombrado y refrenado. Aclarado :) No es necesario editar después de tu comentario, pero puedo hacerlo si insistes. Pero tampoco es probable que suceda con los colores, ya que generalmente intenta mantenerlos diferentes, pero sigue siendo el mismo caso con el peso de la fuente ...
Zoltán Morvai
disfruté leyendo tus comentarios @ ZoltánMorvai. "double crazy" y "netscape 4" doubleplusgood.
Randy L
1
Dos atributos con el mismo espacio de nombres son una locura, en realidad no. Al hacer contenido generado por el usuario, es muy útil poder especificar algo como un fragmento de enlace <a name="heading1"></a> ... document.html#heading1sin establecer la ID, porque la ID puede chocar con otra ID en la página. Es una pena que no hayan puesto el nameatributo en HTML5.
Jez
15
<h1 id="foo">Foo Title</h1>

es lo que se debe usar. No use un ancla a menos que quiera un enlace.

Andrew Marsh
fuente
Idéntico a la respuesta de Tim Knight, publicado medio año antes de este. -1
Luc
14

Atención a los usuarios de JavaScript: todas las ID se convierten en variables globales en la ventana .

<h1 id="foo">Foo Title</h1>

Acabo de crear el JS global:

window.foo

El valor de window.fooserá HTMLElementpara el h1.

A menos que pueda garantizar que todos los valores utilizados en los idatributos sean seguros, puede preferir atenerse a name:

<h1 name="foo">Foo Title</h1>
mikemaccana
fuente
12
La buena noticia es que no puede sobrescribir las funciones definidas en window. Por ejemplo, <div id="open"></div>no sobrescribirá la función window.open.
Flimm
9

No hay diferencia semántica; La tendencia en las normas es hacia el uso de idmás que name. Sin embargo, hay diferencias que pueden llevar a preferir nameen algunos casos. La especificación HTML 4.01 ofrece las siguientes sugerencias :

Usar ido name? Los autores deben considerar los siguientes problemas al decidir si usar ido namepara un nombre de anclaje:

  • El atributo id puede actuar como algo más que un nombre de anclaje (por ejemplo, selector de hoja de estilo, identificador de procesamiento, etc.).
  • Algunos agentes de usuario anteriores no admiten anclas creadas con el atributo id.
  • El atributo de nombre permite nombres de ancla más ricos (con entidades).
erickson
fuente
14
Para ser claros, cuando dicen "agentes de usuario antiguos" se refieren a agentes de usuario REALMENTE antiguos. No me preocuparía por eso.
Eli
1
HTML5 también permite identificaciones "ricas". ¿Alguien tiene números de versión de navegadores con una cuota de mercado superior al 0.1% que no puedan manejar fragmentos anclados en id? - ¿O es el dinosaurio Netscape 4.7 realmente el más extendido?
Robert Siemer
77
FWIW, no pude conseguir que las idanclas funcionaran en Safari para iOS 5, por lo que no solo los navegadores eran "realmente viejos" en el '09. Tuve que agregar names para que mi sitio funcionara correctamente en el iPad. Esto podría haberse solucionado ahora, no tengo ningún dispositivo iOS 6 para verificar.
Daniel Saner el
@DanielSaner realmente? entonces en.wikipedia.org/wiki/IPad#Applications no funciona en tu iPad?
Aprillion
1
@DanielSaner Usé simuladores para probar Mobile Safari 5.02 y 5.1, y Android Browser 2.2 y 2.3, y las idanclas parecen funcionar universalmente. Si este simple ejemplo no funciona en su dispositivo móvil, comprobaría la configuración de accesibilidad del dispositivo. (@deathApril El sitio móvil de Wikipedia tiene Javascript que efectivamente hace que se ignore el fragmento de URL.)
Stephen M. Harris
9

El método de ID no funcionará en navegadores más antiguos, el método de nombre de anclaje quedará en desuso en las versiones HTML más nuevas ... Yo iría con id.

Spikolynn
fuente
2
¿Tiene una fuente para esas reclamaciones? No me malinterpretes; Solo estoy interesado en general.
Henrik Paul el
11
Eso no arroja luz sobre "no funcionará en navegadores antiguos". - ¿Qué navegadores son estos, aparte de Netscape 4?
Robert Siemer
3
Intenté usar la identificación en un div, y funciona incluso en IE 7. Sin embargo, no pude probar en IE 6 ... pero quién usa IE 6 hoy en día ...
Gilly
@deathApril en ciertos casos (depende de HASLAYOUT) tiene errores.
Knu
@RobertSiemer funciona de manera casi universal: vea mi comentario debajo de esta respuesta .
Stephen M. Harris
3

Tengo una página web que consta de varios contenedores div apilados verticalmente, idénticos en formato y que solo difieren en número de serie. Quería ocultar el nombre del ancla en la parte superior de cada div, por lo que la solución más económica resultó ser incluir el ancla como una identificación dentro de la etiqueta div de apertura, es decir,

<div id="[serial number]" class="topic_wrapper">
maximus
fuente
2

La segunda muestra asigna una identificación única al elemento en cuestión. Este elemento se puede manipular o acceder mediante DHTML.

El primero, por otro lado, establece una ubicación con nombre dentro del documento, similar a un marcador. Unido a un "ancla", tiene mucho sentido.

Cerebro
fuente
2

Solo una observación sobre el marcado El formulario de marcado en versiones anteriores de HTML proporcionó un punto de anclaje. Los formularios de marcado en HTML5 que utilizan el atributo id, aunque son en su mayoría equivalentes, requieren un elemento para identificar, casi todos los cuales normalmente se espera que contengan contenido.

Se podría usar un span o div vacío, por ejemplo, pero este uso se ve y huele degenerado.

Un pensamiento es usar el elemento wbr para este propósito. El wbr tiene un modelo de contenido vacío y simplemente declara que es posible un salto de línea; Esto sigue siendo un uso ligeramente gratuito de una etiqueta de marcado, pero mucho menos que las divisiones de documentos gratuitos o espacios de texto vacíos.

jerseyboy
fuente
Ese es un buen punto. Más información en wbr: w3.org/TR/html-markup/wbr.html Usar en <wbr id="foo" />lugar de<a name="foo"></a>
Luke
2

En html 5, el id=""atributo define un identificador único para un elemento, que también es un ancla para un enlace de fragmento. En estándares html anteriores, el name=""atributo del <a>elemento define un ancla para un enlace de fragmento. Recomiendo algo como:
<a name="foo" id="foo"></a><h1>Foo Title</h1>
Debido a que el soporte para el id=""atributo es un poco irregular (aunque las últimas versiones de todos los navegadores principales lo admiten, las versiones que no tienen más de unos pocos años [Y es mejor no romper algo si no hay una buena razón para]). Es compatible y no da estilo a lo que sea que esté en el elemento vinculado, ya que el cierre </a> todavía está fuera del elemento, pero sigue siendo válido en todos los estándares actuales.

Asegúrese de que los atributos name=""y id=""del <a>elemento sean los mismos.

JustinCB
fuente
2
No todo lo que usa HTML es un navegador. Estoy usando una biblioteca Java que muestra información en una ventana usando HTML. Este es el único método que funcionó. Es el nameatributo en una etiqueta de anclaje que se requería; colocar atributos en hNo spanno funcionó.
Marte
1

¿Qué tal usar el atributo de nombre para los navegadores antiguos y el atributo de identificación para los nuevos navegadores? Se usarán ambas opciones y se implementará el método alternativo de forma predeterminada.

Umesh Bagalur
fuente
-3

Todo el concepto de "ancla con nombre" utiliza el atributo de nombre, por definición. Debería limitarse a usar el nombre, pero el atributo ID podría ser útil para algunas situaciones de JavaScript.

Como en los comentarios, siempre puedes usar ambos para cubrir tus apuestas.

Alex Fort
fuente
Cuando se usan ambos, ¿son los id: sy nombres globalmente únicos? como en, ¿puedo usar la misma cadena que la identificación y el nombre?
Henrik Paul el
Puedes, pero algunas personas piensan que es una mala práctica.
Alex Fort
99
De acuerdo con la especificación HTML, si ambos están presentes, el nombre y la identificación deben ser idénticos. También dice que los nombres y los identificadores están en el mismo espacio de nombres. El servicio de validación de HTML no verifica esto, y dudo que los navegadores se preocupen, pero parecen ser buenas pautas a seguir de todos modos.
erickson
3
Realidad redefinida! <un nombre ... estaba enfermo desde el principio, y el estilo de enlace CSS lo hace aún más enfermo.
Robert Siemer