Acerca de este problema HTML
Antes de HTML5, la forma de crear un objetivo de enlace dentro de una página era usar un “ancla con nombre” — un elemento <a> con un atributo name. Esto permitía que otros enlaces saltaran a ese punto específico usando un identificador de fragmento (p. ej., href="#section-5"). En HTML5, el atributo name en elementos <a> ha sido marcado como obsoleto. En su lugar, el atributo id en cualquier elemento cumple este propósito, haciendo innecesario el envoltorio <a> adicional.
Esto es importante por varias razones:
- Cumplimiento de estándares: Usar atributos obsoletos significa que tu marcado no se ajusta a la especificación HTML actual, lo que puede causar errores de validación del W3C.
-
Marcado más limpio: Las anclas con nombre añaden un elemento extra que no sirve ningún propósito semántico. Usar
iddirectamente en el elemento objetivo es más simple y significativo. -
Accesibilidad: Los lectores de pantalla y tecnologías de asistencia funcionan mejor con HTML semántico. Un
iden un encabezado o<section>proporciona una estructura de documento más clara que un elemento ancla anidado. -
Comportamiento del navegador: Aunque los navegadores aún soportan
namepara compatibilidad hacia atrás, depender de funciones obsoletas es arriesgado ya que futuras versiones de navegadores pueden cambiar o eliminar el soporte.
Para solucionar esto, elimina el elemento <a name="..."> y coloca un atributo id directamente en el elemento contenedor apropiado más cercano, como un encabezado (<h2>, <h3>, etc.), un <section>, o un <div>.
Ejemplos
Incorrecto: usando el atributo name obsoleto
<h2>
<a name="section-5">Section 5</a>
</h2>
El elemento <a> aquí existe únicamente para crear un objetivo de enlace, añadiendo marcado innecesario.
Correcto: usando id en el encabezado
<h2 id="section-5">Section 5</h2>
El atributo id en el <h2> lo convierte en un objetivo de enlace de fragmento válido sin ningún elemento extra.
Enlazando a la sección
Ambos enfoques permiten navegación a través de la misma URL de fragmento. La sintaxis del enlace no cambia:
<a href="#section-5">Jump to Section 5</a>
Usando id en otros elementos contenedor
El atributo id funciona en cualquier elemento HTML, así que puedes colocarlo donde tenga más sentido semánticamente:
<section id="contact-info">
<h2>Contact Information</h2>
<p>Email us at hello@example.com.</p>
</section>
Incorrecto: múltiples anclas con nombre en un documento
<p>
<a name="intro">Welcome to our page.</a>
</p>
<p>
<a name="conclusion">Thanks for reading.</a>
</p>
Correcto: reemplazando todas las anclas con nombre con atributos id
<p id="intro">Welcome to our page.</p>
<p id="conclusion">Thanks for reading.</p>
Recuerda que los valores id deben ser únicos dentro de un documento — ningún dos elementos pueden compartir el mismo id. Si estás migrando desde atributos name, verifica si hay duplicados y asegúrate de que cada id se use solo una vez.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.
Más información: