Anclas html

Anteriormente hemos visto que es un enlace y como se construye mediante una etiqueta <a> y cuales son los atributos más importantes que lo acompañan.

Hoy vamos a ver una de las utilidades más prácticas de los enlaces: las anclas.

Las anclas nos sirven para «viajar» a una parte concreta de un documento web.

Por ejemplo un documento puede ser muy extenso. Pongamos 3000 – 5000 palabras. Y por su naturaleza es complicado que un usuario pueda encontrar de un vistazo una información concreta. Mediante una ancla podemos enviar a este usuario al lugar específico del texto.

Las anclas solemos encontrarlas en el típico índice de contenidos de una publicación larga.

También en el típico botón flotante para volver al encabezado de una página.

Construcción de una ancla

En la captura de pantalla se muestran dos anclas.

Una permite ir desde un enlace de lo que es el embrión de un menú de navegación a una zona de específica.

La otra permite ir desde lo que será un enlace en el pie de página a la cabecera del documento.

Las anclas tienen agunas configuraciones y consideraciones básicas.

• Mediante un atributo id=»» identificamos la etiqueta dónde queremos enviar al usuario cuando haga click en el enlace.
• El atributo id debe ser único dentro de una página. No pueden haber 2 etiquetas con el mismo id. (cuidado que es una página y no la totalidad de la página web).
• En el enlace el href=»» debe llevar el símbolo # seguido del nombre del identificador id.

Con esta entrada hemos completado el concepto de enlace y el de ancla.

<a href="/tutoriales-web#manzanas">ir a la sección manzanas de la página tutoriales</a>

<a href="#manzanas">ir a la sección manzanas de esta misma página</a>