Nuevas Etiquetas Semánticas de HTML5

Logo HTML5 Semantics

En HTML5 se han introducido un conjunto de nuevas etiquetas semánticas para que la estructura de una web tenga sentido por si sola y permita marcar las partes de la pagina como la cabecera, el contenido o contenidos, el pie, los menús, etc. y esto unido a los fragmentos enriquecidos o rich snippets hace que se puedan interpretar mejor los contenidos con el consiguiente beneficio para los usuarios, ya que los buscadores podrán ofrecerles contenidos más relevantes en sus búsquedas, pero de cara a lo que ve el usuario no hay ninguna diferencia.

Las nuevas etiquetas

Estas nuevas etiquetas como decía no aportan nada desde el punto de vista estructural (son como un div), ni tampoco desde el punto de vista visual porque para eso están las hojas de estilo, vamos a verlas y casi con el nombre se puede ver para que se usan.

  • Header: El nombre es claro, esta etiqueta se usa para definir la cabecera de la página, el titulo, descripción o los elementos que contenga. No hay que confundirlo con head, donde definimos el titulo para mostrar en el navegador, cargamos estilos, definimos el charset,…
  • Footer: Como en el caso anterior esta muy claro, en el pie de página pues habitualmente tenemos el copyright, información del autor de la web, CMS, plantilla o cualquier cosa que permanezca constante en esa posición. Aunque lo lógico es que el pie de página este al final de la pagina no hay nada que nos impida ponerlo en cualquier otro lugar, porque simplemente lo estamos marcando semánticamente y esto no tiene ningún efecto visual.
  • Nav: Como te puedes imaginar dentro de esta etiqueta tendremos el navegador o menu.
  • Article: Con article se define un contenido que es independiente del resto del contenido y que es suficiente por si mismo para entenderlo, por ejemplo un post en un blog, un articulo en un periódico, un mensaje en foro o un comentario.
  • Section: Con esta etiqueta se definen secciones dentro de la web a nivel global o secciones de un article, del header, o de lo que quieras.
  • Aside: Aside se puede usar en dos situaciones distintas:
    • Se puede usar dentro de un article para añadir citas, glosarios de terminos, enlaces relacionados o cualquier información relacionada con el contenido del article pero que no es tan importante como para formar parte de el.
    • Fuere de article se usa para definir un contenido como secundario, como por ejemplo los típicos contenidos de los sidebars (publicidad, bloques de enlaces, calendarios, etc.) o cualquier otro contenido de la web que se pueda considerar secundario.

Vale, ya sabemos para que sirve cada una de las etiquetas, pero como combinarlas no esta tan claro porque según la web que mires te dicen una cosa o la contraria y casi todos tienen razón porque quizás en un post lo normal sea que el post sea un article y dentro tenga un header y varios section, pero por ejemplo en la pagina inicial de un blog normalmente tenemos una lista de los últimos post por lo que en este caso podemos tener una section para englobar los post y cada post puede ser un article, por lo que para una situación es lo correcto puede que para otra no lo sea…

¿Y que pasa con los div?

Pues no pasa nada, se pueden seguir usando igual que antes porque aunque algunos pasaran a ser alguna de las nuevas etiquetas habrá otros divs que no tenga sentido transformarlos porque sean divisiones que no tienen ningun valor semántico.

Aunque parece que div, section y article puedan ser prácticamente iguales podríamos decir que usamos article si el contenido tiene sentido por si mismo se lo viésemos solo (si ese contenido puede ser un feed es un caso claro de article), section se usa para englobar información relacionada entre si y finalmente usaremos div cuando el contenido (del div) no tiene ninguna relación semántica.

Ejemplo de uso de las etiquetas semánticas de HTML5

Un ejemplo de uso de estas etiquetas muy sencillito, para ver el uso de header, footer, nav, aside, section y article y con distintos tipos de anidamiento (section dentro de article, article dentro de section, article con header), el ejemplo es sencillo y se puede complicar todo lo que quieras pero la idea es ver un ejemplo de una posible estructura para tener una idea general de como funciona.


<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <!-- Cabecera -->
    <header>
        <h1>Titulo de mi web</h1>
        <p>Mi web sobre algo</p>  
    </header>

    <!-- Menu de navegacion -->
    <nav>
        <ul>
            <li><a href="pagina1.html">Menu 1</a></li>
            <li><a href="pagina2.html">Menu 2</a></li>
            <li><a href="pagina3.html">Menu 3</a></li>
        </ul>
    </nav>

    <!-- Contenido -->
    <article>

        <h2>Titulo</h2>

        <section>
            <h3>Capitulo 1</h3>
            <p>...</p>
            <p>...</p>
        </section>

        <section>
            <h3>Capitulo 2</h3>
            <p>...</p>
            <img src="imagen.png">

            <!-- Contenido relacionado-->
            <aside>
                Referencias a otros sitios...
            </aside>
        </section>

        <section>
            ...
        </section>

        <section>
            <h3>Comentarios</h3>
                <article>
                    <header>
                        <h4>Pepito dice:</h4>
                        <p><time pubdate datetime="2013-11-13">Hace 3 hora</time></p>
                    </header>
                    <p>Bla,bla,bla.</p>
                </article>
                
                <article>
                    <header>
                        <h4>Juanito dice:</h4>
                        <p><time pubdate datetime="2013-11-13">Hace 1 hora</time></p>
                    </header>
                    <p>Como que bla,bla,bla!!!</p>
                </article>
        </section>

    </article>

    <!-- Pie de pagina -->
    <footer>
        ...
    </footer>
</body>
</html>

Leave a Reply