¡Hola! En esta entrega del diccionario HTML de DropCoding, vamos a explorar una de las etiquetas más importantes de este lenguaje: la etiqueta ancla, representada con la letra «a».
Esta etiqueta es uno de los pilares fundamentales de HTML, ya que nos permite navegar por Internet.
No solo veremos qué es esta etiqueta ancla, sino que también aprenderemos cómo se utiliza con un ejemplo práctico este tipo de elementos en HTML.
¿Qué significa la etiqueta A?
La etiqueta o elemento ancla define un hipervínculo, que es un enlace hacia otra página web o hacia un elemento de la propia página web.
Los hipervínculos son una de las funcionalidades más importantes de HTML, ya que permiten la navegación entre páginas web y también permiten acceso a otros recursos, como por ejemplo imágenes, vídeos u otros elementos.
De hecho, sin hipervínculos, sería imposible navegar por Internet.
Aquí te dejo el video donde lo explico:
¿Cómo usar la etiqueta <a> en HTML?
Para crear un hipervínculo, necesitas dos cosas: un ancla y un destino.
El ancla es el elemento desde el que se quiere enlazar, también conocido como la fuente del enlace. El ancla puede ser un texto, una imagen o cualquier otro tipo de elemento en HTML.
Luego, necesitamos un destino. Este es el elemento al que se quiere enlazar, también conocido como destino del enlace o ruta. El destino puede ser una página web, una sección específica o incluso un elemento de la misma página.
La etiqueta se usa en conjunto con el atributo href, que especifica el destino del enlace. Para crear un hipervínculo, abriríamos la etiqueta, pondríamos el href y le indicaríamos la dirección o la ruta del enlace. Luego, crearíamos el texto ancla, que es el texto visible, es decir, donde vamos a hacer clic.
Ejemplo de uso de la etiqueta A (Ancla)
Supongamos que queremos crear un enlace que vaya hacia la página de YouTube. En este caso, el código sería el siguiente:
<a href="https://www.youtube.com">Visita YouTube</a>Aquí, «Visita YouTube» es el texto ancla y «www.youtube.com» es el destino del enlace.
Pero también podemos hacer otro tipo de enlaces, por ejemplo, con rutas relativas.
Aquí tenemos un ejemplo donde le estamos especificando que la ruta del enlace sea una sección de una página web.
En otras palabras, aquí le estamos diciendo que el enlace vaya hacia la sección de «Quiénes somos», pero sin utilizar toda la ruta absoluta:
<a href="#quienes-somos">Quiénes somos</a>Además, podemos personalizar el comportamiento del enlace con varios atributos.
Por ejemplo, si queremos que el enlace se muestre en otra ventana, colocaremos el atributo target con un valor «_blank»:
<a href="https://www.youtube.com" target="_blank">Visita YouTube</a>Existen muchos otros atributos que puedes utilizar para personalizar un enlace en HTML.
Atributos de la etiqueta A (HTML)
Aquí te dejo una tabla que resume los atributos más comunes y útiles que puedes utilizar con la etiqueta <a> de HTML. Tenga en cuenta que algunos de estos atributos son HTML5 específicos y no funcionarán en versiones más antiguas de HTML.
| Atributo | Descripción |
|---|---|
href | Especifica la URL de la página a la que enlaza. |
target | Especifica dónde abrir el documento enlazado. Los valores comunes incluyen _self (abre en la misma ventana/pestaña), _blank (abre en una nueva ventana/pestaña), _parent (abre en el marco padre), _top (abre en el cuerpo completo de la ventana). |
download | Este atributo es nuevo en HTML5. Indica al navegador que descargue la URL en lugar de navegar hacia ella. Puedes especificar un nombre para el archivo descargado proporcionando un valor al atributo, p. ej., <a href="/file.pdf" download="nombrearchivo">. |
rel | Especifica la relación entre el documento actual y el enlace. Los valores comunes incluyen nofollow (indica a los motores de búsqueda que no sigan este enlace), noreferrer (no envía un referente HTTP), noopener (abre un nuevo contexto de navegación), alternate (un enlace a una versión alternativa del documento), entre otros. |
type | Especifica el tipo MIME del recurso enlazado. |
hreflang | Indica el idioma del enlace. |
media | Especifica qué medios/dispositivos se aplica el contenido enlazado. |
ping | Una lista de URLs a las que se notificará si el usuario sigue el hipervínculo. |
referrerpolicy | Indica qué información de referente se debe incluir con las solicitudes. |
Espero que te haya gustado este artículo y recuerda que si tienes cualquier pregunta o cualquier sugerencia, no dudes en dejarla en los comentarios.
¡Nos vemos en la siguiente lección! Adiós.