Tutorial HTML5: Etiquetas estructurales
En anteriores entregas del tutorial HTML5 hemos visto desde la estructura del código en un documento HTML hasta las etiquetas más comunes de HTML pasando por la cabecera de un documento HTML.
En esta ocasión, vamos a ver en profundidad cómo se estructura el contenido dentro de nuestro código HTML5; para ello explicaremos algunas de las nuevas etiquetas que incorpora HTML5.
HTML5 incorpora, entre otras mejoras, etiquetas estructurales que nos facilitan la vida a los desarrolladores porque hacen el código mucho más legible por humanos a la par de más semántico.
En versiones anteriores de HTML (o XHMTL incluso) se utilizaban capas con IDs para identificar estos elementos de la estructura (por ejemplo la cabecera era un <div id=»header»>) práctica que llevaba a engaños o malos hábitos en muchas ocasiones.
Con HTML5 este problema ya no existe, pues hay etiquetas estructurales (de las que explicaremos un poquito más adelante) que sólo se pueden repetir una única vez en el mismo nivel.
Conociendo las nuevas etiquetas estructurales
En Katharsix hemos decidido llamarlas etiquetas estructurales por la sencilla razón de que conforman la estructura de nuestro documento HTML:
- header: Es la etiqueta que conforma la cabecera de nuestro sitio web (no confundir con <head>), de nuestros artículos o secciones. Más tarde explicaré todo el potencial de esta etiqueta.
- nav: Esta etiqueta sirve para incluir menús de navegación (navigation) en diferentes partes de nuestro sitio. Por ejemplo, cuando ponemos las categorías de nuestro blog, podríamos indicarlas con nav (insertando la lista desordenada <ul> dentro de las etiquetas <nav> y </nav>) o bien el menú de navegación propiamente dicho.
- section: Remarca las secciones de nuestro sitio web; cuando creamos un portfolio single page podríamos usar section para marchar las secciones de «contacto», «acerca de», «trabajos»…
- article: Cada artículo de nuestro sitio web. Entendamos por artículo las noticias de un periódico, entradas del blog, trabajo de un portfolio o un contenido dinámico agregado con cierta frecuencia.
- aside: Es la barra lateral o sidebar. En realidad podemos colocar aquí cualquier contenido tangencialmente relacionado con el contenido principal de la página; categorías, páginas, nube de etiquetas, últimos comentarios, entradas relacionadas…
- footer: Es el pié de página, de una sección (section), de un artículo, etc.
Las etiquetas estructurales y los niveles semánticos
Cuando hablamos de un nivel semántico hablamos de todo aquello que semánticamente está al mismo nivel (por ejemplo un section o un article). En este tipo de etiquetas se pueden utilizar etiquetas estructurales para añadir más contenido semántico a nuestra página.
Pongamos un ejemplo: supongamos que tenemos la siguiente estructura HTML5:
< !DOCTYPE html> <html lang="es_ES"> <head> <title>Titulo de la web</title> </head> <body> <p>Contenido de la web</p> </body> </html> |
Como estamos centrándonos en el contenido (etiqueta body) de nuestro documento, vamos a ver la plantilla típica de un blog:
<body> <header> <h1>Titulo del blog</h1> </header> <nav> <ul> <li><a href="#">Inicio</a> ... </li></ul> </nav> <section id="contenido"> <article class="post"> <!-- Contenido de la entrada --> </article> … más entradas ... </section> <aside> <nav> … lista con las categorías … </nav> … más cosas … </aside> <footer> <!-- Aquí el pié de página --> </footer> </body> |
Como véis, tenemos toda la estructura de nuestro sitio web definida con las nuevas etiquetas, pero ¿cómo organizo la etiqueta article con lo que mencionaba antes del «nivel semántico»?
<article class="post"> <header> <h1><a href="#">Titulo de la entrada</a></h1> <!-- Aquí la fecha, por ejemplo --> </header> <p> Aquí pondremos el contenido de la entrada con todos sus párrafos…</p> <footer> <!-- etiquetas, comentarios, categorías… --> </footer> </article> |
Usamos las etiquetas estructurales dentro del mismo nivel semántico (article) para definir la estructura de una entrada.
Esto depende de cada uno; hay quien muestra las etiquetas en un aside dentro de la entrada y quien lo hace en el footer de la entrada. A mi personalmente me gusta más hacerlo en el footer.
Si en XHTML (o versiones anteriores de HTML) lo recomendable era usar h1 para el título de la página web y h2 para el título de la entrada (o sección) en HTML5 no es necesario; podemos resetear las cabeceras en cada nivel semántico, de manera que tendremos un h1 en la etiqueta header, otro h1 en cada artículo y así sucesivamente.
Esto es muy personalizable, pues podemos crear sections, aside, nav en caso de tener muchas etiquetas en cada entrada; depende del gusto de cada uno.
Conocidas las etiquetas estructurales, etiquetas más utilizadas y cómo organizar nuestro documento HTML, ya podemos escribir un documento en HTML5.
Os animo a que lo intentéis y veáis que es realmente sencillo y no hay tanta diferencia con respecto a HTML4 o XHTML.
Seguir con el tutorial
Volver al índice
Anterior: La cabecera del documento
Siguiente: Etiquetas más comunes
