seccion - ¿Debo hacer anclajes HTML con ''nombre'' o ''id''?

enlaces dentro de la misma página html (14)

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

Cuando uno quiere referirse a alguna parte de una página web con el método " http://example.com/#foo ", se debe usar

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

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

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

A la cabeza de los usuarios de JavaScript: todas las ID se convierten en variables globales en la ventana .

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

Acaba de crear el JS global:

window.foo

El valor de window.foo será el HTMLElement para el h1 .

A menos que pueda garantizar que todos los valores utilizados en los atributos de id sean seguros, es posible que prefiera seguir con el name :

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

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

Para documentos HTML (y el tipo de texto / html MIME), se debe seguir el siguiente modelo de procesamiento para determinar cuál es la parte indicada del documento.
Analice la URL y deje que fragid sea el componente <fragment> de la URL.
Si fragid es la cadena vacía, la parte indicada del documento es la parte superior del documento.
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; Detén el algoritmo aquí.
Si hay un elemento a 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; Detén el algoritmo aquí.
De lo contrario, no hay ninguna parte indicada del documento.

Por lo tanto, buscará id="foo" , y luego seguirá a name="foo"

Edición: Como lo señaló @hsivonen, en HTML5 el elemento a no tiene atributo de nombre. Sin embargo, las reglas anteriores todavía se aplican a otros elementos nombrados.

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

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

Si, por el contrario, coloca una <a> referencia a su alrededor, su título se verá afectado por un <a> CSS específico dentro de su sitio. Es solo un margen de beneficio adicional, y no deberías necesitarlo. Recomendaría encarecidamente colocar un ID en el título, ya que no solo está mejor formado, sino que también le permitirá direccionar ese objeto en Javascript o CSS.

El método de ID no funcionará en los navegadores más antiguos, el método de nombre de ancla quedará obsoleto en las versiones de HTML más recientes ... Me gustaría ir con id.

En html 5, el atributo id="" define un identificador único para un elemento, que también es un ancla para un enlace de fragmento. En estándares html anteriores, el atributo name="" del elemento <a> 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 atributo id="" es un poco irregular (aunque las versiones más recientes de los principales navegadores lo admiten, las versiones que no tienen menos de unos pocos años [Y es mejor no romper algo si no hay una buena razón para]). Es compatible, y no diseña lo que está en el elemento enlazado, 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="" e id="" del elemento <a> sean los mismos.

La segunda muestra asigna una ID única al elemento en cuestión. Este elemento puede entonces ser manipulado o accedido usando DHTML.

La primera, por otro lado, establece una ubicación con nombre dentro del documento, similar a un marcador. Adjunto a un "ancla", tiene perfecto sentido.

No debe usar <h1><a name="foo"/>Foo Title</h1> en ningún tipo de HTML servido como text/html , ya que la sintaxis del elemento vacío de XML no se admite en text/html . Sin embargo, <h1><a name="foo">Foo Title</a></h1> está bien en HTML4. No es válido en HTML5 tal 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 funciones que no funcionan en Netscape 4.

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

¿Usar id o name ? Los autores deben tener en cuenta los siguientes problemas al decidir si usar id o name para un nombre de ancla:

El atributo id puede actuar como algo más que un nombre de ancla (por ejemplo, selector de hoja de estilo, identificador de procesamiento, etc.).
Algunos agentes de usuario anteriores no admiten anclajes creados con el atributo id.
El atributo de nombre permite nombres de ancla más ricos (con entidades).

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

Se podría usar un tramo vacío o div, 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 marca, pero mucho menos que las divisiones de documentos gratuitos o los espacios vacíos de texto.

Tengo una página web que consta de varios contenedores div apilados verticalmente, idénticos en formato y que difieren solo en el 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">

Todo el concepto de "nombre de anclaje" utiliza el atributo de nombre, por definición. Solo debe seguir usando el nombre, pero el atributo ID puede ser útil para algunas situaciones de JavaScript.

Como en los comentarios, siempre puede usar ambos para cubrir sus apuestas.

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 con este formulario.

Además, no lo olvide, puede usar esto no solo con intervalos, sino con divs o incluso celdas de tabla, y luego tendrá acceso a la pseudo-clase: target en el elemento. Solo tenga cuidado de no cambiar el ancho, como con el texto en negrita, porque eso mueve el contenido, lo que es molesto.

Anclas con nombre - mi voto es evitar:

"Los nombres y los identificadores están en el mismo espacio de nombres ...": dos atributos con el mismo espacio de nombres son una locura. Digamos ya desaprobado.
"Elementos de anclaje sin atributo href": una vez más, ¿la naturaleza de un elemento (hipervínculo o no) se define por tener un atributo? Doble loco. El sentido común dice evitarlo por completo.
Si alguna vez diseña un ancla sin una pseudo-clase, el estilo se aplica a cada uno. En CSS3 puede solucionar esto con los selectores de atributos (o el mismo estilo para cada pseudoclase), pero aún así es una solución. Por lo general, esto no aparece porque usted elige los colores por pseudo-clase, y el subrayado está presente de forma predeterminada, solo tiene sentido eliminar, lo que hace que sea lo mismo que otro texto. Pero alguna vez decides hacer tus enlaces audaces, esto causará problemas.
Es posible que Netscape 4 no admita la función de identificación, pero un atributo desconocido no causará ningún problema. Eso es lo que llamo compatibilidad para mí.

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

Es lo que se debe utilizar. No uses un ancla a menos que quieras un enlace.