Incluir enlaces básicos mediante la etiqueta <a> es muy sencillo. Sin embargo, como ya viene siendo costumbre, vamos a subir el nivel de dificultad tanto en los conceptos, como en los ejercicios. Entonces, para empezar, debemos volver a la definición completa de lo que significa un tag <a>.
Las funciones del tag <a> puede ser simple, aunque, dependiendo de la cantidad de atributos que utilicemos, esta puede volverse, es muy compleja. Pues, dispone de varios atributos que pueden ser incorporados no excluyentemente a nuestros enlaces.
A continuación veremos una lista completa con la definición de los propios atributos de <a>:
| Etiqueta | <a> |
|---|---|
| Atributos comunes | básicos, internacionalización, eventos y foco |
| Atributos propios | name = "texto" – Permite nombrar al enlace para que se pueda acceder desde otros enlaceshref = "url" – Indica la URL del recurso que se quiere enlazarhreflang = "codigo_idioma" – Idioma del recurso enlazadotype = "tipo_de_contenido" – Permite “avisar” al navegador sobre el tipo de contenido que se enlaza (imágenes, archivos, etc.) para que pueda preparase en caso de que no entienda ese contenidorel = "tipo_de_relacion" – Describe la relación del documento actual con el recurso enlazadorev = "tipo_de_relacion" – Describe la relación del recurso enlazado con el documento actualcharset = "tipo_de_charset" – Describe la codificación del recurso enlazado |
| Tipo de elemento | En línea |
| Descripción | Se emplea para enlazar todo tipo de recursos |
De los elementos listados, ya vimos name y href, así que continuaremos la lista en donde la dejamos.
1. ¿Qué es hreflang o idioma del enlace?
Hreflang (hypertext reference language) o idioma del enlace, hace referencia, justamente, al propio idioma del documento HTML. Sin embargo, no es exclusivo del tag HTML, pues, el propio enlace también puede especificar el idioma del documento al que se accederá luego de hacer clic.
Entonces, gracias a especificarlo, el propio navegador identifica de antemano el idioma del recurso que enlazado. Para lograr establecer el idioma, se utiliza un código estandarizado de dos letras para el idioma; pero, además del idioma genérico, también se puede indicar una variación idiomática.
Veamos algunos ejemplos de ésto:
| Código | Idioma | Variación idiomática |
|---|---|---|
en | Inglés | – |
en-AU | Inglés | Australia |
en-US | Inglés | Estados Unidos |
es | Español | – |
es-AR | Español | Argentina |
es-ES | Español | España |
es-MX | Español | México |
Otros códigos utilizados son: fr (francés), de (alemán), it (italiano), nl (holandés), el (griego), pt (portugués), ar (árabe), he (hebreo), ru (ruso), zh (chino), ja (japonés).
2. ¿Qué es el type o tipo de contenido en un enlace HTML?
El atributo type se utiliza para notificar al navegador sobre el tipo de contenido que se enlaza. Se indica mediante una cadena de texto cuyos posibles valores también están estandarizados.
Los valores de los contenidos más utilizados son los siguientes:
"text/html": Se utiliza para indicar y especificar que se trata de páginas HTML;"image/png": Indica que son imágenes con formato PNG;"image/gif": Mismo caso que el anterior, pero en ahora, hablamos de imágenes en formato GIF;"text/css": Se utiliza para archivos CSS u hojas de estilo CSS;"application/rss+xml": Se especifica cuando se trata de un archivo RSS.
3. ¿Qué es el tipo de relación (rel y rev) en un enlace HTML?
Los enlaces pueden proporcionar información adicional muy útil para los navegadores y para los motores de búsqueda como Google. Los atributos rel y rev permiten indicar la relación que la página actual tiene con la página a la que se enlaza (atributo rel) y la relación que tiene la página enlazada con la página actual (atributo rev). Es decir:
- Atributo
rel: Relación de la página actual con la saliente. - Atributo
rev: Relación de la página saliente con la actual.
Entonces, ahora solo resta indicar el tipo de relación, y para ello debemos recurrir a los siguientes parámetros definidos:
alternate: Indica que el documento (entrante o saliente) es una versión alternativa al documento actual. Esto puede ocurrir cuando se trata de una versión en otro idioma o una versión preparada para otro medio.stylesheet: Indica que se ha enlazado una hoja de estilos CSS.start: Este atributo sirve para indicar que se trata del primer documento de una serie de documentos. Un uso práctico puede ser, por ejemplo, cuando tenemos el primer capítulo de un libro o un Hub de Contenidos.next: Este parámetro sirve para indicar que el siguiente documento es continuación del actual. Esto es funcional a los documentos web que se encuentran divididos en capítulos.prev: Al igual que en el caso anterior, aunque a la inversa, este parámetro indica la relación con el documento; pero, en este caso, se trata del documento previo.contents: En este caso, se indica que el recurso enlazado es el documento que contiene la tabla de contenidos de la colección de documentos; cómo podría ocurrir, por ejemplo, en el índice de un blog post.bookmark: Por último, tenemos este marcador que sirve para establecer cómo favorito al enlace actual. Este es un marcador de enlace que constituye un punto de entrada muy importante dentro del documento.
4. ¿Qué significa charset o codificación de caracteres en un atributo HTML?
Bueno, queda el último de los atributos que podemos agregar a los enlaces. Entonces, cómo ya vimos, además de idioma, tipo de contenido y relación del recurso que se enlaza, los enlaces también pueden indicar la codificación de caracteres que utiliza la página web enlazada.
Los valores que se pueden utilizar también están estandarizados y las codificaciones más usadas son UTF-8 y ISO-8859-1, aunque existen decenas de códigos definidos (ISO-10646-UCS-2, IBM852, Big5-HKSCS, windows-1252, HZ-GB-2312).
Ahora veremos unos ejemplos, donde combinaremos los parámetros antes vistos dentro de la etiqueta <a>:
<a href="http://www.google.com" hreflang="en" type="text/html" charset="UTF-8">Página principal de Google</a>
<a href="http://www.ejemplo.com/fondo_escritorio.jpg" type="image/jpg">Imagen interesante para un fondo de escritorio</a>
