Marcadores en HTML. Enlaces locales para movernos fácilmente en una página

8. Marcadores o anclas en HTML

Al crear una página web muy larga y con muchos apartados, es útil crear ciertos enlaces que nos permitan saltar directamente a la parte de la página que nos interesa. Este tipo de hipervínculos se llaman marcadores o enlaces locales.

Además, puede ser especialmente útil utilizar marcadores cuando al principio de una página colocamos una especie de índice y queremos que se pueda acceder a los distintos capítulos desde ahí mismo.

En esta página de Eniun puedes ver una tabla de contenidos, llamada «Contenidos del artículo» con marcadores o anclas con enlaces que tienen un desplazamiento animado. Este tipo de desplazamiento lo podremos hacer más adelante mediante Jquery o JavaScript.

8.1. Marcadores en una misma página

La estructura de los marcadores es básicamente la misma que al crear un hiperenlace a otra página. Lo primero que hay que hacer es definir con un nombre cada parte de la página a la que queremos enlazar mediante el atributo id.

<a id="nombre_marcador"></a>

Esta etiqueta puede contener en su interior un texto, una imagen o incluso podemos dejarla en blanco.

La etiqueta para crear un enlace a esa sección de la página es la siguiente:

<a href="#nombre_marcador">Ir al título</a>

Ejemplo

En el siguiente ejemplo se utilizan cinco marcadores. Los cuatro primeros marcadores nos llevan a los encabezados del documento. El quinto marcador nos lleva arriba del todo del documento.

<a href="#nombre_marcador1">Titulo 1</a> | 
<a href="#nombre_marcador2">Titulo 2</a> | 
<a href="#nombre_marcador3">Titulo 3</a> | 
<a href="#nombre_marcador4">Titulo 4</a>

<a id="nombre_marcador_arriba"></a>
<h3>Marcadores en HTML</h3>
  
<a id="nombre_marcador1"></a>
<h4>Titulo 1</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam amet inventore nesciunt ea architecto distinctio, officiis provident error tempora suscipit iure fugit libero aspernatur vitae assumenda. Repellat officiis ex vitae. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. </p>
   
<a id="nombre_marcador2"></a>
<h4>Titulo 2</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
  
<a id="nombre_marcador3"></a>
<h4>Titulo 3</h4>
 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam amet inventore nesciunt ea architecto distinctio, officiis provident error tempora suscipit iure fugit libero aspernatur vitae assumenda. </p>
   
<a id="nombre_marcador4"></a>
<h4>Titulo 4</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam amet inventore nesciunt ea architecto distinctio, officiis provident error tempora suscipit iure fugit libero aspernatur vitae assumenda. Repellat officiis ex vitae.</p>
  
<a href="#nombre_marcador_arriba">Ir arriba</a>

Ejemplo en CodePen. Abre el editor de CodePen y prueba las soluciones

0

8.2. Marcadores llamados desde otra página

También se puede hacer una llamada a marcadores desde otra página. Para ello, necesitamos saber el nombre de la página y el nombre del marcador o ancla. La sintaxis es la siguiente:

<a href="nombrepagina.html#nombremarcador">Marcador</a>