Anclas html

Print Friendly, PDF & Email
Anclas html
Valora esta entrada
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 intradocumentales.

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.

anclas html intradocumentales
Anclas HTML intradocumentales

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.

Atención:

Si miráis bibliografía antigua veréis que en versiones antiguas de html se usa el atributo name. Pero esto ya está completamente obsoleto. ¡Cuidaros de estudiar de estas fuentes aunque las ofrezcan en formato de pdf gratis!

Con esta entrada hemos completado el concepto de enlace y el de ancla. Los hemos usado para hacer anclas intradocumentales.

Como lo harías para un enlace extradocumental (de una página a otra). ¿Te atreves? ¡Dudas en los comentarios!

Entradas relacionadas:

Resumen de atributos html para ayudarnos a memorizar
- 196
En esta entrada hago un ejercicio mental repasando el conjunto de atributos típicos usados en HTML. ¿Cuantos dirías que salen? ¿20, 30, 40, más?
Creación de formularios html
- 543
En esta entrada repasamos las etiquetas html imprescindibles para escribir formularios así como los atributos más importantes de todos.
Como hacer espacios en blanco con html
- 121
Has intentado separar palabras en blanco pulsando el espaciador? Seguramente has comprobado que no funciona. En esta publicación vemos un ejemplo de como se debe hacer con HTML.
Como indicar a Google la modificación y corrección de contenidos mediante html
- 62
Cuando escribes contenidos en Internet es inevitable cometer errores. ¿Sabes como corregirlos semánticamente para que los navegadores se enteren de que has escrito una corrección o actualización?
Mapas de imagen en html
- 265
Los mapas de imágenes son una funcionalidad HTML para las imágenes muy curiosa que permiten definir diferentes enlaces asociados a distintas zonas de una misma imagen. A pesar de haber caído en desuso...
Resumen de como comentar código en html, css y javascript
- 318
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
Introducción al HTML
- 533
El HTML es un lenguaje de marcado que constituye uno de los pilares de la web. Es un idioma que se caracteriza por etiquetar el contenido de una página web. El HTML nos ayuda a conferir contenido y es...
Ejemplo de creación de página web con capas y migración a HTML5
- 748
El lenguaje de marcas sirve para dotar de estructura y contenido a un documento web. Mediante la etiqueta div veremos un ejemplo de como dotar de estructura a una página web. Y después utilizaremos la...
Como usar los encabezados h1 a h6 en html
- 193
Una duda frecuente cuando nos iniciamos en el mundo del html es saber cuando debemos usar un h1, un h2, un h3 o hasta un h4. En esta entrada miramos de dar un criterio lógico que pueda servir de ayuda...
Listas ordenadas, no ordenadas y de definiciones en HTML y listas anidadas
- 546
Una lista html es una relación de datos agrupados y que tienen una temática en común. Las listas pueden ser ordenadas, no ordenadas y de definiciones. Veamos en este escrito como es su sintaxis, que a...
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.