Cargando...

Marcadores HTML

Link Titles & Targets cambiaron cómo se abre un enlace. Los marcadores (enlaces de fragmento) cambian dónde en una página aterrizas. Las lecciones largas, las FAQ y la documentación a menudo necesitan un salto a «Precios», «FAQ» o «Volver arriba» sin cargar un documento nuevo. Ese patrón une un id único en el destino con un href que empieza por #.

Qué es un marcador en la misma página

Un identificador de fragmento es la parte de una URL después de #. En HTML creas el punto de llegada dando a un elemento un id. Luego cualquier enlace cuyo href sea #that-id pide al navegador que se desplace al primer id coincidente en la página (o en la página nombrada antes del # si incluyes una ruta).

Respuesta directa

  1. Dale al destino un id, por ejemplo <h2 id="pricing">.
  2. Enlaza con href="#pricing".
    El # significa «encuentra este id». Los ids deben ser únicos en la página. Prefiere nombres cortos sin espacios: pricing, no Our Pricing!!.

Tabla de contenidos en la página

Una mini navegación arriba de una página larga es la demo clásica para principiantes: enlaces de fragmento arriba, ids coincidentes en los encabezados abajo, más un enlace de vuelta.

Marcadores en la página

html
HTML Code 
<nav>
<a href="#intro">Intro</a> |
<a href="#pricing">Pricing</a>
</nav>

<h2 id="intro">Intro</h2>
<p>Welcome to the guide.</p>

<h2 id="pricing">Pricing</h2>
<p>Simple plans for learners.</p>

<p><a href="#intro">Back to intro</a></p>

Lectura del ejemplo en la página

  • #intro y #pricing son enlaces de fragmento, no archivos separados
  • El id de cada encabezado debe coincidir con el fragmento después de #
  • La nav puede estar en cualquier sitio; los TOC arriba de página son habituales en contenido largo
  • «Volver a la intro» muestra que los marcadores funcionan hacia abajo y hacia arriba en el mismo documento

Enlazar a una sección en otra página

Puedes combinar una ruta relativa (o absoluta) con un fragmento. El navegador carga la página y luego salta al id si existe.

Ruta más fragmento

html
HTML Code 
<p>
<a href="guide.html#pricing">Open pricing in the guide</a>
</p>

Cuándo usar path#id

  • Saltos en la misma página: #pricing basta
  • Otro archivo HTML en tu proyecto: guide.html#pricing
  • Docs externas de confianza: una URL completa que termine en #section-name cuando ese sitio exponga ids estables
    Si el id falta en la página de destino, el navegador suele abrir la página arriba e ignorar el fragmento desconocido.

Hábitos de nombres de id

  • Un valor de id por página — nunca duplicar
  • Empieza con una letra cuando puedas; evita espacios y puntuación rara
  • Usa guiones para nombres de varias palabras: getting-started
  • Mantén los nombres estables si otras páginas harán deep-link hacia ellos
    Los ids son para máquinas y URLs; el texto visible del encabezado puede seguir siendo amigable y distinto de la cadena del id.

Marcadores frente a «marcadores» del navegador

La gente también dice «marcador» para guardar una página en el menú de favoritos del navegador. Esta lección significa enlaces de fragmento en la página. Los favoritos del navegador usan la URL del documento (y a veces un fragmento si copiaste uno). Misma palabra, trabajos cotidianos distintos — mantén claro el sentido HTML cuando enseñes a otros.

Notas de accesibilidad y UX

Los enlaces de salto ayudan a usuarios de teclado y lectores de pantalla a moverse por páginas largas cuando los destinos son hitos reales (encabezados, secciones). No satures con docenas de ids vacíos. Asegúrate de que el objetivo sea visible tras el salto — las cabeceras fijas pueden tapar encabezados más adelante al aprender CSS; por ahora verifica que aparece la sección correcta.

Practica en tu editor

  1. Crea dos encabezados con valores id distintos.
  2. Encima, añade enlaces de fragmento con href="#…".
  3. Haz clic en cada enlace y confirma que la página salta al encabezado coincidente.
  4. Añade un enlace «Volver arriba» que apunte a un id en tu primer encabezado o a un hito superior.
  5. Desde un segundo archivo, enlaza con other.html#intro y confirma el salto entre páginas.
  6. Duplica temporalmente un id, observa la confusión y luego corrige la unicidad.

Errores fáciles

  • Usar el mismo id dos veces en una página
  • Olvidar el # en href para que el navegador busque un nombre de archivo
  • Poner espacios o símbolos raros en los ids
  • Enlazar a un id que no existe
  • Confundir marcadores de fragmento con target="_blank" (trabajos distintos)
  • Esperar que #pricing solo abra otro archivo sin una ruta

Resumen

  • Los marcadores de la misma página usan id más href="#id"
  • Los ids deben ser únicos, cortos y sin espacios
  • Ideales para páginas largas y mini tablas de contenidos
  • Usa page.html#id para saltar a una sección en otra página
  • Los fragmentos que faltan suelen fallar en silencio quedándote arriba

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
6
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 1 de 1
Html Tutorial