logoRF_HTML5No podía ser menos, si esta tan orientado a la semántica….¿como ni iba a tener un refuerzo semántico para los enlaces?. Nuestra vieja etiqueta «a» se rejuvenece con gran cantidad de posibilidades semánticas.

Hasta ahora, cuando escribíamos un link, solo estábamos creando un vinculo para que nuestro visitante, pudiera pasar de una pagina a otra, pero….eso se ha acabado. Ahora, ademas de darle esa posibilidad, le estamos indicando como se relaciona la nueva pagina con la actual, que comportamiento esperamos y muchas mas cosas, gracias a los nuevos atributos, y sobre todo, a los nuevos valores de los atributos.

Primero recordemos que disponemos de etiquetas semánticas; que le dan sentido al contenido; entonces, un enlace de publicidad, lo podríamos  escribir así:

html5_enlaces_semanticosSi, es el enlace de siempre, pero…por un lado, lo hemos recubierto de «aside» para que no se confunda con el tema de la web; el texto lo he independizado con un «section» y he utilizado etiquetas de títulos para remarcar lo mas importante.

A continuación, vamos a revisar los atributos que puede llevar la etiqueta «a», y los valores; veréis que aparecen mezcladas cosas que ya conocíamos con otras muy novedosas,…y a mitad de implementación, pero….deberemos irnos preparando.

Una etiqueta «a» crea el enlace en el texto que aparece dentro del contenido de la etiqueta:

HTML5_etiqueta_a

Atributos de la etiqueta <a>

href

Dirección URL a la que dirige el enlace; este atributo es obligatorio, y puede ser indicado en forma absoluta como href=»http://www.recursosformacion.com/inicio/pruebas.html», o relativo a la situación de la pagina que llama, como href=»inicio/pruebas.html»

html5_hrefEn las lineas precedentes:

download

Le indica al navegador que el enlace no es para ser mostrado, si no para descargarlo, y en este atributo, le podemos indicar el nombre del fichero que se sugerirá en la descarga.

html5_downloadAquí vemos como podríamos hacer que un fichero que estuviera en nuestra web, en la carpeta «almacén» y que se llamara «cursoHTML5.pdf«, se descargará sin visualizarse, a un fichero que en el ordenador del usuario seria «RF Curso HTML5.pdf«

title

Este atributo, se puede utilizar en cualquier etiqueta, y suele dar como resultado, el que aparezca un «tool tip» al situar el ratón encima de la caja correspondiente. Los buscadores pueden utilizarlo para obtener informacion acerca del documento destino

hreflang

Informa acerca del idioma de la pagina de destino. En caso que el objeto destino no posea información de idioma, se utilizara el aquí  indicado.

target

Ventana en la que se cargara/abrira la pagina indicada en el enlace; los posibles valores son:

ping

Podemos indicar una lista de las URLs a las que se les intentará comunicar que se ha seleccionado el enlace. Cada URL la podemos ir separando de las demás con un espacio en blanco.

type

En «type» podemos indicar el MIME-type del contenido del objeto destino del link, aunque es un dato meramente informativo, puede ser conveniente utilizarlo cuando estamos enlazando ficheros tipo PDF, ZIP, DOC,…., ya que por defecto, va a asumir que es un tipo «text/html». En esta web, dispones de la lista completa de MIMEs.

media

Es un atributo únicamente informativo que indica el medio para el que fue creado el recurso enlazado; los medios pueden ser:

charset

Atributo que indica la codificación de caracteres de la pagina enlazada. Si el recurso enlazado no declara ninguna codificación de caracteres, se utilizará esta. Teneis una lista de los códigos disponibles aqui

 Con todo eso, un enlace nos podría quedar así:

enlace_html5_completo

Recordad que solo es un ejemplo para que veais el uso de todos los atributos mencionados. En la realidad, teniendo en cuenta las opciones por defecto, y que muchos de ellos, solo son recomendaciones, el enlace queda mucho mas sencillo.

Pero no hemos acabado con las posibilidades, nos queda por revisar un atributo, que, aunque siempre ha estado ahí, no tenia la relevancia que puede tener a partir de ahora; se trata de:

rel

Este atributo, define la relación entre la pagina actual y el recurso enlazado; como es previsible, podemos indicar mas de un valor para este atributo, dejando un espacio en blanco entre cada uno:

2014-08-21_09h47_51

Como hay todavia muchos valores pendientes de aprobar, vamos a ver primero una lista de los aprobados, y despues la lista de los pendientes.

Y ahora revisamos los que todavía están en estudio, pero con muchas probabilidades de ser aceptado, y que ya hay navegadores que los contemplan y los recomiendan

Y hasta aquí ha llegado la ampliación de esta etiqueta, puede que lo consideréis exagerado, pero cuando hablamos de maquinas, todo esto hace que las relaciones sean mas fáciles de interpretar; ahora ya lo sabéis y podéis escoger vuestro nivel de seguimiento

Nosotros, en el próximo articulo, empezaremos con los formularios en HTML5, otra de las grandes mejoras

 

8 comentarios

Deja un comentario