W3Docs

Apariencia

Español

Enlaces HTML ​

Los sitios web contienen diferentes tipos de enlaces que te llevan directamente a otras páginas o te permiten navegar a una parte concreta de la página. Los enlaces en HTML se llaman hipervínculos. Se definen usando la etiqueta <a>.

Los hipervínculos se aplican a una frase, una palabra, una imagen o cualquier elemento HTML.

El color predeterminado de los enlaces en HTML es:

  • enlaces no visitados: subrayados y azules
  • enlaces visitados: subrayados y morados
  • enlaces activos: subrayados y rojos

Este es el estilo predeterminado de los enlaces, pero puedes quitar el subrayado o cambiar el color de los enlaces usando estilos CSS.

Sintaxis ​

La etiqueta <a> viene en pares: la apertura <a> indica dónde debe comenzar el enlace y el cierre </a> indica dónde termina el enlace.

Para crear un hipervínculo, debes usar la etiqueta <a> y el atributo href, cuyo valor es la URL o ubicación a la que apunta el enlace.

Enlaces HTML

html
<a href="url">your text</a>.

Ejemplo de la etiqueta HTML <a> con el atributo href: ​

Example of HTML Links|W3Docs.com|W3Docs

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Link example</h2>
    <a href="https://www.w3docs.com/">W3Docs.com</a>
  </body>
</html>
Try it Yourself »

Resultado ​

hyperlink

En el ejemplo anterior, usamos <h2> para definir subtítulos y la etiqueta <a> para crear enlaces. Entre las etiquetas <a> y </a> tenemos W3Docs.com. Haz clic en él y te redirigirá a la página principal de nuestro sitio web.

Atributo target ​

Para abrir un enlace en una nueva página, necesitas añadir target="_blank" a tu código. El atributo target especifica exactamente dónde abrir la página enlazada. Con target="_blank", la página enlazada se abrirá en una nueva ventana o en una nueva pestaña.

Enlaces HTML

html
<a href="https://www.w3docs.com/" target="_blank" rel="noopener noreferrer">W3Docs.com</a>

Atributo id ​

Para navegar a una parte específica de la página, usa el atributo id.

Así es como debes hacerlo:

  1. Usa el atributo id para dar un nombre a la parte de la página a la que se debe redirigir al usuario después de hacer clic en el enlace. El valor del atributo puede ser una palabra o una frase que describa esa parte (si usas una frase, no debe haber espacios; usa guiones bajos en su lugar.)
    Ej. <h2 id="jump">Link example with id attribute</h2>. Usamos el atributo id llamado "jump".

  2. Crea un hipervínculo usando el id del destino del enlace, precedido por una almohadilla (#)
    Ej. <a href="#jump">When you click on this link, you will be redirected to the part of the page with "jump" id</a>.

Ahora veamos cómo se verá esto en código HTML. En el ejemplo siguiente, desplázate hacia abajo hasta el enlace de la parte inferior, haz clic en el enlace y volverás de nuevo al inicio.

Ejemplo de la etiqueta HTML <a> con el atributo id: ​

Example of the link with an id attribute

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2 id="jump">Link example with id attribute</h2>
    <p>
      Here can be any part of the page you want to the user to end up clicking on hyperlink. We use attribute id called “jump”.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum ut ipsum quis elementum. Curabitur a sem a ante pulvinar tincidunt. Nullam posuere arcu in erat laoreet, vitae efficitur ex venenatis. Quisque in fermentum nunc, vel consequat risus. Suspendisse risus purus, semper quis tempus eget, iaculis euismod velit. Quisque mi nunc, cursus et suscipit eget, gravida et nisi. Duis eros massa, eleifend eget tincidunt in, porta sit amet ante. Nunc eu feugiat quam. Morbi vel sapien ac dolor ultricies dapibus quis quis libero. Cras et auctor leo.
    </p>
    <p>
      Donec accumsan sapien vitae diam commodo lobortis. Nam feugiat ullamcorper malesuada. Praesent fermentum nulla quis mauris consequat mollis. In lacus libero, laoreet nec aliquam in, vestibulum quis dui. Donec congue enim et lorem lobortis, ut suscipit augue congue. Integer efficitur ligula nec lectus aliquet, in luctus magna efficitur. Mauris euismod mauris viverra enim tincidunt efficitur. Ut imperdiet quis lorem in tincidunt. Nam magna orci, venenatis et felis rhoncus, semper maximus eros. Proin mauris mauris, sodales quis eleifend vel, convallis in leo. Curabitur vel auctor lacus. Integer vestibulum nisi magna, id malesuada erat consequat quis. Vivamus iaculis aliquam ullamcorper. Aenean faucibus posuere rhoncus. Mauris tincidunt magna velit, sed semper arcu venenatis non. Sed odio risus, luctus eget aliquam vel, elementum id sem.
    </p>
    <p>
      Ut imperdiet pharetra nisl ut mollis. Aenean neque odio, volutpat a imperdiet sit amet, sollicitudin non dolor. Donec velit odio, lacinia sed dui in, dignissim consequat sem. Nullam vel vestibulum mi, ornare lacinia diam. Vivamus sed vestibulum ligula, a tempor magna. Nulla vitae nisi ligula. Vivamus euismod tincidunt justo varius rhoncus. Aliquam vitae enim odio. Nunc pretium, odio in fermentum fringilla, ipsum nulla aliquet magna, ac aliquet dui tellus viverra lacus. In vel feugiat elit. Nulla a pretium nunc, consequat blandit tellus. Proin sit amet molestie eros. Aliquam sit amet quam tincidunt, egestas nunc ut, vehicula tellus. Donec ullamcorper, ipsum cursus rutrum fermentum, ipsum sem semper orci, quis ultrices odio turpis sit amet tortor.
    </p>
    <p>
      Phasellus ultrices at neque sit amet varius. Fusce molestie lacinia lorem, eu interdum urna tempor malesuada. Etiam nec ultricies nisi, ut fringilla nibh. Phasellus arcu metus, ultrices eu ipsum eu, fermentum fermentum tellus. Cras blandit massa turpis, eu condimentum purus suscipit ut. In hac habitasse platea dictumst. Sed nec magna sit amet mi congue aliquam. Integer tempor lobortis eros, ut finibus tortor fringilla id. Mauris mollis sollicitudin justo, et condimentum lacus. Nam tellus velit, efficitur nec efficitur eu, pharetra ac tortor. Mauris vitae sagittis purus.
    </p>
    <p>
      Donec accumsan sapien vitae diam commodo lobortis. Nam feugiat ullamcorper malesuada. Praesent fermentum nulla quis mauris consequat mollis. In lacus libero, laoreet nec aliquam in, vestibulum quis dui. Donec congue enim et lorem lobortis, ut suscipit augue congue. Integer efficitur ligula nec lectus aliquet, in luctus magna efficitur. Mauris euismod mauris viverra enim tincidunt efficitur. Ut imperdiet quis lorem in tincidunt. Nam magna orci, venenatis et felis rhoncus, semper maximus eros. Proin mauris mauris, sodales quis eleifend vel, convallis in leo. Curabitur vel auctor lacus. Integer vestibulum nisi magna, id malesuada erat consequat quis. Vivamus iaculis aliquam ullamcorper. Aenean faucibus posuere rhoncus. Mauris tincidunt magna velit, sed semper arcu venenatis non. Sed odio risus, luctus eget aliquam vel, elementum id sem.
    </p>
    <p>
      Ut imperdiet pharetra nisl ut mollis. Aenean neque odio, volutpat a imperdiet sit amet, sollicitudin non dolor. Donec velit odio, lacinia sed dui in, dignissim consequat sem. Nullam vel vestibulum mi, ornare lacinia diam. Vivamus sed vestibulum ligula, a tempor magna. Nulla vitae nisi ligula. Vivamus euismod tincidunt justo varius rhoncus. Aliquam vitae enim odio. Nunc pretium, odio in fermentum fringilla, ipsum nulla aliquet magna, ac aliquet dui tellus viverra lacus. In vel feugiat elit. Nulla a pretium nunc, consequat blandit tellus. Proin sit amet molestie eros. Aliquam sit amet quam tincidunt, egestas nunc ut, vehicula tellus. Donec ullamcorper, ipsum cursus rutrum fermentum, ipsum sem semper orci, quis ultrices odio turpis sit amet tortor.
    </p>
    <p>
      Fusce ultricies ex eros, et maximus est feugiat vel. Ut non nunc turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi viverra eu dui congue pulvinar. Donec tincidunt, nulla sed sodales iaculis, felis sem dapibus sem, et viverra justo massa sed magna. Vestibulum eleifend ex vitae mattis iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus.
    </p>
    <a href="#jump">When we click on this link, we will be redirected to the part of the page with “jump” id</a>
  </body>
</html>
Try it Yourself »

Cómo aplicar un hipervínculo a una imagen ​

Para aplicar un hipervínculo a una imagen, solo necesitas poner la imagen en la etiqueta <a>. Esto se hace con la etiqueta <img>, que debe tener algunos atributos obligatorios:

  1. src - la fuente de la imagen
  2. alt - texto alternativo para la imagen
  3. width - ancho de la imagen
  4. height - alto de la imagen

Ejemplo de las etiquetas <a> y <img> para aplicar un hipervínculo a una imagen: ​

Hyperlink applied to an image|Example of the HTML Links|W3Docs

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="https://www.w3docs.com/">
    <img src="https://es.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo" />
    </a>
  </body>
</html>
Try it Yourself »

Imágenes HTML se tratarán en profundidad en el próximo capítulo.

Títulos de enlace ​

El atributo title se usa para especificar información adicional sobre un elemento. Esta información a menudo se muestra como texto emergente cuando mueves el mouse sobre el elemento.

Ejemplo de títulos de enlace: ​

Example of link titles

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Link Title Example</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p>The <span class="attribute">title</span>  attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.</p>
    <a href="https://www.w3docs.com/learn-html.html" title="Learn HTML">Learn more about HTML</a>
  </body>
</html>
Try it Yourself »

Rutas externas ​

Puedes referenciar páginas externas con una URL o una ruta que corresponda a la página web actual. El siguiente ejemplo muestra cómo puedes hacerlo:

Ejemplo de la etiqueta HTML <a> para referenciar una página externa con su URL: ​

Example of the HTML <a> tag for referencing an external page with its URL:

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>External paths</h1>
    <div>Example of referencing an external page with its URL</div>
    <p><a href="https://en.wikipedia.org/wiki/HTML">More about HTML</a></p>
  </body>
</html>
Try it Yourself »

Práctica ​

What are the different attributes of the HTML <a> tag according to the article?

¿Te resulta útil?

Vista previa dual-run — compárala con las rutas Symfony en producción.