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

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?

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.

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.

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.

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í.

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

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

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>

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).

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.

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">

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.

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.

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.

¿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.

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.