HTML5, primeros pasos – semántica

Comenzar un proyecto en HTML5 es muy sencillo, únicamente tenemos que añadir el siguiente doctype como primera línea de nuestro código. El doctype nos sirve para indicar el tipo de documento:

Aquí empezamos a ver una de las características principales de HTML5, la sencillez. En versiones anteriores de HTML se definían varios tipos de etiquetas doctype, ahora sólo existe una etiqueta y como podéis comprobar mucho más sencilla. Si lo que deseamos es actualizar nuestra página en HTML4 lo único que debemos realizar es el cambio del doctype y ya tendremos nuestra página en HTML5.

En HMTL5 algunos elementos no tienen una representación especial en pantalla, sino que se comportan como un div o un p. Pero cada una tiene un significado semántico. Este significado permite a los navegadores y los buscadores presentar y usar los documentos o aplicaciones en una gran variedad de contextos. Esto promueve modificaciones importantes en la maquetación y desarrollo de los sitios Web, introduciendo importantes cambios en lo que conocíamos hasta ahora.

En las aplicaciones desarrolladas con HTML4 se solía estructurar los documentos con etiquetas div y para distinguir el contenido de cada uno de ellos se le asignaba un atributo id con valores como header,nav, footer, etc, de esta manera podíamos hacernos una idea de los datos contenidos dentro del div.

Con HTML5 esto cambia drasticamente. Ahora se definen las etiquetas de manera que éstas tenga un valor semántico. Algunas etiquetas son:

  • header: se utiliza para definir elementos de introducción o cabeceras de una pagina o de una sección.
  • hgroup: sirve para agrupar títulos con subtitulo. Por ejemplo, poner un titulo con h1 seguido de un subtitulo con h2.
  • nav: se utiliza para definir una barra de navegación, con enlaces internos o externos.
  • article: define una sección del contenido de la pagina. Una sección, en este contexto, es un grupo temático del contenido, normalmente con una cabecera. Un ejemplo de sección podría ser el capitulo de un libro.
  • section: define artículos o contenido individual, como puede ser una pagina del capitulo de un libro, un documento, un articulo periodístico, etc.
  • aside: define una parte de la pagina que representa contenido no relacionado con el resto de la pagina. Se puede utilizar como barra lateral, elementos publicitarios, etc.
  • footer: es el pie de la pagina o de una sección. Normalmente contiene datos sobre quien ha escrito la sección o la pagina, datos del copyright, etc.
  • time: representa una hora o una fecha del calendario Gregoriano.
  • address: representa la información de contacto del autor de una página, articulo o cualquier elemento de una web.
  • Otras etiquetas con contenido semántico son: figure, details, sumary, mark.

Estas nuevas etiquetas no significan que ya no se use div, siempre debe usarse cuando necesites una caja con objetivos de diseño gráfico o cualquier cosa que no tenga significado semántico. Sólo usa las etiquetas semánticas de HTML5 donde sean necesarias.