Enlaces en HTML

< Anterior Siguiente >

¿Qué es un enlace en HTML?

Un enlace en HTML se crea utilizando la etiqueta <a>. Los enlaces permiten a los usuarios navegar entre diferentes páginas web o secciones dentro de la misma página. El atributo más importante de la etiqueta <a> es href, que define la URL o ruta a la que apunta el enlace.

Creación de un enlace básico

Aquí tienes un ejemplo básico de un enlace en HTML:

<a href="https://www.ejemplo.com">Visita Ejemplo</a>

Este enlace llevará al usuario a https://www.ejemplo.com cuando haga clic en él.

Atributos importantes de los enlaces

Además del atributo href, hay otros atributos que puedes utilizar para controlar el comportamiento de los enlaces:

target: Define dónde se abrirá el enlace. Por ejemplo, target="_blank" abre el enlace en una nueva pestaña o ventana del navegador.
title: Proporciona información adicional sobre el enlace que se muestra como un tooltip cuando el usuario pasa el cursor sobre él.
rel: Define la relación entre el documento actual y el documento enlazado. Por ejemplo, rel="noopener noreferrer" se utiliza comúnmente cuando se abre un enlace en una nueva pestaña para mejorar la seguridad.

Ejemplo de enlace con varios atributos

El siguiente ejemplo muestra un enlace que se abre en una nueva pestaña, con un tooltip y atributos de seguridad:

<a href="https://www.ejemplo.com" target="_blank" title="Visita Ejemplo" rel="noopener noreferrer">Visita Ejemplo</a>

Enlaces a secciones internas de la misma página

También puedes crear enlaces que lleven a diferentes secciones dentro de la misma página utilizando anclas. Primero, debes crear un punto de referencia utilizando el atributo id en la sección de destino:

<h2 id="seccion1">Sección 1</h2>
<p>Contenido de la Sección 1...</p>

<a href="#seccion1">Ir a Sección 1</a>

Estilizar enlaces con CSS

Puedes estilizar enlaces utilizando CSS para cambiar su color, subrayado, y otros aspectos. Aquí tienes un ejemplo de cómo hacerlo:

<style>
a {
    color: blue;
    text-decoration: none; /* Elimina el subrayado */
}

a:hover {
    text-decoration: underline; /* Subraya el enlace al pasar el ratón por encima */
}
</style>

<a href="https://www.ejemplo.com">Enlace estilizado</a>