Enlaces y hipervínculos HTML

Introducción

Enlaces y hipervínculos HTML
Analogía de un hipervínculo y la dirección de una invitación.

Analogía: Un hipervínculo es como una dirección en una carta o invitación: Cuando se recibe una invitación a una fiesta. En la invitación aparece una dirección: "Te esperamos en Calle 123, Edificio Fiesta, a las 8 PM."

La dirección:

  • No se trata del evento en sí, solo se especifica su ubicación.
  • Siguiendo esa dirección, se puede estar en el lugar correcto.
  • Sin conocer esa dirección, es imposible encontrar el sitio.

En HTML:

  • La invitación funciona como el enlace <a>.
  • La dirección especificada corresponde al valor del atributo href.
  • Pulsar el enlace es similar a dirigirse al destino señalado.

Los vínculos están presentes en casi todos los sitios web. Los vínculos facilitan a los usuarios navegar de una página a otra con un clic.

Enlaces HTML-Hiperenlaces

Los enlaces en HTML son hiperenlaces que conectan diferentes recursos en la web.

Al hacer clic en un enlace, se puede navegar hacia otro documento o página.

Al pasar el cursor sobre un enlace, la flecha del ratón se transforma en una pequeña mano ().

Enlaces HTML-Sintaxis

La etiqueta HTML <a> define un hipervínculo. Tiene la siguiente sintaxis: 

                    
                      <a href="url">link text</a>
  • <a>: Es la etiqueta que sirve para crear un enlace (anchor).
  • href: Es el atributo que especifica la URL hacia la cual se redirige al usuario al pulsar.
  • Texto del vínculo: Es el contenido visible que el usuario puede pulsar.
  • Al pulsar sobre el texto del vínculo, se dirigirá al usuario a la URL indicada en href.

Este ejemplo muestra cómo crear un enlace a la página del Ing. Eduardo Herrera Forero: 

                      
                        Este ejemplo muestra cómo crear un enlace a la página del 
                        <a href="https://eduardoherreraf.github.io/">Ing. Eduardo Herrera Forero</a>

De manera predeterminada, los vínculos se mostrarán de la siguiente forma en todos los navegadores:

  • Un enlace sin visitar se resalta en azul y con subrayado.
  • Un enlace visitado se destaca en púrpura y con subrayado.
  • Un enlace activo se marca en rojo y con subrayado.

Enlaces HTML - El Atributo target

Por defecto, la página enlazada aparecerá en la ventana actual del navegador. Para modificar esto, es necesario definir un destino diferente para el enlace.

El atributo target especifica dónde abrir el documento enlazado.

El atributo target puede ser uno de los siguientes valores:

  • _self: Por omisión, carga el documento en la misma ventana o pestaña donde se hizo clic.
  • _blank: Carga el documento en una nueva ventana o pestaña, se usa en conjunto con rel="noopener noreferrer", para una mayor seguridad y privacidad.
  • _parent: Carga el documento en el marco superior inmediato, si existe.
  • _top: Carga el documento ocupando todo el espacio de la ventana, rompe todos los frames.
  • Nombre Personalizado: Abre en ventana específica.
  • Los atributos más usados son: _self y _blank:

_self: La página abre en la misma pestaña / ventana
_blank: La página abre en otra pestaña / ventana 

                    
                      <p><code>_self</code>: 
                        <a href="https://eduardoherreraf.github.io/" target="_self">La página abre en la misma pestaña / ventana</a>
                      </p>
                      <p><code>_bank</code>: 
                        <a href="https://eduardoherreraf.github.io/" 
                          target="_blank 
                          rel="noopener noreferrer">
                        La página abre en otra pestaña / ventana</a>
                      </p>

URLs Absolutas vs URLs Relativas

En el contexto de HTML, las URLs (Uniform Resource Locators) son fundamentales para especificar la ubicación de recursos como enlaces, imágenes o archivos multimedia. Permiten indicar el nombre y la localización de un archivo o recurso, y se dividen principalmente en dos tipos: absolutas y relativas.

URL Absoluta

Una URL absoluta es una dirección completa e independiente que contiene todos los componentes necesarios para localizar un recurso desde cualquier ubicación, sin depender de la posición del usuario o del documento que la referencia.

Las URLs absolutas son necesarias cuando se quiere enlazar a una página o recurso que se encuentra fuera de su propio sistema o servidor. Este tipo de URL es universalmente accesible desde cualquier ubicación y no depende del contexto donde se use.

Una URL absoluta proporciona la dirección completa y autosuficiente de un recurso en la web. Esto incluye:

  • Protocolo: Estar seguro de incluir de primero el protocolo, como http://, https://, ftp://, etc.
  • Dominio completo: Contiene el nombre de dominio del sitio web (ej., www.ejemplo.com).
  • Ruta: Especifica la posición del recurso en el servidor (ej., categoria/computador-Mac.html).

Para la página inicial de la Nasa: Página inicial de NASA

Listado de los Usuarios Locales

Ver documento PDF

Las direcciones de correo electrónico en enlaces también usan una estructura absoluta con mailto: Presidente de la empresa. 

                        
                          <p>Para la página inicial de la Nasa: <a href="https://www.nasa.gov/">Página inicial de NASA</a></p> 

                          <p>Listado de los <a href="http://localhost:3000/api/usuarios">Usuarios Locales</a></p> 

                          <p>Ver <a href="ftp://servidor.com/archivos/documento.pdf">documento PDF</a></p> 

                          <p>Enviar este documento a: <a href="mailto:presidente@empresa.com">Presidente de la empresa</a>.</p>

Ventajas de URLs Absolutas

  • Exactitud absoluta: Siempre dirigen al mismo recurso sin confusiones.
  • Autonomía del entorno: Operan correctamente desde cualquier lugar.
  • Intercambiabilidad: Pueden compartirse y funcionar en cualquier plataforma.
  • Optimización SEO: Ideales para enlaces externos y difusión en redes sociales.

Desventajas de URLs Absolutas

  • Menos adaptables: Complicadas de ajustar si el dominio cambia.
  • Más extensas: Consumen más espacio en el código.
  • Vinculación al dominio: Dificultades al trasladar entre entornos (desarrollo, testing, producción).
  • Mantenimiento: Más complejas de actualizar en sitios de gran escala.

Por último, es importante copiar estas direcciones correctamente, respetando mayúsculas y minúsculas, especialmente para servidores UNIX o Github Pages que distinguen entre ellas.

URL Relativa

Una URL relativa especifica la ubicación de un recurso en relación con la ubicación del documento HTML actual. Son comúnmente utilizadas para enlazar a otras páginas o recursos que forman parte del mismo sitio web.

Tipos de URLs Relativas

  • Relativas al documento actual: 
                                
                              <!-- Archivo en la misma carpeta -->
                              <a href="contacto.html">Contacto</a>

                              <!-- Archivo en la misma carpeta -->
                              <a href="./usuarios.html">Usuarios</a>

                              <!-- Archivo en subcarpeta -->
                              <a href="imagenes/logo.png">Logo</a>
  • Relativas a la raíz del sitio: 
                                
                              <!-- Comienzan con / -->
                              <a href="/productos/categoria/">Productos</a>
                              <a href="/css/estilos.css">Estilos</a>
  • Relativas con navegación de directorios: 
                                
                              <!-- Subir un nivel -->
                              <a href="../index.html">Inicio</a>

                              <!-- Subir dos niveles -->
                              <a href="../../recursos/manual.pdf">Manual</a>

                              <!-- Combinadas -->
                              <a href="../imagenes/banner.jpg">Banner</a>

Ejemplos Prácticos de URLs Relativas

Estructura de Carpetas: 

sitio-web (inicio)/
├── index.html
├── productos/
│   ├── categoria/
│   │   └── item.html
│   └── lista.html
├── imagenes/
│   └── logo.png
└── css/
    └── estilos.css

Desde item.html: 

Ir a inicio: ../../index.html
Ir a lista: ../lista.html
Cargar logo: ../../imagenes/logo.png
Cargar CSS: ../../css/estilos.css

Usando rutas absolutas del sitio: 

Ir a inicio: /index.html
Ir a lista: /productos/lista.html
Cargar logo: /imagenes/logo.png
Cargar CSS: /css/estilos.css

Ventajas de URLs Relativas

  • Portabilidad: Permiten trasladar el sitio completo de manera funcional y sin complicaciones.
  • Flexibilidad: Facilitan la adaptación y el cambio entre diferentes entornos con facilidad.
  • Brevedad: Son más concisas y claras en su estructura.
  • Eficiencia: Reducen la cantidad de código escrito, optimizando recursos.
  • Desarrollo local: Operan de forma efectiva sin necesidad de un servidor web.

Desventajas de URLs Relativas

  • Dependencia del contexto: Pueden fallar al trasladar archivos.
  • Confusión: Resultan más complejas de rastrear en proyectos extensos.
  • Limitaciones: No son adecuadas para compartir fuera de la plataforma.
  • Depuración: Son más complicadas de depurar cuando presentan errores.

Cuándo Usar Cada Tipo de URL

Usar URLs absolutas cuando:

  • Enlaces a sitios externos.
  • APIs y servicios web.
  • Recursos compartidos en redes sociales.
  • Configuraciones de producción críticas.
  • CDNs y recursos externos.
  • Emails y documentos PDF.

Usar URLs relativas cuando:

  • Navegación interna del sitio.
  • Recursos locales (CSS, JS, imágenes).
  • Enlaces entre páginas del mismo dominio.
  • Desarrollo y pruebas.
  • Sitios que cambiarán de dominio.

Enlaces HTML - Usar una Imagen como Enlace

Un enlace HTML que incorpora una imagen como vínculo permite redirigir al usuario a otra página o recurso al hacer clic en la imagen. Esto se consigue mediante la combinación de las etiquetas <a> (para crear enlaces) y <img> (para insertar imágenes). En otras palabras, la etiqueta de imagen (<img>) está contenida dentro de la etiqueta de anclaje (<a>).

Sintaxis Básica:

                    
                      <a href="URL_destino">
                        <img src="ruta_imagen.jpg" alt="Descripción de la imagen">
                      </a>

Ejemplo:

Logo de NASA 
                      
                        <a href="https://www.nasa.gov/">
                          <img
                            src="https://www.nasa.gov/wp-content/themes/nasa/assets/images/nasa-logo.svg"
                            alt="Logo de NASA"
                            width="150"
                          />
                        </a>

Enlaces HTML - Enlace a una Dirección de Correo Electrónico

Un enlace de correo electrónico en HTML se crea con la etiqueta <a> y el esquema mailto: en el atributo href. Permite a los usuarios abrir su cliente de correo predeterminado con un nuevo mensaje dirigido a una dirección específica, facilitando el envío de correos con un solo clic.

Sintaxis Básica:

                    
                      <a href="mailto:correo@ejemplo.com">Enviar correo</a>

Opciones Adicionales para Enviar Correos

Es posible añadir información adicional al enlace de correo electrónico para pre-configurar el mensaje, como destinatarios en copia (Cc), copia oculta (Bcc), asunto y cuerpo del mensaje. Estos valores deben ir codificados en la URL.

Asunto Predefinido

El correo tiene como asunto predeterminado mi consulta. Los espacios en el asunto deben reemplazarse por el código %20 para que sea correcto, es decir, Mi%20consulta. 

                        
                          <p>
                            Se envía el correo a:
                            <a href="mailto:correo@ejemplo.com?subject=Mi%20consulta">Pablo Pérez</a>
                          </p>

Cuerpo del Mensaje

Los espacios en el mensaje también se deben reemplazar por el código %20. 

                        
                          <p>
                            Se envía el correo a:
                            <a href="mailto:correo@ejemplo.com?body=Hola,%20tengo%20una%20pregunta.">Contactar por correo</a>
                          </p>

Múltiples Destinatarios

Los destinatarios se escriben uno tras otro separado por una coma (,). 

                        
                          <p>
                            Se envía el correo a:
                            <a href="mailto:correo@ejemplo.com,correo2@ejemplo.com">Contactar por correo</a>
                          </p>

Con copia (CC) y copia oculta (BCC)

                        
                          <p>
                            Se envía el correo a:
                            <a href="mailto:correo@ejemplo.com?cc=copia@ejemplo.com&bcc=oculta@ejemplo.com">Contactar por correo</a>
                          </p>

Ejemplo General envío de Correo Electrónico

Este ejemplo ilustra cómo usar todas las opciones disponibles para enviar un correo electrónico.

Se envía el correo a: Arturo Cova (correo) y Pedro López (correo2) con copia a Antonio Yammara (copia) y con copia oculta a Santiago Nasar (oculto). 

                          
                            <p>Se envía el correo a:
                              <a
                                href="mailto:correo@ejemplo.com,correo2@ejemplo.com?subject=Mi%20consulta&body=Hola,%20tengo%20una%20pregunta.&cc=copia@ejemplo.com&bcc=oculto@ejemplo.com"
                              >
                                Arturo Cova (correo) y Pedro López (correo2) con copia a Antonio Yammara (copia) y con copia oculta a Santiago Nasar (oculto).
                              </a>
                            </p>

Enlaces HTML - Un Botón como un Enlace

En HTML, existen diversas maneras de diseñar un botón que funcione como enlace. A continuación, se presentan las principales alternativas:

Botón Dentro de un Enlace

Situar un elemento <button> dentro de un elemento <a> puede provocar conflictos de validación HTML, ya que no cumple con las especificaciones estándares de accesibilidad y semántica web.

Este botón lo lleva a la Página de inicio de la NASA: 

                        
                          <a href="https://nasa.gov/" target="_blank">
                            <button type="button">Nasa</button>
                          </a>

Enlace Estilizado como Botón

Es la opción más semánticamente correcta y accesible.

Este botón lo lleva a la Página de inicio de la NASA: NASA 

                        
                          <p> 

                            Este botón lo lleva a la Página de inicio
                             de la NASA: 

                            <a 

                              href="https://nasa.gov/" 

                              target="_blank" 

                              class="boton" 

                              >NASA</a> 

                            </p>
                          
                        
                          
                            .code-css{
                              padding: 10px 20px;
                              background-color: #007bff;
                              color: white;
                              text-decoration: none;
                              border-radius: 5px;
                              border: none;
                              cursor: pointer;
                            }

                            .boton:hover {
                              background-color: #0056b3;
                            }

Formulario con Botón

Es útil cuando se necesita enviar datos POST.

Este botón lo lleva a la Página de inicio de la NASA:  

                          
                            <p> 

                              Este botón lo lleva a la Página de inicio de la NASA: 

                            </p> 

                            <form 

                              action="https://www.nasa.gov/" 

                              method="get" 

                              target="_blank" 

                            > 

                              <button type="submit">NASA</button> 

                            </form>

Botón con JavaScript

Este botón lo lleva a la Página de inicio de la NASA: 

                          
                            <p>
                              Este botón lo lleva a la Página de inicio de la
                              NASA: 
                            </p>
                            <button
                              onclick="window.open('https://www.nasa.gov/', '_blank')"
                            >
                              NASA
                            </button>

Botón con data attribute y JavaScript

Este botón lo lleva a la Página de inicio de la NASA: 

                          
                            <button data-url="https://nasa.gov" class="link-button">
                              NASA
                            </button> 


                            <script> 

                              document
                                .querySelectorAll(".link-button") 

                                .forEach((button) => { 

                                  button.addEventListener("click", function () { 

                                    window.open(this.dataset.url, "_blank"); 

                                  }); 

                                }); 

                            </script>

Marcadores (Anchors)

Los enlaces ancla locales, o enlaces internos, facilitan la navegación al permitir saltos dentro de una misma página HTML. Se utilizan principalmente para:

  • Navegación interna dentro de la misma página.
  • Enlaces directos a secciones específicas de otras páginas.
  • Crear menús de contenido y navegación.
  • Mejorar la experiencia del usuario en páginas largas.

Sintaxis Básica de Marcadores

Crear un Marcador

Un destino (ancla) es la sección específica de una página web a la que un enlace dirige al usuario. Se le asigna un id nombre o identificador único mediante el atributo id en HTML. Por ejemplo: <h2 id="seccion-importante">Esta es una sección relevante</h2>. En este caso, seccion-importante es el identificador del ancla.

Enlazar al Marcador

Un enlace (origen) se define como el texto o la imagen en el que se hace clic para dirigirse al destino. En HTML, se crea mediante la etiqueta <a> (anchor) y el atributo href. Lo esencial es que en el atributo href se utiliza el símbolo # seguido del nombre del ancla. Por ejemplo: <a href="#seccion-importante">Acceder a la sección importante</a>.

Ejemplos Uso del Marcador

Navegación Interna

                        
                          <!-- Enlaces en el menú -->
                          <a href="#introduccion">Introducción</a>
                          <a href="#desarrollo">Desarrollo</a>
                          <a href="#conclusion">Conclusión</a>
                          

                          <!-- Secciones destino -->

                          <section id="introduccion">

                            <h2>Introducción</h2>
                            <p>Contenido...</p>
                          </section>

                          

                          <section id="desarrollo">
                            <h2>Desarrollo</h2>
                            <p>Contenido...</p>
                          </section>
                          

                          <section id="conclusion">
                            <h2>Conclusión</h2>
                            <p>Contenido...</p>
                          </section>

Botón "Volver al Inicio"

                        
                          <!-- Al inicio de la página -->
                          <h1 id="top">Título Principal</h1>
                          
                          . 
                          .
                          .
                                                  
                          <!-- En cualquier parte de la página -->
                          <a href="#top" class="back-to-top">↑ Volver arriba</a>

Consejos y Mejores Prácticas

  • Identificadores (id) únicos: Cada identificador (id) debe ser único dentro de la página.
  • Nombres descriptivos: Se deben emplear nombres claros y significativos, como "contacto" o "servicios".
  • Sin espacios: Los identificadores no deben incluir espacios; en su lugar, se utiliza guiones.
  • Sensible a mayúsculas y minúsculas: Los identificadores distinguen entre mayúsculas y minúsculas.
  • Accesibilidad: Se recomienda usar atributos aria-label para mejorar la accesibilidad en enlaces de navegación.

Enlaces a Marcadores en Otras Páginas

También puedes enlazar a secciones específicas de otras páginas: 

                    
                      <!-- Enlace a una sección específica de otra página -->
                        <a href="./productos.html#laptops">Ver Laptops</a>
                        <a href="./contacto.html#formulario">Ir al Formulario</a>
                        <a href="https://ejemplo.com/pagina.html#seccion">Enlace Externo</a>

Otros Atributos para Enlaces

Atributos de Seguridad

Definen la relación entre la página actual y el destino:

  • noopener: Previene acceso al objeto window
  • noreferrer: No envía información del referrer
  • nofollow: Indica a motores de búsqueda que no sigan el enlace

Se recomienda incluir siempre el atributo rel"noopener noreferrer" en los enlaces con target="_blank" para garantizar la seguridad y evitar posibles vulnerabilidades. 

                      
                        <a href="https://sitioexterno.com" target="_blank" rel="noopener noreferrer">Enlace seguro</a>

Atributos de Accesibilidad

title: Proporciona información adicional que aparece como tooltip: 

                      
                        <a href="documento.pdf" title="Descargar documento PDF (2MB)">Descargar</a>

aria-label: Etiqueta alternativa para lectores de pantalla:: 

                      
                        <a href="/inicio" aria-label="Ir a página de inicio">🏠</a>

Atributos de Descarga

download: Sugiere descargar el recurso en lugar de navegarlo: 

                      
                        <a href="archivo.pdf" download="manual-usuario.pdf">Descargar manual</a>

Atributos de Navegación

hreflang: Indica el idioma del contenido enlazado: 

                      
                        <a href="https://ejemplo.com/en/" hreflang="en">English version</a>

type: Especifica el tipo MIME del contenido enlazado: 

                      
                        <a href="documento.pdf" type="application/pdf">Ver PDF</a>

Ejemplo Completo Enlaces

Sintaxis Básica:

                      
                        <a href="https://ejemplo.com/articulo" 
                          target="_blank" 
                          rel="noopener noreferrer"
                          title="Leer artículo completo en sitio externo"
                          hreflang="es">
                          Leer más
                        </a>

Estos atributos facilitan la creación de enlaces más seguros, accesibles y funcionales, lo que optimiza la experiencia del usuario y potencia el posicionamiento SEO del sitio web.

COMENTARIOS

Si tiene alguna inquietud, duda o ha encontrado algún error, por favor infórmelo a través del formulario disponible para este propósito.

La política de privacidad, y los términos y condiciones están disponibles en el formulario de contacto.