Código - 08.05.2017

HTML5: Guía Rápida

Conocimientos esenciales en HTML para aquellos que se incursionan en el desarrollo web.

Una de las ventajas que ha traído HTML5 al campo del diseño web, es una estructura de las etiquetas HTML mucho más semánticas, es decir, un marcado con un significado para lo que realmente va a servir dicho identificador. En otras palabras, HTML5 ha hecho el trabajo al diseñador web mucho más sencillo que con versiones anteriores, sobre todo cuando tenemos que modificar un diseño web de otro compañero.

Estructura HTML

Html5 – Estructura

Estructura de una web en HTML5

A la hora de diseñar una web, había ciertos elementos o partes de la página, que eran claramente identificados y a grandes rasgos, eran aceptados por la mayoría de la comunidad, ya sean usuarios o diseñadores. Nos referimos a la cabecera (header), al pie de página (footer), a la barra lateral (aside)….

Sin embargo, en anteriores ediciones, estos elementos eran diseñados en la web como simples divisiones mediante el uso de la etiqueta <div>, teniendo que identificar cada una de ellas como lo que realmente eran. Así teníamos una lista de etiquetas divs, cada una con su correspondiente identificador, que teníamos que darle nosotros mismos: <div id=”header”> o <div id=”footer”>…sin embargo, también podríamos llamarlos <div id=”cabecera”> o <div id=”pie-de-pagina”>, con lo que cada diseñador tenía su propia forma de identificar las partes de sus webs.

Efectivamente, parece lógico que estos elementos, que siempre se repiten en todos los diseños web que trabajamos, tuvieran sus propias etiquetas, semánticas e identificativas. Así pues, pasamos de un <div id=”cabecera”> a un <header>, mucho más limpio, fácil para los diseñadores y muy útil para los buscadores como Google, que podrán identificar de forma más rápida la estructura de una web.

¿Y la composición de HTML5 en responsive design?

Exactamente igual, nada cambia (Si aún no has oído hablar del diseño adaptable o diseño responsive). Simplemente los elementos “fluidos” de la web se van a adaptar al dispositivo donde se visualice la página, sin perder nuestro diseño, haciendo más fluida y sencilla la experiencia de navegación al usuario.

HTML en diseño responsive

Html en responsive.

Estas mismas etiquetas se adaptarán al soporte, aunque como vemos, varios elementos si mantienen su orden, como la cabecera de la web y el pie de página. Sin embargo, elementos como la barra lateral (sidebar), o un posible menú de navegación lateral (nav) pasarán a ubicarse por encima o debajo de la sección principal (la que antes llamamos “main”)

Con esta composición, las etiquetas de HTML5 que normalmente siempre están presentes en todos los diseños web que realizamos son:

<header></header>

Es el elemento que abre la web. Normalmente lleva ubicado el logotipo o el texto representativo. En los casos que la web lleve publicidad, también se suele ubicar el banner de cabecera dentro de él. En muchos casos contiene al menú de navegación <nav> aunque no necesariamente.

<nav></nav>

Todos los enlaces de navegación que llevan a las distintas secciones de nuestra web. Es una de las partes más importante, pues debe ser fundamental para que el usuario sea capaz de navegar por las categorías y páginas.

<section></section>

Es la etiqueta que viene a sustituir por defecto al <div>, y lo que indica es que estamos en una sección distinta, como si de un capítulo de un libro se tratase.

<article></article>

La etiqueta article está diseñada para contener una unidad propia de información y contenido, que a su vez puede tener su cabecera (header), cuerpo (section) y pie de artículo (footer). Un section puede contener varios artículos independientes.

<aside></aside>

Viene a sustituir al sidebar o barra lateral, aunque su uso es para llenarlo de contenido que no esté relacionado directamente con esa página, por ejemplo un listado de enlaces, anuncios, iconos sociales…

<footer></footer>

Y el pie de página, presente en casi todas las webs, nos sirve para ubicar los datos de contacto, algo de información extra, iconos sociales, actualizaciones de twitter…hasta incluso un segundo menú de navegación.

<audio>,<video>…

Otras etiquetas para mostrar contenido si la necesidad de contar con plugin de terceros, como flash, pero hablaremos de ellos en otros artículos posteriores.

Busca siempre que tu diseño web incorpore estas novedades, que seguro están influyendo positivamente en el posicionamiento y el SEO!

Artículos Relacionados