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:

Códigos HTML | Carácteres especiales (escapados)
- 88
¿Por qué se escapan los caracteres en html? ¿Que utilidad tiene complicarse con símbolos estraños? ¿Como los usamos? Apuntes de alumno HTML.
Ejercicio estructura web mediante capas con div e id
- 62
¿Como crear y organizar capas html en un documento web? En este ejercicio lo harás de 0. Se incluye propuesta de solución. Es un paso previo a html5.
Conversión de un xhtml a htm5. Continuación ejercicio capas html.
- 36
Ejercicio en el que se aplican etiquetas html5 a un documento creado a partir de div e id. Incluye solución.
Factores que afectan al tiempo de carga de una página web
- 356
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Como funcionan los frameset de html. ¡Cuidado que están obsoletos!
- 414
El uso de framesets está completamente desaconsejado. Son etiquetas obsoletas. Sin embargo en esta entrada recuperamos su uso y las repasamos. ¡Nunca se sabe si algún día volverán a ser de utilidad!...
Ejercicio migración de xhtml a html5. Estructura web semántica.
- 37
Ejercicio html5 dónde transformamos un documento web realizado con capas html . Incluye solución.
Libro digital navegable
- 48
Ejercicio html en el que se practican los conceptos de listas anidadas ul, ol , li , anclas, enlaces, link y url relativas. Incluye solución. ¡Tu primer libro digital con html!
Como usar los encabezados h1 a h6 en html
- 358
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...
Como hacer espacios en blanco con html
- 291
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.
Etiquetas básicas introductoras al html5
- 917
Existen 2 formas de aprender el html. Uno es ir desde las etiquetas más antiguas y obsoletas hacia las más modernas del html5 o viceversa. Yo soy partidario de aprender html5 directamente y hacer borr...
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.