Debo hacer Anclas HTML con el nombre de' o 'id'?

https://stackoverflow.com/questions/484719

20-08-2019
|

Pregunta

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

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

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

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

Solución

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.


Analiza la URL y deja que fragid sea el < fragment > componente de la URL.

Si fragid es la cadena vacía, entonces 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; Detenga 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; Detenga el algoritmo aquí.

De lo contrario, no hay parte indicada del documento.

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

Editar: como 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 con nombre.

Otros consejos

No debe & # 8217; t usar <h1><a name="foo"/>Foo Title</h1> en cualquier versión de HTML que se sirva como text/html, porque la sintaxis del elemento vacío XML no es & # 8217; t es compatible con <h1><a name="foo">Foo Title</a></h1>. Sin embargo, <h1 id="foo">Foo Title</h1> está bien en HTML4. No es válido en HTML5 como está redactado actualmente.

<=> está bien tanto en HTML4 como en HTML5. Esto no funcionará & # 8217; t no funciona en Netscape 4, pero usted & # 8217; probablemente usará una docena de otras funciones que no funcionan & # 8217; t no funciona en Netscape 4.

Debo decir que si va a vincular a esa área de 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, en su lugar, coloca una referencia <a> a su alrededor, su título estará influenciado por un <=> 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 pseudo-clase: 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.

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 es una locura. Digamos que ya está en desuso.
" Elementos de anclaje sin href atribuido " - Una vez más, la naturaleza de un elemento (hipervínculo o no) se define al tener un atributo. Doblemente loco El sentido común dice evitarlo por completo.
Si alguna vez diseñas 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 elige 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 decide poner en negrita sus enlaces, causará problemas.
Netscape 4 puede no ser 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 debe usarse. No use un ancla a menos que quiera un enlace.

Aviso para 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.foo será el HTMLElement para el h1.

A menos que pueda garantizar que todos los valores utilizados en id atributos son seguros, puede preferir quedarse con name:

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

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 ... Yo iría con id.

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

¿Utiliza <=> o <=>? Los autores deben considerar los siguientes problemas al decidir si usar <=> o <=> para 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).

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

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 identificarse, 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.

Una idea 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.

La segunda muestra asigna una ID ú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. Adjunto a un & Quot; ancla & Quot ;, tiene mucho sentido.

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

Asegúrese de que el name="" y id="" los atributos de la <a> elemento de la misma.

¿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 por defecto!

Todo " llamado ancla " concepto 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.

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow