Esta es la segunda clase del Curso Gratuito 5 días de HTML5, impartida por Zuriñe Menendez @zmencay, en la que nos habló de la Web Semántica. Fue una exposición en la que pudimos apreciar la importancia de la Web Semántica y cómo HTML5 ha posibilitado su implantación.

Durante la clase se remarcaron diversos conceptos, comenzando por la propia semántica, y cómo aplicarla en un diseño, desde el punto de vista estético, pero también en términos de código HTML, por medio de la selección correcta de etiquetas según su significado. También repasamos otros asuntos importantes como los microformatos, que nos ayudan a aplicar semántica en piezas concretas de contenido. Vimos al final unos ejemplos en código para poder concretar todo el conocimiento en un documento HTML.

Por qué Web semántica

Semántico se refiere a cargado de significado. La Web semántica hace referencia a aquella que nos consigue comunicar un significado cuando la leemos las personas, pero además también cuando la interpretan las máquinas.

En este primer punto Zuriñe nos indicó los motivos por los que existe la Web semántica y los objetivos que persigue. Entender para qué sirve el sitio, saber cuál es nuestro objetivo, comprender lo que el diseñador desea transmitir y codificar correctamente.

Desde el punto de vista de las personas, cargar de significado a una web comienza por tener un diseño apropiado, aplicando colores, formas y estética que nos ayude a entender para qué están las cosas. Si algo es un enlace no debe verse como un botón. Si hay un disparador de una acción "cancelar" no debe verse igual que uno que sirve para "aceptar".

Pero no solo la web la leen las personas, también hay máquinas que consumen el contenido de las páginas. Por ejemplo, Google o cualquier robot que analice el contenido de la Web. Incluso hay personas que, por problemas de visión, no son capaces de asimilar el contenido de una web de manera visual. Para todos ellos la semántica se tiene que aportar en función a otros elementos y ahí es donde cobra valor cargar de significado al código HTML que escribimos.

Así pues, hay etiquetas en el HTML que aportan un significado a aquello que se está incluyendo en un documento, como HEADER, FOOTER, ARTICLE, etc. Esto es algo que se ha tomado con mucha importancia dentro de HTML5 y de hecho, la mayoría de las nuevas etiquetas disponibles en el lenguaje son etiquetas que aportan un significado a aquello que incluyen en un documento HTML.

Semántica y SEO

SEO significa Search Engine Optimization y son un conjunto de técnicas que sirven para hacer que una página aparezca mejor posicionada en buscadores. Pues bien, según nos explicó Zuriñe, la semántica nos ayuda a realizar un mejor SEO. Para ello tenemos que procurar escribir un código limpio y usar ciertas etiquetas o selectores CSS que nos ayuden a identificar el contenido por su función.

Los buscadores son como usuarios ciegos, porque no saben cómo se ve una web, solo saben leer su código. Existen etiquetas que directamente le hacen entender qué es lo que están incluyendo, como un encabezamiento, un navegador, un contenido accesorio en el lateral, etc. Cualquier ayuda que le ofrezcamos a un buscador para interpretar el contenido de nuestra página y saber qué función tiene cada parte y qué importancia dentro del conjunto del documento, es positiva.

Etiquetas semánticas

Sirven para identificar lo que va asociado a ellas. Es de lo que estamos hablando todo el rato. Son etiquetas como HEADER, SECTION, ARTICLE, FOOTER, NAV, etc. Estas etiquetas sirven para dar entender determinadas cosas.

Hay un montón de etiquetas que han surgido para dar cabida a la web semántica. También nos señalan en la charla las etiquetas para formularios para ayudar a la entrada de datos.

Microformatos

Este es otro de los asuntos que vimos en la clase y nos ayudó a entender cómo se pueden entregar informaciones adicionales a los navegadores, esta vez a través de clases CSS.

Existen microformatos para muchos asuntos interesantes, por ejemplo crear tarjetas de visita en una web. Por medio de una serie de clases CSS (class) podemos indicar qué es cada parte de la tarjeta de visita, como el nombre el email, la dirección web, teléfonos, etc. En la charla lo vimos con un ejemplo.

Ejemplo de página HTML5 semántica

En el último tercio de clase nos dedicamos a analizar un código HTML e identificar las partes semánticas. Veremos por médio de código diversos asuntos clave en esta charla, desde el uso de etiquetas nuevas del HTML5 que aportan un significado hasta el uso de los microformatos.

Además pudimos ver componentes típicos de una página en HTML5, desde el documento básico hasta la inclusión de scripts para compatibilidad.

Vídeo y materiales para descarga

Los materiales usados durante la presentación, diapositivas y el ejemplo se pueden descargar en un archivo comprimido.

Para encontrar todo el contenido de esta clase, lo mejor es que puedas ver el vídeo de la grabación.