Diseño web con HTML5: Composición y Estructura

Read this article in English

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.

diseño web con html5

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, aquí tienes un artículo sobre responsive design). 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.

partes de una web 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.

Por todo ello, HTML5 se va a convertir (si no lo ha hecho ya) en un lenguaje que va a estructurar el diseño web de una forma mucho más semántica y fácil de identificar. Te animamos si eres diseñador a comenzar como nosotros en SiloCreativo a diseñar con html5 (todos te lo agradeceremos 😉 ) y si eres usuario, no lo dudes, busca siempre que tu diseño web incorpore estas novedades, que seguro están influyendo positivamente en el posicionamiento y el SEO!

Comentarios (26)

  1. Hay un detalle en tu primera imagen. la etiqueta “article” solo debe contener a “section”. Sidebar es la barra lateral que contiene generalmente cosa ajenas a la web pero relacionados al article.

    1. Hola Sero. Gracias por comentar.
      Efectivamente esa puede ser una opción, situar todos los “aside” dentro de un “sidebar” (o barra lateral) fuera del “article”. Esta es la estructura básica de cualquier blog en WordPress, por ejemplo.

      Pero si te fijas bien, en el ejemplo, no existe ningún sidebar, solo un “article”, que contiene todo lo anterior. Por ello, el uso de la etiqueta “aside” aquí, contenida dentro del article, es perfecta para incluir un banner de publicidad directamente relacionada con el artículo, una cita, un listado de links…pero con una cierta relación con el contenido del “article”

      Es unos de los usos recomendados para dicha etiqueta, al igual que el que comentas, de incluirlos en un contenedor div tipo “sidebar”.

      Gracias por tu aporte!
      Un saludo

  2. Buenas amigos, me gustaría la opinion de alguien sobre los nuevos elementos html5 como: header,footer,nav,section,article,aside. Creeis que estas etiquetas estan mas bien enfocadas a un blog, o tambien a una web normal y corriente? Es que algunas etiquetas soy muy confusas en su significado.,sobre todo article y section.

    1. Hola Isaac, gracias por tu comentario 🙂

      Efectivamente muchas de estas etiquetas pueden causar confusión. En el caso concreto que comentas, imagina un index de un blog: la página de inicio o un archivo de categorías. Ahí se pude definir un section que engloba a 8 o 10 articles (cada uno con un título, imagen y extracto). Sin embargo esto es más complejo en una página de un solo artículo (aunque el modelo sigue siendo válido, un section que englobe un article y varios asides)

      Pero efectivamente puede llevar a confusión. En un web el elemento section cobra más lógica.

      Estos dos artículos pueden servir como referencia sobre este tema:
      http://coding.smashingmagazine.com/2013/01/18/the-importance-of-sections/
      http://html5doctor.com/the-section-element/

      Un saludo!

  3. Hola de nuevo Ricardo:
    Intentare explicarme lo mejor que pueda y gracias por tu ayuda. Voy a basarme por ejemplo en una página de un cine que es el proyecto que tengo actualmente. Por ejemplo en body tengo repartido estas partes, una la de los estrenos en cartelera, otra, los próximos estrenos, otra los precios… que tendría que ver aquí secction y article? Article no se supone que es para artículos, de un blog por ejemplo, aquí en mi pagina no tengo ninguno. Y secction por ejemplo si serviría separar los distintos contenidos de mi página? En este caso la cartelera, próximos estrenos… Puede que me este liando pero te agradecería tu ayuda.

    1. Hola Isaac, gracias de nuevo por pasarte 😉

      En tu caso la estructura lógica sería dos o tres section (uno para estrenos, otra de precios, otra de estrenos DVD..)
      Dentro de cada una de esas seciones imagino tendrás varios elementos. Por ejemplo, en estrenos se muestran las últimas 4 películas, con el título, una imagén, el director y un texto breve por película. Pues bien, cada una de estas películas es un article. Son elementos que por si mismos tienen consistencia para ello. De esta forma, tendrías tres o cuatro articles dentro de cada section. De forma análoga repetiría dicha estructura lógica en el resto de sections.

      Para hilar más fino: Dentro del article, la gran duda, los títulos son H1, H2, H3? Solo el H1 para el título de la página? En HTML5 ha cambiado, puedes usar varios H1 siempre que vayan con sus correspondientes contenedores (articles en este caso). Un artículo de referencia: http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era–webdesign-16824

      Un saludo y suerte con el proyecto 🙂

      Un saludo!

  4. Hola, hace un mes aproximadamente que estoy siguiendo tu blog.

    Con respecto a la estructura de la imagen que muestras al inicio yo veo un error, ya que dentro de se insertan todos los , no dentro de un

    Saludos desde Guatemala y muy buenos articulos y tips que me han servido de mucho.

      1. Hola Ricardo, a lo que me refería es que en el 100% de post que e leído sobre la estructura de HTML5 dentro del section va el article no viceversa como esta en la imagen que dentro del article esta el section. Como escribi anteriormente yo lo veo como un error. Pero tu diras… 🙂 saludos

        1. Perfecto Luis, gracias por volver a comentar!
          Realmente depende del contenido. Efectivamente lo normal suele ser un section (imagínate categoría deportes) y dentro de él tres o cuatro artículos sobre el tema (uno de fútbol, béisbol, ciclismo, etc…) ese sería el esquema convencional y más usado.

          Pero section y article no son padre e hijo. No guardan ninguna relación en ese sentido. Es más complicado. Dentro de un article con cierta extensión (imagina un artículo de investigación) podemos tener varios section si tratamos temas distintos (un artículo sobre los navegadores web y varias section una hablando de cada explorador) o una tesis con varias secciones.

          Es una discusión muy común dentro del mundo del HTML5. Es perfectamente válido tener un section con varios articles que a su vez tengan varios sections dentro de ellos. Te dejo unos buenos artículos de dos gurús del HTML5 (Oli Studholme y de Ian Devlin) que hablan sobre el tema, espero que te sirvan. Saludos! 🙂

          http://www.iandevlin.com/blog/2011/04/html5/html5-section-or-article

  5. Vamos a ver. Que se use html5 porque los que dirigen los estandares web DIGAN que es lo mejor, es una cosa. Pero si estamos hablando de realidades, html5 triplica el código y el peso de la página web, con lo cual, es bastante incoherente. Otra cosa, el hecho de que todavía no haya acuerdo de compatibilidades entre navegadores, todavía dificulta más la subida a la red, que se traduce en muchísimo más trabajo para el diseñador web..
    Y dejémonos de tonterias. Aunque haya creativos estupendos con html5, es una bobada que nos quieren meter a fuerza de publicidad engañosa.

    A dia de hoy html5 no trae prácticamente ninguna ventaja.

  6. Hola Ricardo, tengo unas cuantas dudas con algunos elementos de html5 y me gustaría que me ayudaras a despejarlas por favor. Te las voy a poner por partes para no liarme ni tampoco liarte. En este mensaje te pondré las primeras dudas y una vez despejadas te escribiré la siguiente si es posible claro :).
    La norma de aside dice: que se use para todo aquel contenido tangencial (que no es principal o importante, secundario, está relacionado pero poco) al contenido principal de la pagina, articulo. Cuando se utiliza dentro de article, el contenido debe ser específicamente relacionado con ese article (por ejemplo: glosario). Cuando se utiliza fuera de un article, el contenido debe estar relacionado con la pagina (por ejemplo lista de blog, grupos adicional de navegación…)
    Ricardo que pasaría si tengo un aside dentro de un section por ejemplo, ¿este aside está relacionado con la paguina, ya que no está dentro de un article? Es decir ,el aside dentro de article “el contenido debe ser específicamente relacionado con ese article” como te puse arriba y si no está dentro de article, en un section, div o fuera de estos… ¿siempre va a estar relacionado con la pagina? Te comento esto porque en unas de mis paginas la tengo dividida en varios section y dentro del section tengo un contenido que lo considere un aside, pero claro ahora pienso que no se si esto está bien.
    En tu articulo comentas y en algunos más de la red que aside viene a sustituir al sidebar o barra lateral, ¿ qué es exactamente un sidebar (barra lateral)? Creo entender que son las barras laterales que se ponen a la derecha o izquierda de la web, ¿pero se denomina asi por su contenido o por sus estilos css? Porque se supone que en html5 no importan los estilos de las etiquetas sino la semántica, es decir aunque ponga un footer en la parte alta de la web va a seguir siendo un foote, lo que importa es su contenido, aunque claro está que normalmente aparecen debajor. ¿Por tener entonces un aside o varios a la izquierda de mi web no significa que tenga una barra lateral?
    Bueno Ricardo se que son muchas preguntas y espero no volverte loco pero me seria de gran ayuda tus sugerencias.
    gracias

    1. Saludos Isaac, gracias por comentar.

      Sidebar, en WordPress, se suele denominar a la zona donde se ubican los widgets. Viene a responder a una clase (.sidebar) y no a una etiqueta html. Ahora lo normal es que ese sidebar (o #secondary) quede compuesto por varios widgets (cada uno siendo un aside, por ejemplo)

      En cuanto si el aside está dentro del article o fuera, tampoco tiene mucha importancia. Los buscadores van a dar más prioridad al contenido, por lo que si el aside está dentro del article, perfecto, y si está fuera, tampoco pasa nada, se refiera o no al artículo o a la web completa.

      Un ejemplo de esto: un aside con artículos relacionados. ¿dentro del artículo pues se refiere a los relacionados del artículo que estamos leyendo? ¿O fuera del artículo pues se refiere a otros artículos de nuestra página? Creo que tampoco tiene mucha importancia.

      Un saludo y gracias por comentar! 🙂

  7. Hola Ricardo hay una frase tuya que me ha llamado la atención y me ha generado una duda.

    Frase:

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

    Header
    Nav
    Section
    Article
    Footer
    Aside

    Ahora yo te pregunto; cuando esté diseñando un página web, está mal prescindir de algunas etiquetas html5 es decir, estoy estructurando una pagina y en ella solo veo necesario añadir por ejemplo la etiqueta header y aside o footer y nav…en conclusión, no porque existan estas etiquetas tenga que usarlas todas, ya que alomejor en una página concreta no tengo contenido que este relacionado con esa o esas etiqueta html5 concreta. Alomejor no tengo un menú navegación, ningún contenido que pueda llamarse footer…

    Espero haberme explicado.

    1. Saludos Isaac. Gracias por comentar.

      Correcto, estamos de acuerdo, dependerá del proyecto el número de elementos que utilicemos. No siempre va a ser necesario tener un menú, o un pie de página..igual que existen muchas etiquetas que se utilizan muy poco. No por un uso intensivo de todos los elementos vamos a tener la web mejor diseñada. Dependerá de cada proyecto. Gracias por tu reflexión 🙂

      Saludos!

  8. Gracias Ricardo por la aclaración ya me quedo mas tranquilo 🙂 otra cosita Ricardo me gustaría preguntarte;

    Definición:

    Las etiquetas y su cierre , Se encargan de indicar a los navegadores que lo que contienen es la cabecera de la página y que dentro seguramente llevarán lo típico, algún logotipo, el título de la página, quizás una descripción de la misma y poco más. La norma define a la cabecera como un grupo de ayudas a la navegación.
    No es una etiqueta obligatoria, aunque debemos usarla si realmente nuestras páginas tienen algún bloque de código que se pueda entender como “cabecera”.
    Además de los elementos citados, un header podría contener un menú de ayuda a la navegación, una tabla de contenidos, un formulario de búsqueda, etc. Su contenido no es tan extricto.

    Comprendo esta etiqueta y su contenido, pero tengo una duda sobre ella. ¿Dentro de ella Ricardo tengo que llevar un orden de elementos ? es decir, en todos los manuales que veo la primera etiqueta que se ve dentro del header es un encabezado hx, después alomejor una imagen, un menú de navegación..¿ si dentro del header tengo hx,menú navegación..siempre la primera etiqueta dentro del header tiene que ser hx o el orden no importa o si importa?

    Si puedes aclararme te lo agradezco
    Un saludo

    1. Saludos Isaac, a efectos de maquetación, si usamos position: relative; si importa el orden de los elementos, mostrandose de arriba-abajo en la web (aunque por CSS tenemos formas de alterarlo). Por lo demás, puede que tenga alguna influencia por el SEO, pero creo que es mínima. Aquí primará es aspecto visual

      Gracias por comentar 🙂

      1. Hola Ricardo, me dejaste un poco confuso y no llegue a entender tu respuesta cuando comentaste:

        “a efectos de maquetación, si usamos position: relative; si importa el orden de los elementos, mostrándose de arriba-abajo en la web (aunque por CSS tenemos formas de alterarlo).”

        Y también cuando comentas esto:

        “Por lo demás, puede que tenga alguna influencia por el SEO, pero creo que es mínima. Aquí primará es aspecto visual”

        ¿ Te refieres que si, si en vez de poner un hx primero dentro del header, pongo una imagen por ejemplo y después el hx puede afectar algo mínimo referente a SEO? Es decir, ¿el orden de las etiquetas dentro de header importa un poco al nivel SEO?

        Si me puedes dar una explicación un poco mejor te lo agradezco

        saludos

        1. Hola Isaac, correcto, piensa que el spider de Google es un bot, y que no entiende de estilos (ignora el CSS), solo ve el HTML. Cuando más fácil se lo pongas, mejor. Un orden de headings (h1, h2, h3, h4, h5 y h6) siempre será más lógico que un (h6 > h5 > h4 > h3 > h2 > h1), por muy grande que maquetemos el h6 por CSS y muy pequeño el h1.

          En cuanto al caso concreto de imagen y hx por encima o por debajo, no creo que tenga mucha influencia realmente, y si tiene algo, solo Google lo sabe 😉

          Saludos

  9. hola que tal. Que pasa si utilizo netamente la opción “diseño” que me brinda Dreamweaver sin seguir esta estructura de códigos…funcionaria lo mismo como diseño responsive o si tengo que empezar a modificar el html puro desde el código?

  10. Amigo Ricardo, gracias por el post, empecé con él y me tiré 3hs más leyendo sobre estructuras y hasta perfilados HTML 5.

    Me gustaría que aclarases un punto que he leido en html5doctor que es un error habitual: el uso de SECTION como reemplazo del DIV

    Si comprendí bien , recomiendan:
    – Seguir usando DIV cuando el bloque no tenga sentido semantico y se desee aplicarle estilos CSS o Javascript
    – Usar SECTION cuando el bloque tenga en si un sentido semantico, que en el 99% de los casos justifique ser acompañado de un titulo (h1,… h6,

    espero haberlo comprendido y recomendado bien
    un saludo

    1. Saludos Xavierve

      exactamente como comentas. Buena explicación.
      Antes de HTLM5 hacíamos maquetábamos todo con divs y spans. Ahora, con unas etiquetas más semánticas podemos dar una estructura más lógica a la web. Pero esto no significa, como bien comentas, que haya que olvidarse de los divs, útiles para incluir una división interna, un elemento con estilo especial, etc…

      Saludos y gracias!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *