Logo de islavisual
Isotipo de islavisual IslaVisual
imagen de sección

Ultima revisión 24/08/2012

HTML 5: Semántica y estructura en las páginas web

Desde el punto de vista tecnológico de las páginas web estamos viviendo tiempos de gran interés, con múltiples cambios, nuevas necesidades y nuevas tendencias sobre su uso.

Si observamos las páginas desde la perspectiva de cómo se crean y cómo se definen “por dentro” también hay novedades importantes en el plano más fundamental: el del HTML.

¿ HTML ?

El HTML es el lenguaje que utilizamos para la creación de las páginas web. Este lenguaje de marcado define lo que se muestra en la pantalla de nuestros navegadores a partir de ciertas etiquetas, indicando si se ha de mostrar una imagen, un párrafo, un enlace, un formulario, una tabla de datos, etc. Este HTML, como lenguaje, no se entiende como algo cerrado sino como algo que evoluciona a medida que la red lo hace, lo que nos lleva a las novedades que vienen con la existencia del llamado HTML 5.

HTML 5 es la quinta revisión principal del lenguaje básico de la WWW, y establece una serie de nuevos elementos y opciones que reflejan el uso común de las webs actuales. A grandes rasgos, HTML 5 incorpora nuevas etiquetas que agregan significado y contexto semántico al lenguaje.

¿ Qué implica el HTML 5 para las empresas ?

Los cambios que vienen con el HTML 5 son una noticia de gran impacto en tecnologías de la WWW. Los distintos elementos, y el enfoque de carácter semántico y de organización de la información, marcarán un punto muy importante en la forma en que los programas, las aplicaciones web, los buscadores de Internet, y los mismos usuarios, trabajarán con la información de una página en el futuro cercano.

Este nuevo enfoque semántico (es decir, orientado a la descripción del significado y las relaciones y contenidos de una página) ofrecerá mejoras directas y aumentará enormemente el potencial técnico de las páginas mientras que, al mismo tiempo, y de cara a quien las visita o las usa, las páginas seguirán siendo las mismas, cambiando gráficamente y evolucionando como desde siempre han venido haciéndolo.

Y es que es “por dentro” donde las páginas ofrecerán y contarán con información útil en muchos sentidos y niveles, lo que permitirá que los buscadores, las aplicaciones web que desarrollemos, los programas de escritorio o incluso otras páginas de internet, puedan acceder de un modo más simple y más directo a la información que tenemos, haciendo que las comunicaciones entre entornos, y entre aplicaciones, sea mucho más simple y más orientado a lo que se desea encontrar.

La tendencia general es evidente: mejorar las estructuras de la información en las páginas, y con ello facilitar la forma en que se pueden construir (y leer) los distintos elementos que conforman un sitio o una página web.

Como muestra un botón: Si observamos el HTML de una página actual no siempre resulta fácil encontrar dónde está y qué limita el contenido que representa el menú de navegación. Tampoco es siempre sencillo diferenciar este menú de otros listados con, por ejemplo, artículos relacionados y, en la práctica, bloques tan aparentemente simples como el pie de página o la cabecera de un sitio web no son siempre fáciles de encontrar en el marcado HTML con las etiquetas actuales. Esto va a cambiar, definitivamente, y será simple e inmediato encontrar los bloques que se usan para la navegación, los que se usan para los contenidos de las páginas, los bloques de contenido multimedia, etc.

El que con HTML 5 sepamos directamente qué enlaces pertenecen a la navegación, y cuáles son parte del contenido permitirá, por ejemplo, que los buscadores de Internet mejoren el análisis de los enlaces (algo relevante en términos de SEO), que los desarrolladores tengan acceso directo a bloques funcionales claros y evidentes, que el diseño de las páginas adquiera un carácter semántico obligado y constante en los estilos usados al diseñar, etc.

Para todos los que vivimos en el mundo del desarrollo en Internet, HTML5 traerá un aprendizaje obligado pero, al mismo tiempo, se trata de un suceso esperado con ansias: algunos navegadores actuales ya permiten mostrar contenidos escritos en HTML5, y las siguientes versiones de todos los navegadores lo harán también, lo que significa que conocer –y aplicar- HTML 5 es ya un aspecto obligatorio para todas las empresas que se relacionan con Internet, teniendo presente que en el futuro cercano los proveedores de desarrollo y nuestros Departamentos Técnicos estarán obligados a desarrollar y utilizar el HTML en su versión más actual.

Es un hecho: Se acercan tiempos cada vez más interesantes en el mundo web, y las empresas tienen que estar al día sobre estos temas.

¿ Cómo se escribe una página con HTML 5 ?

Estos son unos breves ejemplos de lo que incorpora el HTML 5.

Si hablamos de los bloques que estructuran la información dentro de la página como tal, podemos ver las mejoras directamente: lo que antes se definía como un bloque de enlaces que se mostraba como una barra de navegación,  en HTML 5 usará una etiqueta específica <nav> que indicará de forma clara, dentro del marcado, la región específica que se encarga de la navegación por el sitio web. De igual modo, una nueva etiqueta de <footer> permitirá definir los bloques usuales de pie de página, mientras que  <header> permitirá definir las cabeceras de nuestras páginas.

En cuanto a la estructura de los contenidos de la página, se cuenta ahora con etiquetas como <article> o <section>, que permiten una mejor separación de los bloques con los contenidos, y también hay etiquetas nuevas relacionadas con una mejor organización de la información, como <time>, para fechas e información relacionada con tiempos, o como <dialog>, donde se definen conversaciones y diálogos entre personas.

Otros nuevos elementos como <audio> o <video> ofrecen funcionalidades a través de una pauta estandarizada en el marcado, delimitando de una forma más simple dónde se cuenta con contenidos multimedia en una página web.

Para saber más, y ver la especificación completa, el borrador actual de trabajo de HTML 5 puede verse en el sitio oficial de la W3C, el Consorcio que lleva los temas de desarrollo de los lenguajes de Internet.

Fuente http://blog.ulisesinteractive.com

Sobre el autor

Imagen de Pablo Enrique Fernández Casado
Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.