Lo nuevo en HTML 5

Cuando hablamos de HTML5 realmente nos referimos a un conjunto formado por tres elementos

  • HTML para definir la estructura y contenido de las páginas web
  • CSS para definir cómo mostrar la página y su contenido
  • JavaScript para darle funciones dinámicas e interactividad

Todas estas tecnologías trabajan juntas para presentar una página web en pantalla o para crear una aplicación de escritorio. HTML5 es más que una simple revisión de la versión HTML4.

Se siguen usando las etiquetas para describir los elementos que forman la págína web. Recordemoas que las etiquetas no son más que marcas para describir partes de la página o formatos de texto. Las reconocerás porque aparecen encerradas entre <>, así

<strong>esto es negrita</strong>

Indica que el texto encerrado enre <strong> y </srong> aparece en negrita. Suelen ir por pares: apertura <strong> y cierre </strong> (fíjate en la barra /).

Pues bien: HTML5 incrementa el sentido semántico de sus etiquetas. Es decir, las etiquetas tienen significado en sí mismas para definir la función de elementos de la página web. Por si no queda claro, si queremos indicar que una palabra es el título de la página podemos modificar el tamaño de la letra, su color su grosor mediante estilos:

<div id="titulo" style="font-size: 20px; font-weight:bold">Zona de juegos</div>

Y vale, este titulo aparecerá en negrita y con un tamaño grande. Visualmente se ve que es el título. Pero si ponemos

<h1>Zona de juegos</h1>

Zona de juegos aparacerá en la página destacado, como antes, pero la etiqueta <h1> indicará al explorador, o al robot que analice nuestra página, que esto es un títular importante en la estructura de la página. Esto es lo que significa que la etiqueta (<h1> en este caso) tiene significado semántico propio en cuanto a la estructura de la página. La etiqueta <h1> destaca el texto y además indica la función del texto dentro de la página (es un encabezado en este caso)

HTML es semántico
Una etiqueta con significado semántico indica que al aplicarla a un contenido de la página web, define el papel que tiene ese contenido en la estructura de toda la página.

Para usar HTML5 es muy importante plantear claramente la estructura del documento, como se aseguran los cimientos de un edificio. Esta cimentación no solo permite que las páginas se comporten de manera similar en cualquier entorno de visualización (en cualquier explorador, en el pc de sobremesa, una tablet o un móvil por ejemplo) sino que facilita la tarea a los robots que indexan nuestra web en los buscadores.

Las etiquetas por si solas no proporcionan información sobre como se verá la página web en una pantalla, para esto necesitamos la ayuda de las hojas de estilos CSS (la versión actual es la 3). No basta con conocer las etiquetas y reglas del HTML5, es necesario conocer también como usar las definiciones de estilo que nos permitirán organizar y dar formato al contenido. La actual versión de las hojas de estilos CSS son sumamente potentes y permiten incluso animaciones. Un buen uso de los estilos permiten cambiar todo el aspecto (no solo colores) de un sitio web cambiando solo un archivo, y lo que es más importante: permiten que la página web se muestre adaptada al dispositivo (teléfono, móvil, tablet, sobremesa, televisión, impresión...).

Por último si queremos sacar el máxmo jugo de nuestro trabajo al diseñar páginas web debemos manejar el lenguaje de programación JavaScript. Con su ayuda podemos utilizar las APIS (interfaces de programación) que nos ofrece HTML5. Por ejemplo, si usamos la etiqueta <video> para insertar videos en nuestra página podemos permitir que el usuario pare, proyecte, modifique sonidos, etc. O se pueden manejar datos desde nuestra página. Para esto nos ayudaremos de Javascript. El manejo de estas funciones son para usuarios con buenas competencias en programación..