Consejo Rápido: Cómo crear anclas en HTML para tu página web

Seguro que ya has visto este tipo de enlaces, sobre todo utilizados en esos largos artículos de wikipedia, que rápidamente te llevan a una parte concreta de un artículo dentro de la misma página. A estos enlaces se los conoce como Anclas en HTML o Enlaces Internos HTML. Son realmente útiles para esos largos artículos con epígrafes. Si tus textos los necesitan, mira cómo se crean.

Solemos aconsejar que para mantener la atención de los visitantes el mayor tiempo posible, se deben crear más páginas con textos más cortos y, a su vez, divididos en subpáginas. Sin embargo, a veces no es la manera más eficiente de distribuir un contenido. Ejemplos como las secciones de Términos y Condiciones de una página web, las listas de Preguntas Frecuentes (FAQ) o las referencias a otras fuentes, resultan más cómodas de consultar cuando contienen Anclas.

En este tutorial, vamos a ver cómo insertar Anclas en los Términos y Condiciones de una Tienda Online.

Cómo insertar Anclas HTML en las Páginas

Para que los visitantes naveguen de la forma más fácil y cómoda posible, te sugerimos que hagas primero una lista de capítulos antes de redactar los Términos y Condiciones. Básicamente, es como crear un índice de un libro.

Para hacerlo más claro, crea un índice del contenido al principio de la página.


Una vez tienes el texto preparado, ve a «Fuente HTML».

Ve a la «Fuente HTML» del editor de textos.

 

Para conectar los enlaces en la página, cambia el código por el siguiente:

Para el capítulo:
<a href=»#Clausulas»>1. Cláusulas</a>

Para el párrafo al que deseas llevar al lector:
<a name=»Clausulas»>Cláusulas</a>

El Código Fuente con el Ancla insertada

Después de «Guardar», ambas partes estarán conectadas.

Nota: «Cláusulas» antes de # significa que el enlace apunta a Términos y Condiciones (URL: http://mitiendaejemplo.webnode.com/terminos-). No escribas nada antes de la almohadilla o numeral si el ancla carga la página principal (mitiendaejemplo.webnode.es).

  • Anna

    Hola, estoy intentando hacer lo que me dicen pero no funciona bien, me carga la página inicial.

    Que quereis decir con «No escribas nada antes de la almohadilla o numeral si el ancla carga la página principal (mitienda.webnode.com).» ??

    Muchas gracias!

    • Muy buenas, Anna. Muchas gracias por comentarlo. He realizado un par de cambios en la captura de pantalla por si no resultaba del todo bien explicado. De todas formas, si el problema continúa, por favor dime el nombre de tu proyecto y en que sección tienes el artículo para revisarlo. Que tengas un muy buen fin de semana.

      • Anna

        Gracias, ahora se entiende mejor. Ya pude hacer que me funcionase bien.
        Buen fin de semana!

  • amarcano

    Hola Olga, estoy intentando crear anclas entre el menú de mi blog y una página concreta, pero no me funciona, todos los enlaces me llevan al inicio de la página.
    Acabo de descubrir esto de los anclas y a pesar de lo claro que lo explicas y que lo he entendido, supongo que hay algo que no hago bien.
    Te explico:
    El menú tiene una pestaña llamada viajes, que al desplegar contiene las siguientes pestañas: Europa, África y América del Sur.
    He creado una página a parte en la que incluyo como secciones Europa, África y América del Sur, y dentro de cada sección los enlaces a los países correspondientes.
    Me gustaría que al hacer click en el menú, vaya directamente a la sección correspondiente, y no al inicio de la página, pero no logro dar con la solución…
    Te dejo el enlace por si pudieras revisarlo o explicarme desde aquí qué puede estar fallando. entrelugas.blogspot.com
    Muchas gracias de antemano

    • Muy buenas, Amarcano. Muchas gracias por leer el artículo. SIn poder tener acceso al editor y al estar creado en otra plataforma diferente a Webnode, no sé decirte. Te aconsejaría que buscaras un tutorial específico para tu editor. Espero que tengas suerte y poder ayudarte mejor la próxima vez. Que tenga sun muy buen día. Gonzalo – Webnode

      • Andrea

        Hola buenas, muchas gracias por tu respuesta. Conseguí arreglarlo. Quería pedir por favor si se pudiera borrar mi mensaje anterior, estoy en proceso de borrar mi huella en internet lo máximo que pueda, y al buscar mi nombre de usuario me llevó hasta aquí. No me di cuenta que comenté com invitada y no como usuaria registrada, por lo que yo no lo puedo eliminar.
        Gracias

  • Maximiliano Noriega

    ¡GraciasGraciasGraciasGraciasGraciasGraciasGraciasGraciasGraciasGraciasGraciasGraciasGraciasGraciasGraciasGraciasGraciasGraciasGraciasGraciasGracias…!
    Las anclas en el editor TinyMCE de Joomla 3.3 no andan, mirando el código fuente no aparece el link donde pongo el ancla, y me estaba retrasando mucho en actualizar mi sitio web. Este artículo me resultó muy útil.
    Para no escribirlas todas, simplemente te digo «Mil gracias» 😀

    • Muchas gracias a ti, Maximiliano. Me alegro que te haya sido útil. Seguro que Olga se pone muy contenta cuando se lo cuente. Que tengas un muy buen día, Maximiliano. 🙂 Gonzalo – Webnode

  • ROCIO BRAVO ALONSO

    No entiendo bien que quieres decir con esto “Cláusulas” antes de # significa que el enlace apunta a Términos y Condiciones (URL: http://mitiendaejemplo.webnode.com/terminos-). No escribas nada antes de la almohadilla o numeral si el ancla carga la página principal (mitiendaejemplo.webnode.es).

  • cesar

    una pregunta podria enves de ser un link acerlo con un boton

  • señor shido

    no me funciona

    • Hola señor Shido, muchas gracias por tu comentario. Por favor, déjame saber cómo se llama tu proyecto para revisarlo. Puedes enviarme un mensaje en soporte@webnode.es y con mucho gusto te ayudaremos. Gracias. ¡Feliz día!

  • señor shido

    No me funciono