¿Alguna vez has visto un enlace que al hacer clic te lleva directamente a una parte específica de la misma página? Todo esto es posible gracias al símbolo # en HTML. En esta guía sencilla y amigable, te explicaremos qué es el # en HTML, para qué sirve y cómo puedes usarlo en tu propia web sin necesidad de saber programación.
¿Para Qué Sirve el # en HTML?
El símbolo # en HTML funciona como un “marcador” o ancla HTML. Es una manera de indicar al navegador que, al hacer clic en un enlace, debe desplazarse directamente a una parte específica de la misma página web.
Por ejemplo, si tienes una sección de “Contacto” al final de tu sitio, puedes usar el # para que el usuario llegue directamente allí con un solo clic.
Cómo Funciona el Enlace Interno con #
Cuando creas un enlace interno HTML, el navegador interpreta el símbolo # seguido de un nombre (ejemplo: #contacto) como una instrucción para hacer scroll automático hasta ese punto.
Definir el Punto de Destino (ID)
Primero, necesitas marcar el lugar al que quieres que el usuario llegue. Esto se hace usando el atributo id en el elemento HTML:
<h2 id="contacto">Contáctanos</h2>Este “contacto” será el nombre que enlazarás desde otro lugar.
Crear el Enlace con <a href=”#id”></a>
Luego, en cualquier parte de tu sitio (como el menú o un botón), creas el enlace de esta forma:
<a href="#contacto">Ir a la sección de contacto</a>Al hacer clic, el navegador se desplazará suavemente hasta el elemento con id=”contacto”.
Ejemplo Práctico Paso a Paso en WordPress – Elementor
En este ejemplo aprenderás cómo hacer que al hacer clic en la opción “Ubicación” del menú, el sitio te lleve automáticamente a la sección “¿Dónde estamos?” dentro de la misma página. Este procedimiento es muy útil cuando deseas mejorar la navegación en una página construida con Elementor en WordPress.
1. Abre las herramientas necesarias
Primero, abre en dos pestañas del navegador:
- Otra con “Personalizar”, ambas disponibles en la parte superior del escritorio de WordPress cuando estás logueado y viendo la página.
- Una con la opción “Editar con Elementor”
2. Agrega el enlace personalizado al menú
En la pestaña de “Personalizar”:
- Dirígete a la sección Menús.
- Selecciona el menú que se esté usando como menú principal o en el header.
- Haz clic en “Añadir elementos” y selecciona la opción “Enlaces personalizados”.
- En el campo URL, escribe
#ubicacion(con el numeral al inicio). - En el campo Texto del enlace, escribe “Ubicación” (o el texto que desees mostrar en el menú).
- Haz clic en “Añadir al menú” y organiza el nuevo ítem en la posición deseada.
- Finalmente, haz clic en “Publicar” para guardar los cambios.
3. Asigna el ID a la sección correspondiente en Elementor
Ahora, regresa a la pestaña donde estás editando con Elementor:
- Ubica la sección a la que quieres que el enlace “Ubicación” del menú dirija, por ejemplo, la sección ¿Dónde estamos?
- Selecciona el contenedor o sección correspondiente.
- En el panel lateral, ve a la pestaña “Avanzado”.
- En el campo ID de CSS, escribe el mismo nombre que usaste en la URL del enlace personalizado, pero sin el símbolo
#, es decir:ubicacion. - Haz clic en “Actualizar” o “Publicar” para guardar los cambios.
Ejemplo Práctico Paso a Paso en html puro
Paso 1: Añadir el Marcador
Dentro de tu HTML, localiza el título o el párrafo donde quieres que llegue el usuario y agrega id="contacto":
<h2 id="contacto">Contáctanos</h2>Paso 2: Crear el Enlace
En el menú o en cualquier parte de tu texto, escribe:
<a href="#contacto">Ir a la sección de contacto</a>Fragmento de código completo:
<!-- Punto de destino -->
<h2 id="contacto">Contáctanos</h2>
<!-- Enlace que desplaza -->
<a href="#contacto">Ir a la sección de contacto</a>Con esto ya estás usando el scroll automático con # en HTML, también conocido como enlace interno HTML.
Frases clave para Snippets de Google
- “El símbolo # en HTML actúa como ancla dentro de la misma página.”
- “Para desplazar al usuario a un punto específico, añade id=”nombre” al elemento y enlázalo con <a href=”#nombre”>…</a>.”
¡Prueba esta técnica en tu sitio!
Ahora que sabes qué es el # en HTML y cómo usarlo para hacer scroll interno, ¡anímate a implementarlo en tu página! Es fácil, rápido y mejora la navegación. Si tienes dudas, deja tu comentario y con gusto te ayudaremos.
