HTML5 introduce etiquetas semánticas, que no aportan ningún comportamiento visual adicional, pero que nos permiten por un lado definir de forma semántica el significado de su contenido, lo que será muy útil para el SEO (la optimización de contenidos para buscadores). A estas etiquetas les podremos dar estilos mediante CSS.
Las etiquetas más utilizadas son:
Resumen del Contenido
Estructura de cuerpo del documento:
<header>: Grupo de elementos de introducción de un documento (como los h1, h2). No confundir con <head>, la cabecera HTML que contiene metainformación no visible.
<nav>: Enlaces de navegación. Lo utilizaremos para generar menús de navegación horizontal, o lateral.
<section>: Define una sección en un documento. Por ejemplo, la sección central con el conjunto de artículos de un blog, podremos tener varias secciones dentro de una misma pagina.
<aside>: Contenidos poco relacionados con el resto del contenido de la página. Si no es visualizado, el contenido restante seguirá teniendo sentido. Por ejemplo, una barra lateral con anuncios, u otros contenidos.
<footer>: Pie de una página.
Dentro del cuerpo:
<article>: Contenido con identidad propia, que podría existir aportando información de manera independiente del resto del documento.
Otros elementos:
<cite>: Título de una publicación
<address>: Dirección física
<time>: Fecha y hora
Si quieres profundizar mas en este tema en esta pagina puedes ver todos los elementos que puedes utilizar en HTML5: Lista de Elementos HTML5
Siempre que queramos añadir un bloque con contenido a nuestra página, es útil comprobar si tiene un significado semántico de entre los incluidos en las etiquetas HTML5. En caso de no coincidir con ninguno, siempre podemos utilizar el bloque de contenido neutro <div> o el de texto de linea neutro < span >, que estilaremos igualmente por CSS.
Vamos a ver un ejemplo de estructura de página utilizando etiquetas semánticas HTML5
[codepen_embed height=»628″ theme_id=»22181″ slug_hash=»rxoOGJ» default_tab=»html» user=»tutorialmonsters»]See the Pen rxoOGJ by Alvaro (@tutorialmonsters) on CodePen.[/codepen_embed]En este caso, tenemos la navegación como una lista de enlaces.
Una sección en la que podemos añadir tantos artículos como deseemos.
Finalmente, un pie en el que añadiremos la información que queramos de la página.
El resultado visualmente en el navegador es bastante feo, pero luego es cuestión de aplicarle los estilos con CSS para ponerlo a nuestro gusto
En este articulo, «Selectores y propiedades más usadas en CSS3» podréis ver como aplicar estilos con CSS a estas etiquetas HTML5 y a cualquier otro elemento que querais añadir a vuestra pagina.
Pero precisamente el propósito de las etiquetas semánticas es no proporcionar ningún tipo de estilo adicional, solo marcar el significado de cada una de estas secciones para poder ser entendidas mejor por sistemas automáticos, como los buscadores.
