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.

Licencia Creative Commons

Comments

Leave a Reply

*

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Si estás interesado en seguir formándote tenemos una serie de cursos gratuitos: http://cursosdedesarrollo.com/cursos/

También disponemos de algunos cursos de pago por si son de tu interés: https://cursosdedesarrollo.com/tienda/

Curso de Angular: https://cursosdedesarrollo.com/tienda/angular/

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies