Hoy comienzo un repaso de las nuevas etiquetas del HTML 5, aunque también hablaré, claro está de las etiquetas que ya existen, y si han cambiado o no con respecto a las versiones anteriores. Y como no me quiero enrollar mucho, porque no es lo que toca, voy a empezar con algunos de estos tags…
doctype
Para empezar cualquier página toca el doctype. La verdad es que históricamente este elemento nunca ha tenido un buen acompañamiento, ya que había que indicarle algunos parámetros y versiones que normalmente nunca se ajustaban a la realidad. Ahora, con el HTML 5 esto queda reducido a una única opción muy simple:
<!DOCTYPE HTML>
Y ya está… no hay que indicar si es HTML 4, XHTML, si es estricto, ni versión ni nada de nada… simple. Este elemento no hay que cerrarlo ni nada, simplemente será la primera línea de cada una de nuestras páginas.
html
El siguiente elemento que hay que revisar es el html. Este es el elemento que ha de mantener toda la página, y que tendrá dentro el resto de elementos.
<html> [...] </html>
Entre los parámetros que puede incorporar están los atributos globales y el manifest. Este atributo es el que se utiliza para el sistema de caché propio del navegador (lo que era el Google Gears en su día y por lo que se están empezando a dejar de usar y a aplicar la caché propia del HTML 5). Pero el tema de cachear contenidos ya lo trataré más adelante.
head
El siguiente elemento es el del head. Este es el elemento que contiene meta-información de la página y es el primer elemento que debemos encontrar en la página. Permite tener los atributos globales, aunque la verdad es que no recomiendo ponerle ninguno.
<head> [...] </head>
Aunque en teoría no tiene porqué tener elementos dentro obligatoriamente, sí que es muy recomendable que siempre incluya el elemento title.
title
Para mi uno de los elementos más importante de cada una de las páginas de un sitio es el elemento title. Por un lado porque es un elemento único, es decir, sólo puede haber uno por página, y también, de cara a SEO, es muy importante que esté bien construido.
Este elemento sólo puede incorporar texto (es decir, no puede tener código HTML ni nada parecido). También se ve afectado por cualquiera de los elementos globales.
<title>Aquí va el título de la página</title>
base
Uno de los elementos que siempre me ha intrigado es precisamente el base. Mucha utilidad no acabo de verle, aunque si está y se ha mantenido por tantos años es por algo. En SEO siempre digo que es mejor que todos los enlaces de un sitio sean completos, pero en caso de que sean relativos, es bueno indicarles que sean relativos en base a algo. Y esa base es este elemento, la dirección a partir de la que se han de calcular el resto de enlaces relativos de la página.
<base href="http://www.example.com/news/index.html">
Al igual que el title, sólo puede haber uno por página, y también acepta los atributos globales además de dos más, que son el href y el target.
El parámetro href ha de incluir la dirección URL desde la que se han de tomar en consideración los enlaces relativos de la página. El target, sí, es lo que pensáis… es lo que permite que cualquier enlace de la página se abra de distintas formas: _blank (ventana nueva), _self (ella misma), _parent o _top. En el caso de estos dos últimos, hoy en día ya no tiene muchos entido usarse ya que los «frames» y similares no se usan. El «self» tampoco debería de usarse ya que si no pones nada ya es la misma ventana. Personalmente el «blank» tampoco lo usaría, sobretodo teniendo en cuenta que hay muchos dispositivos móviles que ya no tienen ventanas nuevas…
link
Uno de los elementos que puede dar mucho juego es el link, básicamente porque nos puede ofrecer elementos alternativos u otros recursos relacionados con esa misma página. El ejemplo más habitual es el autodiscover de los feeds o los ficheros CSS externos.
<link rel="alternate" href="/fr/html" hreflang="fr" type="text/html" title="French HTML">
Entre los elementos que puede incorporar está el href (que hace referencia a la dirección URL del otro elemento), el rel (que indica el tipo de relación –hay un montón de posibilidades-), el media (que indica el soporte donde se ha de mostrar esta dirección –hay varios soportes-), hreflang (que es el idioma de destino de la dirección alternativa), el type (que indica me MIME-type de la dirección final) y el sizes (que sólo se usa en caso de que la dirección sea un icono).
Otro elemento que se puede poner, en el caso de que sea un «stylesheet» (hoja de estilo) es disabled, que impediría acceder a través de sistemas externos (tipo JavaScript) a hacer cualquier cambio en los elementos de ese CSS. El title suele ser simplemente informativo, excepto en el caso de los CSS, donde el título define los distintos CSS alternativos.
meta
Quizá los meta necesiten un capítulo entero. Y es que históricamente la gente decide poner todos los que se encuentra en cualquier sitio web, aunque no son siempre válidos. Esta etiqueta ofrece información de elementos que puede leer la máquina y que no tiene porqué ser interesante para el usuario en sí mismo. Son meta-información que no encontramos en el resto de elementos del head.
Como en el resto de ocasiones, tienen los atributos globales y unos más que son: name (es el nombre del concepto a tratar), content (es el contenido que le damos a ese valor). También tenemos el http-equiv (que hace referencia a cabeceras HTTP) y el charset (que indica la codificación de caracteres del elemento).
Los valores habituales que puede tener un meta son:
- application-name: se usa en el caso de que el contenido no sea una página web, por lo que, en general, no se usará.
- author: es el nombre de la persona o empresa creadora del contenido.
- description: sólo ha de haber uno por página y es una breve descripción de lo que encontraremos en ella; recomiendo que tenga entre 125 y 175 caracteres, que es lo que aparecerá en los resultados de los buscadores.
- generator: es el programa que ha creado la página y que, personalmente, recomiendo no incluir.
- keywords: una serie de conceptos separados por comas que indican qué tendría que encontrar un usuario en la página; personalmente recomiendo entre 4 y 6 conceptos.
A parte de estos, que son los que están definidos en el estándar, podríamos incluir meta-extensiones si encontramos alguna específica que cuadre con nuestro sitio. Algunos ejemplos pueden ser:
- robots: es el que se utiliza para bloquear a los robots de búsqueda.
- audience: una lista de palabras que definirían el tipo de personas que sí o no pueden ver los contenidos.
Como antes comentaba, está el http-equiv que hace referencia a algunas cabeceras…
- content-language: define el idioma que tendrá la página en general.
- content-type: es el tipo de contenido MIME que tendrá la página; habitualmente text/html.
- default-style: establece cuál es la hoja de estilos CSS por defecto.
- refresh: indica que esa página ha de refrescarse cada N segundos. Si se le indica después una URL se actualizará hacia esa dirección.
<meta http-equiv="refresh" content="20; URL=page4.html">
Además de estos, también se propone el PICS-Label que daría información para la protección de menores.
Para acabar, existe un meta especial (que antes se indicaba de una forma distinta y más compleja) que es la de la codificación de la página. Ahora existe el charset directamente que quedaría algo como:
<meta charset="utf-8">
style
Sin duda hoy en día es inconcebible el HTML sin los CSS u hojas de estilo. Y como tal es así, los CSS tienen su propio sistema de incorporarse al código HTML. He de reconocer que no recomiendo el uso del elemento style, ya que lo mejor es incluirlo de forma externa con un link y que de esa forma quede cacheado… pero es decisión de cada uno.
Este elemento tiene varias opciones a parte de las globales, que son type (habitualmente será «text/css»), media (como ya he comentado en el punto anterior) y scoped que es booleano y que si no se indica los estilos son para todo el documento, y si se indica sólo es aplicable al subárbol donde se encuentra. También se puede usar el disabled al igual que ya he explicado anteriormente, bloquea el acceso externo. Por defecto no hace falta poner el type ya que se da por hecho.
<style>
body { color: black; background: white; }
em { font-style: normal; color: red; }
</style>
No voy a entrar en lo que al CSS se refiere, ya que eso es otro mundo casi interminable…
script
Este es otro de los elementos que me ha sorprendido encontrar «incrustado» en el HTML 5. La verdad es que los script, y sobre todo el JavaScript siempre se había tratado como algo externo al HTML, pero en esta versión se podría decir que es básico que el JavaScript funcione como el CSS de una forma casi imprescindible.
Los script, al igual que los CSS, pueden encontrarse en el propio código o externo. Lo ideal es que la mayor parte de funciones se encuentren externalizadas, y que sólo el código que vaya cambiando se encuentre en el propio sitio.
De esta forma encontraremos la opción de cargar contenido externo simplemente indicando la dirección correspondiente mediante el atributo src (que indica una dirección URL):
<script src="game-engine.js"></script>
Además de este parámetro podemos encontrar unos cuantos más como el type que, si no se indica es el MIME-type «text/javascript». De la misma forma que en otros elementos encontramos el charset que si no se indica es el general de la página.
A parte de estos, tenemos 2 atributos booleanos que son async y defer. Estos elementos sólo pueden aparecer siempre y cuando el src está presente. El elemento async indica que este proceso ha de ejecutarse de forma asíncrona, por lo que se cargará tan pronto como pueda, pero «sin prisas»… en el caso en el que se ponga este elemento, también ha de aparecer obligatoriamente el defer. En este caso, si sólo aparece el defer, el script se ejecutará una vez se haya parseado el resto de la página. En definitiva: si se pone defer, el script se ejecutará una vez se acabe de cargar la página, pero en serie, uno tras otro. En caso de estar el async, permitirá ejecutarlos en paralelo, varios a a la vez.
Como detalle a tener en cuenta, es que el language ya ha quedado en desuso, ya que el type marca el lenguaje de programación utilizado.
Y, además del script, tenemos el noscript. Este elemento tiene dos opciones, aunque se resumen en una: si el script anterior no se puede ejecutar, se ejecutará lo que se incluya en este bloque. Y es que los usuarios habitualmente tienen la posibilidad de desactivar lenguajes como JavaScript en su navegador por seguridad.
Y hasta aquí lo que corresponde a la cabecera de una página. Los cambios son bastante mínimos con respecto a las versiones anteriores, y hay que reconocer que el hecho de que en muchos casos se tome por defecto muchos de los parámetros hacen que se facilite mayoritariamente el uso.
Deja una respuesta