Una de las etiquetas más importantes de HTML (sino la que más) es la etiqueta <a>
. Esta etiqueta se utiliza para crear los llamados enlaces, vínculos o hipervínculos. La idea es establecer una referencia a una dirección o URL donde está alojado ese otro documento de destino, que puede ser una página web, un archivo PDF, una imagen o cualquier otro tipo de documento.
Etiqueta | Descripción |
---|---|
<a> |
Etiqueta para hacer referencia a otras páginas web o recursos como documentos o archivos. |
Esta etiqueta debe tener, como mínimo, el atributo href, ya que es el atributo con el que se especifica la dirección URL al documento que se quiere enlazar. Aún así, la etiqueta <a>
también tiene varios atributos opcionales, veamos un resumen de todos ellos:
Atributo | Valor | Descripción |
---|---|---|
href |
URL | Enlace al documento que se quiere cargar. Atributo obligatorio. |
download |
nombre.ext | Descarga el enlace (href) en lugar de abrirlo. Si se indica valor, se renombra. |
target |
_blank |
Abre el enlace en una nueva pestaña. |
_self |
Abre el enlace en la pestaña o <iframe> actual. |
|
_parent |
Abre el enlace en el documento padre. | |
_top |
Abre el enlace en el documento raíz (padre global). | |
nombre | Abre el enlace en el <iframe> con el nombre especificado. |
|
rel |
alternate |
Indica que el enlace es una versión alternativa (idioma o formato diferente). |
author |
Indica que el enlace es la web del autor de la página actual. | |
bookmark |
El enlace es un permalink a la sección de la página actual. | |
help |
Indica que el enlace ofrece ayuda para la página actual. | |
license |
Indica que la página actual está cubierta por la licencia referenciada. | |
prev |
Indica que el enlace es la parte previa del documento actual. | |
next |
Indica que el enlace es la parte siguiente del documento actual. | |
nofollow |
Indica que el enlace no está supervisado por el autor del sitio web. | |
noreferrer |
El navegador no envía la página de procedencia al visitar el enlace. | |
prefetch |
El navegador precarga el enlace (es probable que se haga clic) | |
search |
Indica que el enlace es una página para realizar búsquedas. | |
tag |
Asocia una etiqueta al enlace especificado, en relación al documento actual. | |
hreflang |
Idioma | Código ISO 639-1 del idioma del documento. |
type |
Tipo | Tipo de contenido MIME al que se enlaza. Atributo no obligatorio. |
El soporte del atributo download podría no funcionar en navegadores no actuales, como versiones antiguas de Chrome o Firefox, o desde Internet Explorer:
Veamos a continuación algunos ejemplos de enlaces utilizando algunos atributos indicados en la tabla superior para comprender así su funcionamiento:
<ul>
<li><a rel="author" href="http://www.emezeta.com/">Emezeta</a></li>
<li><a href="http://lenguajecss.com/" target="_blank">LenguajeCSS</a></li>
<li><a href="http://pagina.com/documento.pdf" download="A-38.pdf">PDF</a></li>
<li><a href="http://pagina.com/documento-en.pdf" hreflang="en">PDF</a></li>
</ul>
Al indicarse una URL, tenemos varias formas de escribirla. Conviene conocer bien la estructura de una URL, para diferenciar cada una de sus partes. Este sería el esquema completo de un enlace completo:
Existen varios protocolos diferentes y es la parte inicial de la URL. Probablemente, el más utilizado sea http://
, aunque https://
también es frecuentemente muy utilizado, ya que se utiliza para cifrar información y que la transmisión sea más segura. Al escribir una URL nunca debemos olvidarnos del protocolo y escribir sólamente la dirección, ya que el vínculo podría no funcionar correctamente. Algunos protocolos de ejemplo:
Protocolo | Descripción |
---|---|
http:// |
Protocolo de transferencia de hipertexto. Es el que se usa habitualmente para páginas webs. |
https:// |
Protocolo seguro de transferencia de hipertexto. Usado para cifrar información sensible. |
ftp:// |
Protocolo de transferencia de ficheros. Similar a HTTP, pero orientado a enviar ficheros. |
whatsapp:// |
Protocolo de WhatsApp. Se puede interactuar con WhatsApp si el usuario lo tiene instalado. |
// |
Protocolo utilizado en la URL actual. Utiliza http o https según la página original. |
Un detalle importante sobre la última opción de la tabla anterior. Al indicar
//
al inicio de un enlace, le decimos al navegador que establezcahttp://
ohttps://
dependiendo de como se cargara el documento actual. Si el documento actual se cargó comohttp://
reemplazará//
porhttp://
, pero si el documento actual se cargó comohttps://
reemplazará//
porhttps://
. Esto nos permite más flexibilidad a la hora de cargar documentos o recursos.
La siguiente parte de la URL es el dominio del sitio web que queremos enlazar. El dominio generalmente se compone de un subdominio (opcional), el nombre de dominio y el dominio de nivel superior o TLD. Por ejemplo, las famosas www no son más que un subdominio utilizado tradicionalmente para páginas webs. Por otra parte, hay muchísimos TLD para sitios web:
Dominio | Descripción |
---|---|
.com | Originalmente para sitios comerciales, actualmente el más utilizado. Difícil conseguir dominio libre. |
.net | Quizás, la segunda opción por excelencia. Su nombre proviene de la palabra Internet. |
.org | Originalmente para organizaciones, actualmente es la tercera opción más utilizada. |
.es | Sitios webs orientados a España. |
.com.es | Dominio de segundo nivel orientado a España. |
.cat | Sitios webs orientados a Cataluña. Muy usado para sitios webs de gatos. |
.la | Sitios webs orientados a Laos. Muy usado para domain-hacks. |
.me | Sitios webs orietnados a Montenegro. Muy usado para domain-hacks. |
.io | Sitios webs orientados al Territorio Británico de Océano Índico. Muy usado como Input/Output. |
.dev | Sitios webs orientados al mundo del desarrollo o programación (developers). |
.blog | Nuevos gTLD (dominios genéricos) orientados a categorías. En este caso, a blogs. |
.viajes | Nuevos gTLD (dominios genéricos) orientados a categorías. En este caso, a webs sobre viajes. |
Rutas: La parte de la ruta de una página web es equivalente a las carpetas o directorios donde almacenamos nuestros archivos. En el caso que una dirección termine en esta parte y no indique nada más, generalmente, el servidor que aloja la página web dirige al usuario a una página llamada index.html
o index.htm
por defecto. Esto es configurable en la parte del servidor, y depende de totalmente de la configuración del servidor web utilizado.
Página o documento: La última parte de la URL suele ser un documento HTML como el del ejemplo: pagina.html
. En algunos casos, la extensión .html
es abreviada como .htm
. Dependiendo del servidor web y los componentes instalados, es posible que se utilicen otro tipo de documentos con lenguajes de programación del lado del servidor, como podría ser por ejemplo pagina.php
. Si se trata de otro documento, como un archivo PDF o un video, el navegador intentará abrirlo directamente, y si no puede, lo descargará para que el usuario lo abra con alguna aplicación de su sistema.
Query strings: Una parte no mencionada en el esquema anterior son las cadenas de consulta del usuario, más frecuentemente utilizadas en lenguajes como Javascript o lenguajes del servidor. Básicamente, son variables que contienen información y se envían en la URL, como por ejemplo, en la búsqueda de Google:
URL | Variable | Contenido | Significado |
---|---|---|---|
https://www.google.com/search?q=gato |
q | gato | Busca "gato" |
https://www.google.es/search?q=gato&tbm=isch |
q | gato | Busca "gato" |
tbm | isch | En Google Imágenes |
#
. Al encontrarse con esto, el navegador busca una etiqueta HTML que tenga un atributo id con ese texto, y posiciona al usuario en esa parte de la página. Se utiliza para acceder directamente a permalinks o secciones concretas de una página. Obviamente, esta parte es opcional.Recientemente también ha parecido una nueva característica llamada scroll to text fragments. Se basa en escribir el texto
#:~:text=<palabrainicial>,<palabrafinal>
a continuación de la URL. Con esto, el navegador hace scroll a la parte de la página donde se encuentra el fragmento de texto que comienza por la palabra inicial y termina por la palabra final. También se pueden indicar frases en lugar de palabras.
Por defecto, los enlaces tienen 3 estados diferentes:
Enlaces sin visitas: Un enlace que no ha sido visitado aún (pseudoclase :link en CSS) es representado por los navegadores como un enlace de color azul y subrayado. Se suele aconsejar no realizas cambios bruscos en los estilos de los enlaces, ya que los usuarios que no estén acostumbrados al sitio web no reconocerán instantáneamente un enlace si no es de color azul y/o está subrayado.
Enlaces visitados: Un enlace que ha sido visitado previamente (pseudoclase :visited en CSS) es representado por los navegadores como un enlace de color lila y subrayado.
Enlaces activos: Un enlace está en estado activo (pseudoclase :active en CSS) cuando el usuario está pulsando sobre el enlace con el ratón y a la misma vez no ha dejado de pulsar en él. Se suele utilizar para destacar el clic visualmente.
A la hora de indicar una URL, generalmente se puede hacer de varias formas:
Tipo de ruta | Ejemplo | ¿Dónde busca el archivo? |
---|---|---|
Sin ruta | imagen.jpg | En la misma carpeta del .html actual. |
Relativa ascendente | img/imagen.jpg | En la carpeta img de la carpeta actual. |
Relativa descendente | ../imagen.jpg | En la carpeta anterior a la actual. Evitar. |
Relativa global | /img/imagen.jpg | El primer / simboliza el principio de la URL. |
Absoluta | https://pagina.com/img/imagen.jpg | Exactamente en la URL indicada. |
El usuario puede utilizar la forma de indicar la ruta que prefiera, eso sí, se aconseja ser coherente y utilizar siempre que se pueda un mismo formato de ruta. Particularmente, tiendo a evitar el tipo de ruta relativa descendente, ya que podría generar un código feo y ofuscado.