Semántica HTML 5
SEMÁNTICA
Una de las novedades que hemos mencionado anteriormente son las etiquetas que se han introducido en HTML5. Existen más de 30 nuevas etiquetas semántica que pueden ser utilizadas en nuestras páginas estáticas. Estas nuevas etiquetas se podrían clasificar en dos grupos:
Etiquetas que extienden a las actuales de la página web, como <video>, <audio> o <canvas>, y que además añaden nuevas funcionalidades a los documentos HTML, que podemos controlar desde JavaScript y etiquetas que componen la web semántica, es decir, que no proponen nuevas funcionalidades pero sirven para estructurar sitios web, y añadir un significado concreto, más allá de las etiquetas generales como <div>.
En este capítulo, veremos como transformar nuestra estructura actual de marcado basada en <div>, a una estructura que utiliza las nuevas etiquetas estructurales como
<nav>, <header>, <footer>, <aside>, o <article>.
CABECERA DEL DOCUMENTO
Además de las nuevas etiquetas introducidas por HTML5 (que veremos más adelante), el nuevo estándar propone pequeñas mejoras que podemos aplicar en la definición de nuestros documentos, en concreto en la cabecera de los mismos.
DOCTYPE
El estándar XHTML deriva de XML, por lo que comparte con él muchas de sus normas y sintaxis. Uno de los conceptos fundamentales de XML es la utilización del DTD o Document Type Definition (“Definición del Tipo de Documento”). El estándar XHTML define el DTD que deben seguir las páginas y documentos XHTML. En este documento se definen las plantillas web que se pueden utilizar, los atributos de cada etiqueta y el tipo de valores que puede tener cada atributo.
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Ésta es una de las 15 declaraciones posibles declaradas en los estándares HTML4 y XHTML. En HTML5 se reduce la definición del tipo de documento a una única posibilidad, por lo que no tenemos que preocuparnos de elegir el tipo de documento correcto:
<!DOCTYPE html>
ELEMENTO RAÍZ HTML
En todo documento HTML, su elemento raíz o nodo superior siempre es la etiqueta
<html>. Hasta ahora, este elemento raíz se definía de la siguiente manera:
<html xmlns=http://www.w3.org/1999/xhtml
lang=”en”
xml:lang=”en”>
No hay ningún problema en mantener esta sintaxis. Si se desea, se puede conservar, ya que es válido en HTML5. Sin embargo, algunas de sus partes ya no son necesarias para el diseño de pagina web , por lo que podemos eliminarlas.
El primer elemento del que podemos prescindir es el atributo xmlns. Se trata de una herencia de XHTML 1.0, que dice que los elementos de esta página están en el espacio de nombres XHTML, http://www.w3.org/1999/xhtml. Sin embargo, los elementos de HTML5 están siempre en este espacio de nombres, por lo que ya no es necesario declararlo explícitamente. Eliminar el atributo xmlns nos deja con este elemento de la siguiente manera:
<html lang=”es” xml:lang=”en”>
En este caso ocurre lo mismo con el atributo xml:lang, es una herencia de XHTML que
podemos eliminar, quedando finalmente la etiqueta de la siguiente manera:
<html lang=”en”>