Pregunta Anclajes HTML con 'nombre' o 'id'?


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

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

o

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

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


694
2018-01-27 18:57


origen


Respuestas:


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

Para documentos HTML (y el tipo texto / html MIME), 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 <fragmento> 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; detener el algoritmo aquí.
  4. Si hay un 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; detener el algoritmo aquí.
  5. De lo contrario, no hay una parte indicada del documento.

Entonces, buscará id="foo", y luego seguirá a name="foo"

Editar: como lo señala @hsivonen, en HTML5 el a elemento no tiene ningún atributo de nombre. Sin embargo, las reglas anteriores aún se aplican a otros elementos nombrados.


560
2018-01-27 19:10



No deberías usar <h1><a name="foo"/>Foo Title</h1> en cualquier sabor de HTML servido como text/html, porque la sintaxis del 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 en HTML4 y HTML5. Esto no funcionará en Netscape 4, pero probablemente use una docena de otras características que no funcionan en Netscape 4.


168
2018-01-27 19:37



Tengo que decir si vas a vincular a esa área en la página ... como page.html # foo y Foo Title no es un enlace que deberías estar usando:

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

Si en cambio pone un <a> referencia a su alrededor que eres título será influenciado por una <a> CSS específico dentro de su sitio. Es solo un marcado extra, y no deberías necesitarlo. Se recomienda encarecidamente ir con la colocación de una identificación en el título, no solo está mejor formada, sino que le permitirá abordar ese objeto en Javascript o CSS.


47
2018-01-27 19:03



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 funciona para todos, por lo que me sentiría seguro de seguir con esta forma.

Además, no lo olvide, puede usar esto no solo con tramos sino también con divs o incluso celdas de tabla, y luego tendrá acceso a la: pseudoclase de destino en el elemento. Solo ten cuidado de no cambiar el ancho, como con el 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 simplemente locos. Digamos que ya está 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? Doble loco. El sentido común dice que lo evites por completo.
  • Si alguna vez diseñas un anclaje sin una pseudoclase, el estilo se aplica a cada uno. En CSS3 puede evitar esto con selectores de atributos (o el mismo estilo para cada pseudoclass), pero aún así es una solución. Por lo general, esto no aparece porque eliges colores por pseudoclase, y si el subrayado está presente de manera predeterminada, tiene sentido eliminarlo, lo que hace que sea igual a otro texto. Pero si alguna vez decide hacer sus enlaces en negrita, causará problemas.
  • Es posible que Netscape 4 no admita 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í.

22
2018-03-25 14:46



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

es lo que debería ser usado. No use un anclaje a menos que desee un enlace.


15
2018-06-25 19:49



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


9
2018-01-27 19:02



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

Utilizar id o name? Los autores deben considerar los siguientes problemas al decidir si usar id o name para un nombre de anclaje:

  • 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 más antiguos no son compatibles con los anclajes creados con el atributo id.
  • El atributo de nombre permite nombres de ancla más ricos (con entidades).

8
2018-01-27 19:26



Heads up para usuarios de JavaScript: todos los ID se convierten en variables globales debajo de la ventana.

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

Acabo de crear el JS global:

window.foo

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

A menos que pueda garantizar todos los valores utilizados en id los atributos son seguros, es posible que prefiera apegarse a name:

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

7
2018-02-17 18:23



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

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

3
2018-06-13 02:10



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 usan el atributo id, aunque son en su mayoría equivalentes, requieren un elemento para identificar, de los cuales normalmente se espera que casi todos contengan contenido.

Por ejemplo, se puede usar un tramo vacío o div, 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 gratuitas o los espacios vacíos de texto.


2
2017-12-31 04:23



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

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


1
2018-01-27 19:04