Curso HTML – Módulo 6: Enlaces en HTML – Fundamentos de navegación web
Módulo 6: Enlaces en HTML – Fundamentos de navegación web
Los enlaces son una de las bases más importantes de cómo navegamos en internet. Gracias a ellos, cualquier persona puede ir de una página a otra, moverse dentro de un mismo sitio o incluso acceder a diferentes recursos. Por eso, la etiqueta <a> es una de las más usadas en HTML.
En este módulo vamos a explorar a fondo cómo funcionan los enlaces. Empezaremos con lo más básico y poco a poco iremos viendo casos más avanzados, como enlaces internos, externos, a imágenes, a correos electrónicos e incluso cómo controlar dónde se abren.
Tipos de contenido/destino que puede tener un enlace HTML (<a>)
HTML nos da mucha flexibilidad para crear enlaces según lo que necesitemos. Aquí te explicamos los principales tipos:
Externos
Sirven para dirigir al usuario a otro sitio fuera del actual. Son muy útiles para citar fuentes, compartir documentación o llevar a otros recursos en línea.
<a href="https://www.mozilla.org" target="_blank">Visitar Mozilla</a>
Internos
Nos permiten movernos dentro de la misma página o entre secciones del mismo sitio. Para que funcionen, necesitamos usar identificadores (id) o rutas relativas.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Ejemplo de Enlace Interno</title> </head> <body> <h1>Bienvenido a mi página</h1> <p>En esta página aprenderás sobre HTML. Usa el siguiente enlace para saltar directamente a la sección 2:</p> <a href="#seccion2">Ir a la Sección 2: Enlaces</a> <h2 id="seccion1">Sección 1: Introducción</h2> <p>HTML es el lenguaje de marcado principal para la creación de páginas web.</p> <h2 id="seccion2">Sección 2: Enlaces</h2> <p>Los enlaces en HTML se crean con la etiqueta <code><a></code> y permiten conectar documentos entre sí.</p> <h2 id="seccion3">Sección 3: Imágenes</h2> <p>Las imágenes se insertan en HTML mediante la etiqueta <code><img></code>.</p> </body> </html>
Imágenes
Transforman imágenes en elementos interactivos, mejorando la interacción visual del usuario.
<a href="https://example.com"> <img src="imagen.jpg" alt="Descripción de la imagen"> </a>
<a href="/perfil"> <i class="fas fa-user"></i> Perfil </a>
Restricciones
-
No se puede anidar un <a> dentro de otro <a>.
-
El contenido debe ser interactivo y accesible (usa alt en imágenes, evita texto vacío).
Buenas prácticas
-
Usa role=»link» en casos especiales de accesibilidad.
-
Combina imágenes + texto para mayor usabilidad.
-
Asegúrate de que el enlace tenga sentido por sí mismo (no pongas solo «haz clic aquí»).
Diferencias entre Enlaces Relativos y Absolutos
| Tipo de Enlace | Ejemplo | Uso Recomendado |
|---|---|---|
| Relativo | href=»about.html» | Enlaces dentro del mismo sitio |
| Absoluto | href=»https://sitioexterno.com» | Redirección a otros dominios |
Atributos Esenciales de la Etiqueta <a>
| Atributo | Descripción | Valores Comunes | Caso de Uso |
|---|---|---|---|
| href | Dirección del destino | URL | Obligatorio |
| target | Comportamiento de apertura | _blank, _self | Abrir en nueva pestaña |
| title | Texto emergente al pasar el cursor | Texto libre | Mejora accesibilidad |
Comparación de Comportamientos con «target»
<!-- Mismo contexto --> <a href="pagina.html" target="_self">Abrir aquí</a><!-- Nueva pestaña --> <a href="https://frontsparrow.com" target="_blank">Abrir en nueva pestaña</a>
Ejemplo Práctico
<p>
Visita
<a href="https://tecnops.es" target="_blank">
Tecnops
</a>
para aprender más sobre HTML.
</p>
Creación de Menús de Navegación con Enlaces
Uno de los usos más comunes de los enlaces, son la creación de menús para navegar, tanto horizontales como verticales.
<nav>
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/servicios">Servicios</a></li>
<li><a href="/contacto">Contacto</a></li>
</ul>
</nav>
Consideraciones de Accesibilidad
-
Uso de aria-label en elementos de navegación.
-
Inclusión de title y alt para enlaces e imágenes enlazadas.
-
Comprobación de contraste y legibilidad en enlaces visuales.
Estilización y Personalización
Los enlaces pueden personalizarse ampliamente mediante CSS
// Enlace
a {
color: #007BFF;
text-decoration: none;
}
// Ráton por encima del enlace
a:hover {
text-decoration: underline;
}
// Ya fue visitado
a:visited {
color: #00ff00;
}
// Durante el clic
a:active {
color: #ff00ff;
}
-
Crear una página con enlaces diversos:
-
Enlace externo a un sitio de noticias.
-
Enlace interno a una sección inferior de la misma página.
-
Imagen que actúe como botón con enlace a otra URL.
-
Enlace mailto: a un correo ficticio.
-
-
Diseñar un menú de navegación:
-
Usar lista desordenada con enlaces.
-
Incluir un submenú anidado con dos niveles.
-
Aplicar estilos visuales personalizados al menú.
-
-
Simular un sitio multipágina:
-
Crear tres archivos HTML interconectados mediante enlaces relativos.
-
Añadir enlaces de regreso (backlinks) entre ellos.
-