Elementos semánticos de HTML5 – Parte 1

Los elementos semánticos de HTML5 son aquellas etiquetas que definen la estructura de la página web, permitiendo identificar cada de uno de los componentes con facilidad.

¿Por qué usar los elementos semánticos de HTML5?

Proporcionan más facilidad a la hora de editar o mantener la página. Al ser sencillo diferenciar los elementos que forman la estructura de la web será fácil escoger que cambiar tanto en la estructura como en el estilo, aunque pasen meses desde que la hiciste.

Mayor accesibilidad. HTML5 permite navegar con lectores de pantalla y otras herramientas de ayuda para aquellas personas que sufren alguna discapacidad y así no tengan ninguna clase de dificultad a la hora de navegar en la web.

Mejor posicionamiento o SEO (Search-engine optimization). Los navegadores escanean la web y las bases de datos. Cuanto más sencilla sea para la máquina comprender la web, más posiblidades tienes de que consulte tu web y también de aparecer en los resultados de búsqueda de alguien.

Reciben soporte. Los navegadores y herramientas web cada vez sacan más partido a los elementos semánticos de HTML5.

Elemento header

En el primer post mencioné que en HTML la estructura se basaba en <div> (división), esto no proporciona ninguna información por si sola de su contenido. En este tutorial usaré un ejemplo práctico para ir explicando cada uno de los elementos.

Comenzaremos con el <header> que es el introductorio de una web, pero también lo puede para otros elementos como se verá más adelante.

Dentro del <header> irá el título de la web y una breve descripción. Pero queda un poco soso ¿verdad? Vamos a darle un poco de vida. Para ello crea <style> dentro del <head> e introduce las siguientes reglas.

Esa regla indica que elemento header tendrá un fondo de color naranja y su texto esté centrado.

Es posible que el valor del background puede que te haya dejado descolocado. Es un valor hexadecimal que indica cuanto rojo, verde y azul tiene nuestro color. Podéis escoger vuestro color en HTML color codes.

/* Indica que los elementos <h1> que estén dentro del <header> sean de color blanco.*/

Os debería de haber quedado así:

Elemento article

Una web de noticias debería de tener algo como… noticias. Asique crearemos el siguiente elemento que almacena la noticia, <article>.

La etiqueta <article> se usa para indicar el contenido independiente. Esto vendría a ser un post de un blog, un análisis de una película, el post de un foro…

En este caso el <article> tendrá un <header> que contiene el título de la noticia.

A continuación escribimos el primer párrafo del contenido de la noticia con un generador de contenido aleatorio llamado lorem ipsum. El párrafo irá dentro de un <div> que almacenará todo el contenido de la noticia.

La clase contenido tendrá un estilo

De esta manera todo el texto de .contenido será en Times New Roman.

Elemento figure

La etiqueta <figure> se usa para almacenar imágenes que pueden hacer referencia al texto. En ella se crea el elemento <img> con los atributos src (vínculo o ruta de la imagen que queremos) y alt (Descripción de la fotografía).

La etiqueta <figcaption> se usa para dar un pie a la foto.

Después de haber introducido el código, la web se os habrá desordenado. Vamos a incluir unas reglas de estilo para arreglarlo:

Resultado hasta ahora:

Elementos semanticos HTML5

Elemento aside

La etiqueta <aside> se emplea para relacionar elementos secundarios, como anuncios, enlaces externos, citas… Añadimos otro párrafo y una cita

En este caso metemos una cita con <blockquote>. Se podría hacer referencia al origen de la cita con el atributo cite pero en este caso no lo usaremos.

Le daremos el siguiente estilo:

Para finalizar, 2 últimos párrafos y el cierre del <div> contenido y del <article>

Si todo ha salido bien, debería de haberos quedado así:

Elementos semanticos de HTML5 final

Y hasta aquí por hoy. Espero que este tutorial no os haya sido demasiado complicado. Un saludo :).