---
title: Crear hipervínculos
slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
tags:
  - Aprender
  - CodingScripting
  - Guía
  - HTML
  - HTTP
  - Novato
  - Principiante
  - Title
  - URL
  - enlace
  - hiperenlaces
  - hipervínculos
  - href
  - referencia absoluta
  - referencia relativa
  - título
  - urls
translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
original_slug: Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</div>

<p class="summary">Los hipervínculos (o enlaces) son elementos verdaderamente importantes — son los que hacen que la web sea <em><strong>web</strong></em>. Este artículo expone la sintaxis necesaria para crear un enlace, además contiene un catálogo de buenas prácticas para crearlos.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prerrequisitos:</th>
   <td>Estar familiarizado con HTML, cubierto en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}. Aplicación de formato a texto en documentos HTML, según lo expuesto en la sección {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "fundamentos de texto HTML")}}.</td>
  </tr>
  <tr>
   <th scope="row">Objetivo:</th>
   <td>Aprender a implementar un <em>hipervínculo</em> de forma efectiva y enlazar múltiples archivos.</td>
  </tr>
 </tbody>
</table>

<h2 id="¿Qué_es_un_hipervínculo">¿Qué es un hipervínculo?</h2>

<p>Los hipervínculos son una de las innovaciones más interesantes que ofrece la Web. Han formado parte de esta desde el principio, pero hacen que la web sea <em>web </em>: Los hipervínculos nos permiten vincular documentos a otros documentos o recursos, vincular a partes específicas de documentos o hacer que las aplicaciones estén disponibles en una dirección web. Prácticamente cualquier contenido web se puede convertir en un enlace que, al pulsarlo (activarlo), dirija el navegador a la dirección web a la que apunta el enlace ({{Glossary("URL")}}).</p>

<div class="note">
<p><strong>Nota</strong>: Una URL puede apuntar a archivos HTML, archivos de texto, imágenes, documentos de texto, archivos de audio o vídeo, y cualquier otra cosa que se pueda mostrar en la web. Si el navegador no sabe cómo manejar el archivo, te preguntará si lo quieres abrir (en cuyo caso la tarea de abrirlo y manejarlo se transferirá a la aplicación nativa instalada en el dispositivo) o si lo quieres descargar (en cuyo caso podrás ocuparte de él más tarde).</p>
</div>

<p>El sitio web de la BBC, por ejemplo, contiene una gran cantidad de enlaces que apuntan a multitud de noticias en diferentes zonas de el sitio (funcionalidad de navegación), zonas de acceso/registro (herramientas de usuario) y otras.</p>

<p><img alt="Portada de bbc.co.uk, que muestra muchas noticias y la funcionalidad del menú de navegación" src="https://mdn.mozillademos.org/files/12405/bbc-homepage.png" style="display: block; margin: 0 auto;"></p>

<h2 id="Anatomía_de_un_enlace">Anatomía de un enlace</h2>

<p>Un enlace básico se crea incluyendo el texto (o cualquier otro contenido, ve {{anch("Convertir bloques de contenido en enlaces")}}), que queramos convertir en un enlace usando un elemento ancla {{HTMLElement("a")}}, dándole un atributo {{HTMLAttrxRef("href", "a")}} (también conocido como «<strong><em>Hypertext Reference</em></strong>», «<strong><em>target</em></strong>» u <strong>objetivo</strong>) que contendrá la dirección web hacia dónde queremos que apunte el enlace.</p>

<pre class="brush: html notranslate">&lt;p&gt;Crea un enlace a
&lt;a href="https://www.mozilla.org/es-ES/"&gt;la página de inicio de Mozilla&lt;/a&gt;.
&lt;/p&gt;</pre>

<p>Este código producirá el siguiente resultado:</p>

<p>Crea un enlace a <a class="ignore-external" href="https://www.mozilla.org/es-ES/">la página de inicio de Mozilla</a>.</p>

<h3 id="Añadir_información_de_asistencia_con_el_atributo_title">Añadir información de asistencia con el atributo <code>title</code></h3>

<p>Otro atributo que posiblemente quieras agregar a tus enlaces es <code>title</code>. El título contiene información adicional sobre el enlace, como qué tipo de información contiene la página o cosas que debes tener en cuenta en el sitio web.</p>

<pre class="brush: html notranslate">&lt;p&gt;Crea un enlace a
&lt;a href="https://www.mozilla.org/es-ES/"
   title="El mejor lugar para encontrar más información acerca de la misión de Mozilla
          y cómo contribuir"&gt;la página de inicio de Mozilla&lt;/a&gt;.
&lt;/p&gt;</pre>

<p>Este código producirá el siguiente resultado (el título se mostrará al pasar el ratón sobre el texto del enlace):</p>

<p>Crea un enlace a <a class="ignore-external" href="https://www.mozilla.org/es-ES/" title="El mejor lugar para encontrar más información sobre la misión de Mozilla y cómo contribuir">la página de inicio de Mozilla</a>.</p>

<div class="note">
<p><strong>Nota</strong>: El título de un enlace solo será visible al pasar el ratón por encima, lo cual significa que los usuarios que naveguen usando los controles de sus teclados, o pantallas táctiles, tendrán dificultades para acceder a la información proporcionada por el título. Si la información del título es verdaderamente importante para el uso de la página, deberemos presentar el título de manera que sea accesible a todos los usuarios, por ejemplo incluyéndola como parte del texto del enlace.</p>
</div>

<h3 id="Aprendizaje_activo_crea_tu_propio_ejemplo_de_enlace">Aprendizaje activo: crea tu propio ejemplo de enlace</h3>

<p>Es momento del aprendizaje activo — crea un documento HTML con tu editor de código (nuestra <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">plantilla de aprendizaje</a> te hará la tarea más llevadera).</p>

<ul>
 <li>En el cuerpo del HTML (<code>body</code>), añade uno o más párrafos o cualquier otro tipo de contenido de los que ya conoces.</li>
 <li>Convierte algún texto en enlaces.</li>
 <li>Incluye atributos de título (<code>title</code>).</li>
</ul>

<h3 id="Convertir_bloques_de_contenido_en_enlaces">Convertir bloques de contenido en enlaces</h3>

<p>Como hemos mencionado anteriormente, puedes convertir cualquier contenido en un enlace, incluso {{web.link("/es/docs/Learn/HTML/Getting_started#Elementos_de_bloque_y_elementos_en_línea", "Elementos de bloque y elementos en línea")}}. Si quieres convertir una imagen en un enlace, simplemente usa el elemento {{HTMLElement("a")}} encerrando el elemento {{HTMLElement("img")}} entre <code>&lt;a&gt;</code> y <code>&lt;/a&gt;</code>.</p>

<pre class="brush: html notranslate">&lt;a href="https://www.mozilla.org/es-ES/"&gt;
  &lt;img src="mozilla-image.png" alt="Logotipo de Mozilla que dirige a la página inicial de Mozilla"&gt;
&lt;/a&gt;</pre>

<div class="note">
<p><strong>Nota</strong>: Encontrarás mucho más sobre el manejo de imágenes en próximos artículos en esta web.</p>
</div>

<h2 id="Primer_acercamiento_a_URLs_y_rutas">Primer acercamiento a URLs y rutas</h2>

<p>Para comprender completamente a dónde apuntan los enlaces, necesitas conocer las URLs y las rutas. En esta sección encontrarás la información que necesitas sobre el tema.</p>

<p>Una localizadora uniforme de recursos (URL, de las iniciales en inglés de «<em>Uniform Resource Locator</em>») es simplemente una secuencia de caracteres de texto que definen donde está situado algo en la web. Por ejemplo, la página de Mozilla está ubicada en <code>https://www.mozilla.org/es-ES/</code>.</p>

<p>Las URLs utilizan rutas para encontrar los archivos. Las rutas especifican dónde se encuentra el archivo que buscas dentro del sistema de archivos. Veamos un ejemplo de una estructura de directorios (ve el directorio <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">creating-hyperlinks</a>).</p>

<p><img alt="Una estructura de directorios simple. El directorio principal se llama creating-hyperlinks y contiene dos archivos llamados index.html y contacts.html, y dos directorios llamados projects y pdfs, que contiene un archivo index.html y un archivo project-brief.pdf, respectivamente" src="https://mdn.mozillademos.org/files/12409/simple-directory.png" style="display: block; margin: 0 auto;"></p>

<p>Al directorio <strong>raíz</strong> de esta estructura de directorios lo hemos llamado <code>creating-hyperlinks</code>. Al trabajar en modo local en una web, habrá un directorio que contendrá toda la información. En nuestro ejemplo, dentro de la raíz, encontramos el archivo <code>index.html</code> y el archivo <code>contacts.html</code>. En una web real, <code>index.html</code> es el punto de entrada a la web, lo que se conoce como <em>página de inicio</em>.</p>

<p>Observamos también dos directorios dentro de nuestro directorio raíz que son: <code>pdfs</code> y <code>projects</code>. Cada uno de ellos tiene archivos en su interior — un archivo PDF (<code>project-brief.pdf</code>) y un archivo <code>index.html</code>, respectivamente. Observa que es posible tener sin problemas dos archivos <code>index.html</code> en un proyecto siempre y cuando se encuentren alojados en ubicaciones diferentes de nuestra estructura de archivos — muchos sitios web lo hacen. El segundo <code>index.html</code> será la página de inicio para la información relativa a los proyectos.</p>

<ul>
 <li>
  <p><strong>En el mismo directorio</strong>: Si queremos incluir un hipervínculo dentro del archivo <code>index.html</code> (el <code>index.html</code> del nivel más alto) que apunte al archivo <code>contacts.html</code>, simplemente especificaremos el nombre del archivo al que hacemos referencia, porque se encuentra en el mismo directorio en el que se encuentra el archivo <code>index.html</code> desde donde lo queremos llamar. Por lo tanto, usamos la URL <code>contacts.html</code> — veamos el código:</p>

  <pre class="brush: html notranslate">&lt;p&gt;¿Quieres contactar con un miembro específico del personal?
Encuentra los detalles en nuestra &lt;a href="contacts.html"&gt;página de contactos&lt;/a&gt;.&lt;/p&gt;</pre>
 </li>
 <li>
  <p><strong>Bajando por la estructura de subdirectorios</strong>: Si queremos incluir un hipervínculo dentro del archivo <code>index.html</code> (el <code>index.html</code> de nivel más alto) que apunta a <code>projects/index.html</code>, debemos bajar hasta el directorio <code>projects</code> antes de indicar al archivo al que queremos enlazar. Para ello especificamos el nombre del directorio y le añadimos una barra inclinada hacia adelante, y a continuación el nombre del archivo. Por lo tanto, utilizaremos la URL <code>projects/index.html</code>:</p>

  <pre class="brush: html notranslate">&lt;p&gt;Visita mi &lt;a href="projects/index.html"&gt;página de inicio del proyecto&lt;/a&gt;.&lt;/p&gt;</pre>
 </li>
 <li>
  <p><strong>Subiendo por nuestro sistema de directorios</strong>: Si ahora queremos incluir un hipervínculo dentro del archivo <code>projects/index.html</code> que apunte a <code>pdfs/project-brief.pdf</code>, hay que subir un nivel en nuestro sistema de directorios, para luego bajar al directorio <code>pdf</code>. Para «Subir un nivel» utilizamos los dos puntos — (<code>..</code>) — por lo que usamos la URL <code>../pdfs/project-brief.pdf</code>:</p>

  <pre class="brush: html notranslate">&lt;p&gt;Un enlace a mi&lt;a href="../pdfs/project-brief.pdf"&gt;resumen del proyecto&lt;/a&gt;.&lt;/p&gt;</pre>
 </li>
</ul>

<div class="note">
<p><strong>Nota</strong>: Podemos combinar más de una instancia de estas características y generar URLs más complejas, si es necesario, por ejemplo: <code>../../../ruta/compleja/a/mi/archivo.html</code>.</p>
</div>

<h3 id="Fragmentos_de_documento">Fragmentos de documento</h3>

<p>Es posible apuntar hacia una parte concreta de un documento HTML en vez de a todo un documento. Para ello hay que asignar previamente un atributo {{HTMLAttrxRef("id")}} al elemento hacia el que apuntamos. Esto se debe hacer en el encabezado y quedará así:</p>

<pre class="brush: html notranslate">&lt;h2 id="Dirección_de_envío"&gt;Dirección de envío&lt;/h2&gt;</pre>

<p>Posteriormente para hacer referencia a este <code>id</code> concreto, lo añadiremos al final de la URL precedido por una almohadilla — veamos el ejemplo:</p>

<pre class="brush: html notranslate">&lt;p&gt;¿Quieres mandarnos una carta? Aquí tienes nuestra &lt;a href="contacts.html#Dirección_de_envío"&gt;Dirección de envío&lt;/a&gt;.&lt;/p&gt;</pre>

<p>También podemos usar esta referencia a un fragmento de documento para apuntar hacia otra <em>parte del mismo documento</em>:</p>

<pre class="brush: html notranslate">&lt;p&gt;La &lt;a href="#Dirección_de_envío"&gt;Dirección de envío de la empresa&lt;/a&gt; se encuentra al final de esta página.&lt;/p&gt;</pre>

<h3 id="URLs_absolutas_y_relativas">URLs absolutas y relativas</h3>

<p>Dos términos que encontrarás en la Web son <strong>URL absoluta</strong> y <strong>URL relativa:</strong></p>

<p><strong>URL absoluta</strong>: Hace referencia a una dirección definida por su ubicación absoluta en la web, esta incluye el {{Glossary("protocol", "protocolo")}} y el {{Glossary("domain name", "nombre del dominio")}}. Por ejemplo, si subes una página de inicio <code>index.html</code> a un directorio llamado <code>projects</code> que se encuentra dentro de la raíz de un servidor web, y el dominio del sitio web es <code>http://www.example.com</code>, se podrá acceder a la página desde <code>http://www.example.com/projects/index.html</code> (o simplemente <code>http://www.example.com/projects/</code>, ya que la mayoría de los servidores web buscan la página de inicio <code>index.html</code> para cargarla por omisión si no se les especifica otra en la URL).</p>

<p>Una URL absoluta siempre apuntará a la misma dirección, sin importar desde dónde se utilice.</p>

<p>Una <strong>URL relativa</strong>: Hace referencia a una dirección que depende de la posición del archivo desde donde se utiliza — son las que vimos en la sección anterior. Por ejemplo, si desde un archivo ubicado en <code>http://www.example.com/projects/index.html</code> queremos enlazar hacia un archivo PDF ubicado en el mismo directorio, la URL sería simplemente el nombre del archivo (por ejemplo: <code>project-brief.pdf</code>) no necesitamos más información. Si el archivo PDF está situado en un subdirectorio dentro de <code>projects</code> llamado <code>pdfs</code>, la URL relativa es: <code>pdfs/project-brief.pdf</code> (la URL absoluta equivalente sería: <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>).</p>

<p>Una URL relativa hará referencia a diferentes direcciones según dónde se encuentre el archivo desde el cual se utiliza — por ejemplo, si movemos nuestro archivo <code>index.html</code> del directorio <code>projects</code> a la raíz del sitio web (el nivel más alto, no cualquiera de los otros directorios), la URL relativa <code>pdfs/project-brief.pdf</code> ahora hará referencia a <code>http://www.example.com/pdfs/project-brief.pdf</code>, en lugar de a <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.</p>

<p>Por supuesto, la ubicación del archivo <code>pdfs/project-brief.pdf</code> y del directorio <code>pdfs</code> no cambian de repente cuando mueves el archivo <code>index.html</code>; esto hará que tus enlaces apunten a un sitio equivocado y no funcionarán correctamente al hacer clic en ellos. ¡Por lo tanto debes tener cuidado!</p>

<h2 id="Buenas_prácticas_en_el_uso_de_los_enlaces">Buenas prácticas en el uso de los enlaces</h2>

<p>Hay algunas buenas prácticas que debemos respetar cuando escribimos enlaces. Veamos cuáles son.</p>

<ul>
</ul>

<h3 id="Redacción_clara_del_enlace">Redacción clara del enlace</h3>

<p>Es fácil rellenar de enlaces una página, sin más. Pero esto no basta. Hay que lograr que nuestros enlaces sean <em>accesibles</em> para todo tipo de lectores, sin importar el contexto o las herramientas que prefieran. Por ejemplo:</p>

<ul>
 <li>Los usuarios de lectores de pantalla suelen saltar de enlace a enlace en la página y los leen todos sin contexto.</li>
 <li>Los motores de búsqueda utilizan el texto de los enlaces para indizar los archivos buscados, por lo que es una buena idea incluir palabras clave al definir el texto de los enlaces para describir de forma efectiva el sitio al que apuntan.</li>
 <li>Los usuarios visuales suelen echar un vistazo rápido a la página y leen solo lo que les interesa, en lugar de leer todo el texto palabra por palabra, y sus miradas van directamente a las características destacadas de la página, como son los enlaces. Este tipo de usuarios encuentra útiles los textos descriptivos que estos contienen.</li>
</ul>

<p>Veamos un ejemplo concreto:</p>

<p><em><strong>Buen</strong> texto en un enlace</em>: <a href="https://firefox.com">Descargar Firefox</a></p>

<pre class="brush: html notranslate">&lt;p&gt;&lt;a href="https://firefox.com/"&gt;
  Descargar Firefox
&lt;/a&gt;&lt;/p&gt;</pre>

<p><em><strong>Mal</strong> texto en un enlace</em>: <a href="https://firefox.com/">Pulsar aquí</a> para descargar Firefox</p>

<pre class="brush: html notranslate">&lt;p&gt;&lt;a href="https://firefox.com/"&gt;
  Haz clic aquí
&lt;/a&gt;
para descargar Firefox&lt;/p&gt;
</pre>

<p>Otras indicaciones:</p>

<ul>
 <li>No repetir la URL como parte del texto — Las URLs suenan horrible, y todavía suenan peor si las lee un lector de pantalla, letra por letra.</li>
 <li>No escribir «<em>link</em>» o «<em>link a</em>» o «enlace» o «enlace a» en el texto del enlace porque es redundante. Los lectores automáticos indican que hay un enlace al encontrarlo. Los usuarios también saben que hay un enlace, porque normalmente se suele cambiar el color del texto y se subraya (no hay que romper esta convención, porque los usuarios están acostumbrados a ella).</li>
 <li>Redacta la etiqueta del enlace de la manera más breve y concisa posible — los textos de enlace largos son especialmente molestos para los usuarios que utilizan lectores automáticos, porque tienen que escuchar todo el texto del enlace.</li>
 <li>Minimiza los casos en los que varias copias del mismo texto están vinculadas a diferentes lugares. Esto puede causar problemas a los usuarios de lectores de pantalla, si hay una lista de enlaces fuera de contexto que están etiquetados como "haz clic aquí", "haz clic aquí", "haz clic aquí".</li>
</ul>

<h3 id="Utiliza_enlaces_relativos_siempre_que_sea_posible">Utiliza enlaces relativos siempre que sea posible</h3>

<p>A partir de las indicaciones anteriores podemos llegar a pensar que es mejor utilizar referencias absolutas en todos los casos; después de todo, estas no se rompen cuando la página se traslada como ocurre con las referencias relativas. Sin embargo, debes utilizar enlaces relativos siempre que sea posible cuando enlaces a otras ubicaciones dentro del <em>mismo sitio web</em>. Cuando vinculas a otro sitio web, deberás utilizar un vínculo absoluto.</p>

<ul>
 <li>Primero, porque el código es mucho más fácil de leer — las URLs relativas suelen ser mucho más cortas que las absolutas, lo que hace que el código sea mucho más fácil de leer.</li>
 <li>Segundo, resulta más eficiente utilizar URLs relativas cuando sea posible. Cuando usas una URL absoluta, el navegador comienza buscando la ubicación real del servidor en el Sistema de nombres de dominio ({{Glossary("DNS")}}), consulta {{web.link("/es/docs/Learn/Getting_started_with_the_web/How_the_Web_works", "Cómo funciona la web")}} para obtener más información). Entonces va a ese servidor y busca el archivo solicitado. En cambio, con una URL relativa, el navegador simplemente busca el archivo solicitado en el mismo servidor. Si usas URLs absolutas donde las URLs relativas lo harían, constantemente estás haciendo que tu navegador haga un trabajo adicional, lo cual significa que funcionará de manera menos eficiente.</li>
</ul>

<h3 id="Indica_claramente_los_recursos_no_HTML">Indica claramente los recursos no HTML</h3>

<p>Cuando damos referencias a recursos para descargarlos (como documentos en formato PDF o Word) o para reproducirlos (como archivos de audio o vídeo) o que tengan un efecto inesperado (una ventana emergente) hay que indicarlo para no confundir al usuario.</p>

<p>Por ejemplo:</p>

<ul>
 <li>Si tienes una conexión con poco ancho de banda, pulsas un enlace y comienza a descargar un archivo pesado de forma inesperada.</li>
 <li>Si no tienes instalado el reproductor Flash, pulsas un enlace y te conduce a una página que requiere Flash.</li>
</ul>

<p>Veamos algunos ejemplos, para ver qué texto puede ser aconsejable en estos casos:</p>

<pre class="brush: html notranslate">&lt;p&gt;&lt;a href="http://www.example.com/large-report.pdf"&gt;
  Descarga el informe de ventas (PDF, 10MB)
&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="http://www.example.com/video-stream/"&gt;
  Reproduce el vídeo (el flujo de datos se abre en una pestaña independiente, calidad HD)
&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="http://www.example.com/car-game"&gt;
  Juega al juego del automóvil (requiere Flash)
&lt;/a&gt;&lt;/p&gt;</pre>

<h3 id="Utiliza_el_atributo_download_al_enlazar_una_descarga">Utiliza el atributo <code>download</code> al enlazar una descarga</h3>

<p>Si queremos hacer referencia a una descarga en lugar de a algo que abra el navegador, disponemos del atributo <code>download</code> para proporcionar un nombre predeterminado al archivo a guardar. Veamos un ejemplo con un enlace a la descarga de la versión para Windows de Firefox:</p>

<pre class="brush: html notranslate">&lt;a href="https://download.mozilla.org/?product=firefox-latest-ssl&amp;os=win64&amp;lang=es-MX"
   download="firefox-latest-64bit-installer.exe"&gt;
  Descarga la última versión de Firefox para Windows (64 bits) (Español, es-MX)
&lt;/a&gt;</pre>

<h2 id="Aprendizaje_activo_crear_un_menú_de_navegación">Aprendizaje activo: crear un menú de navegación</h2>

<p>Para este ejercicio, deberás crear lo que se conoce como <em>web multipágina</em>: un menú de navegación con enlaces a distintas páginas. Esta es una manera común de crear páginas web — usamos la misma estructura en todas las páginas, incluida la que contiene el menú de navegación. Cuando los usuarios pulsen los enlaces tendrán la sensación de que están en la misma página y que solo cambia el contenido mostrado.</p>

<p>Tendrás que hacer copias locales, en el mismo directorio, de las cuatro siguientes páginas (revisa el directorio <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a> para el listado completo):</p>

<ul>
 <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li>
 <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li>
 <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li>
 <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li>
</ul>

<p>A continuación:</p>

<ol>
 <li>Añade una lista no ordenada en el lugar adecuado de la página, que contenga los nombres de las páginas a las que enlazas. Un menú de navegación normalmente es una lista de enlaces (<em>links</em>), por lo que esto es semánticamente correcto.</li>
 <li>Convierte cada nombre en un enlace a esa página.</li>
 <li>Copia el menú de navegación en cada una de las páginas.</li>
 <li>En cada página, elimina solo el enlace que hace referencia a sí mismo (es confuso y no tiene sentido que una página se llame a sí misma, y la falta del enlace actúa como recordatorio de la página en la que se está en cada momento).</li>
</ol>

<p>El ejercicio terminado debería crear una página como la siguiente:</p>

<p><img alt="Un ejemplo de un menú de navegación HTML simple, con inicio, imágenes, proyectos y elementos del menú social" src="https://mdn.mozillademos.org/files/12411/navigation-example.png" style="display: block; margin: 0 auto;"></p>

<div class="note">
<p><strong>Nota</strong>: Si ahora encallas, o no estás seguro de haberlo conseguido, revisa el directorio <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navigation-menu-marked-up</a> para ver la respuesta correcta.</p>
</div>

<h2 id="Enlace_a_correo_electrónico">Enlace a correo electrónico</h2>

<p>Es posible crear enlaces o botones que, cuando se pulsan, abren un nuevo correo saliente en lugar de enlazar a un recurso o página. Esto se consigue con el elemento ancla {{HTMLElement("a")}} y el elemento <code>mailto:</code> seguido del esquema de la URL.</p>

<p>En su forma más básica, un enlace <code>mailto:</code> simplemente contiene la dirección de correo electrónico de los destinatarios. Por ejemplo:</p>

<pre class="brush: html notranslate">&lt;a href="mailto:nowhere@mozilla.org"&gt;Enviar correo electrónico a ninguna parte&lt;/a&gt;
</pre>

<p>Esto da como resultado un enlace que se ve así: <a href="mailto:nowhere@mozilla.org"> Enviar correo electrónico a ninguna parte</a>.</p>

<p>De hecho, incluso el atributo con la dirección de correo electrónico es opcional. Si lo omites y tu ({{HTMLAttrxRef("href", "a")}} simplemente es "mailto:", aparecerá una nueva ventana de correo saliente en el gestor de correo sin la dirección del destinatario. Esto es útil cuando queremos compartir enlaces que los usuarios puedan pulsar para enviar un correo electrónico y elegir un destinatario posteriormente.</p>

<h3 id="Especificar_detalles">Especificar detalles</h3>

<p>Además de la dirección de correo electrónico, puedes proporcionar otra información. De hecho, puedes incluir cualquier campo estándar contenido en el encabezado de cualquier mensaje en la URL <code>mailto</code> que proporciones. Los más utilizados son el «<code>subject</code>» (asunto), «<code>cc</code>» (con copia a) o «<code>bcc</code>» (copia oculta), y «<code>body</code>» (cuerpo del mensaje, que no es realmente un campo de la cabecera, pero permite especificar un mensaje breve para el nuevo correo electrónico). Cada campo y su valor se especifican como un argumento de la consulta.</p>

<p>Veamos un ejemplo que incluye estos campos:</p>

<pre class="brush: html notranslate">&lt;a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&amp;bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email&amp;body=The%20body%20of%20the%20email"&gt;
  Enviar un correo electrónico cc, bcc, asunto y cuerpo
&lt;/a&gt;</pre>

<div class="note">
<p><strong>Nota</strong>: Los valores de cada campo deben tener la URL codificada, es decir, sin caracteres no imprimibles (caracteres invisibles, tabulaciones, retornos de carro y saltos de página) y espacios con codificación porcentual (%20) {{Interwiki("wikipedia", "Código porciento")}}. También hay que tener en cuenta el uso del signo de interrogación (?) para separar la URL principal de los valores de los campos, y el símbolo ampersand (&amp;) para separar cada campo dentro del enlace <code>mailto:</code>. Esta es la notación de consulta URL estándar. Lee {{web.link("/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_GET_method", "el método GET")}} para comprender mejor qué notación de consulta URL se usa comúnmente.</p>
</div>

<p>A continuación otros ejemplos de utilización de enlaces <code>mailto</code>:</p>

<ul>
 <li><a href="mailto:">mailto:</a></li>
 <li><a href="mailto:nowhere@mozilla.org">mailto:nowhere@mozilla.org</a></li>
 <li><a href="mailto:nowhere@mozilla.org,nobody@mozilla.org">mailto:nowhere@mozilla.org,nobody@mozilla.org</a></li>
 <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org</a></li>
 <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&amp;subject=This%20is%20the%20subject">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&amp;subject=This%20is%20the%20subject</a></li>
</ul>

<h2 id="¡Pon_a_prueba_tus_habilidades!">¡Pon a prueba tus habilidades!</h2>

<p>Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Encuentra más ejercicios con los que comprobar que has retenido esta información antes de seguir adelante; consulta {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links", "Pon a prueba tus habilidades: Enlaces")}}.</p>

<h2 id="Resumen">Resumen</h2>

<p>Eso es todo en cuanto a enlaces, ¡por ahora! Volveremos a ellos más tarde en este curso cuando comencemos a usar estilos. Lo siguiente en HTML, será aprender la semántica de texto para usar algunas características avanzadas/inusuales que nos serán utilidad — Formato de texto avanzado será la próxima parada.</p>

<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</p>

<h2 id="En_este_módulo">En este módulo</h2>

<ul>
 <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}</li>
 <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "¿Qué hay en el «head»? Metadatos en HTML")}}</li>
 <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}</li>
 <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Crear hipervínculos")}}</li>
 <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Formateo de texto avanzado")}}</li>
 <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}</li>
 <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Depurar HTML")}}</li>
 <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcado para una carta")}}</li>
 <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}</li>
</ul>