Curso de HTML5: Etiquetas Semánticas
Nuevas etiquetas semánticas
A continuación detallaremos las principales nuevas etiquetas semánticas de HTML 5:
- header: el típico div id=“header” sería lo más aproximado, debería contener la cabecera del documento, lo típico que remetimos en la plantilla a lo largo de todo el sitio web.
- footer: lo mismo pero con el pié de página, donde solemos colocar el copyright el mapa de la web , la dirección de la empresa etc…
- section: aquí el tema no es tan fácil de definir. Se refiere a las distintas zonas dentro de una determinada web, las áreas donde vamos colocando los widgets, los contenidos, los menús, las partes en las que está compuesta la página. También puede representar distintas partes de una noticia o un post de un blog.
- article: en si sentido más genérico sería una noticia, un post, un artículo de un blog, o incluso la ficha de un producto en la tienda. En su sentido más académico serían artículo publicados.
- nav: es la etiqueta que debería englobar los menús o las barras de navegación, las migas, etc…
- aside: todo contenido complementario al contenido principal, que debería estar o dentro de una section o un article, debería estar dentro de un aside. Un ejemplo podrían ser los apartados de productos relacionados con un producto que estoy visitando.
- hgroup: debería agrupar aquellas cabaceras, h1, h2, etc.. que van relacionadas. Nombre de empresa y eslogan, sería un ejemplo.
- figure: típico gráfico relacionado con el texto, donde visualmente podemos ver algo que nos están explicando en texto, tablas, imágenes, gráficas, etc.. serían figure’s
- time: se ofrece a escribir una fecha o una hora, cuidado con el atributo datetime :)
Lo bueno de la semántica es que no hay maneras correctas o incorrectas de aplicar estas etiquetas, sino maneras lógicas para el autor de colocarlas. No existe una regla definida de si los article deben contener sections o no. Aunque sería lógico pensar en un apartado de la web con los últimos artículos sería una sección que dentro tuviera un listado de artículos.
Práctica propuesta
Intenta ir a la web de amazon de un producto, e intenta definir que etiquetas asociarías a que apartados de la web. Repite ese proceso con un blog, la portada de un periódico y un sitio de recetas.
Abre un comentario y deja tus impresiones.
Este obra está bajo una licencia Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0 España.