Diseño Web 1 — 2026

Temas

Vínculos de Navegación

Etiquetas de Vínculos

JavaScript

<script src="" type=""></script>
  • src = “javascript.js”
  • type = “text/javascript” (por defecto)

CSS

<link href="" rel="" type="">
  • href = “estilos.css”
  • rel = “stylesheet”
  • type = “text/css”

Tipos de Enlaces

A Página

<a href="" target=""> Texto </a>
  • href = “url”
  • target = “destino” (_blank, _self, _parent, _top)

Externo Absoluto

<a href="http://www.sitio.com" target="_blank"> Texto </a>

Vincula con una página externa al sitio, conecta a otro servidor

Externo Relativo

<a href="pagina.html"> Texto </a>

Vincula con una página del mismo sitio (Interno)

A Dirección de Email

<a href="mailto:xxx@xxx.com"> Texto </a>
<a href="#ancla"> Texto </a>
<a href="url#ancla"> Texto </a>

Definición de Ancla:

<p id="ancla">Bibliografía</p>

Consideraciones Importantes

  • Debemos asegurarnos que los enlaces indiquen de forma clara su destino y funcionalidad.
  • Cuando un link requiere de información adicional para mejorar su comprensión se usa el atributo “title”.
  • Garantizar que los enlaces que refieran al mismo destino o recurso sean iguales.
  • Evitar enlaces rotos.
  • Evitar abrir enlaces en nuevas ventanas. No es un comportamiento esperado, confunde y desorienta.
  • Si se abre en nueva ventana/pestaña se debe informar al usuario del comportamiento del enlace.
  • Los mecanismos de navegación repetidos deben aparecer en el mismo orden relativo cada vez que se repiten.

Ejemplos de Redacción de Enlaces

❌ Mal:

Para ver los resultados de la encuesta de hogares al 2009, haz click aquí

✅ Mejor:

Clickeando aquí, podrás ver los resultados de la encuesta de hogares al 2009

✅ Mejor aún:

Los resultados de la encuesta de hogares al 2009

El subrayado indica que es un link

Sistema de Navegación

¿Cómo debe ser?

  • Consistente: Debe ser similar en todo el sitio, debe conservar su ubicación y disposición en las páginas.
  • Uniforme: Debe utilizar similares términos dentro del sitio.
  • Visible: Debe distinguirse claramente dentro del sitio.

Rol de los Mecanismos de Navegación

  • El medio para movernos dentro del sitio: Menús, guías, “migas de pan”, etcétera.
  • Una idea de los contenidos del sitio: Introducción a la página o secciones, etcétera.
  • Orientación, comunicándonos dónde nos encontramos: Señalizadores, títulos coherentes, etcétera.
  • La seguridad de que no estamos perdidos.

Migas de Pan

Indican al usuario dónde se encuentra y la relación jerárquica de ese documento con el resto de la estructura del sitio o aplicación. Deben ser consistentes a lo largo del sitio, el mismo tipo de miga de pan y de la misma forma.

Otros Mecanismos

  • Paginación - Permite navegar entre múltiples páginas de contenido
  • Menúes - Sistemas de navegación principal o secundaria