Elementos semánticos de HTML5 – Parte 1

HTML5

Elementos semánticos de HTML5

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.

XHTML
1
2
3
4
5
6
7
<header class="header">
 
   <h1>PhoToday</h1>
 
    <p class="descripcion">La web de noticias sobre el mundo de la fotografía</p>
 
</header>

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.

CSS
1
2
3
4
.header {
   background-color: #EB621A;
   text-align: center;
}

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.*/

CSS
1
2
3
4
5
6
7
8
9
10
.header h1 {
   color: white;
}
 
/* En este caso los elementos que formen parte de la clase "descripción" dentro del elemento
con clase "header" tiene una fuente en negrita. */
 
.header .descripcion {
   font-weight: bold;
}

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.

XHTML
1
2
3
4
5
6
7
<article>
 
    <header>
 
    <h2>Polaroid vuelve</h2>
 
</header>

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.

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
<div class="contenido">
 
    <p>Ut sodales diam vitae risus molestie dapibus ut non lorem.
Phasellus eleifend quis lectus a dignissim. Aliquam fringilla cursus mollis.
Nulla facilisis arcu id leo consectetur, a sollicitudin metus elementum.
Etiam diam nulla, eleifend sit amet tincidunt quis, sollicitudin sed dolor.
Mauris vel nunc quam. Curabitur fringilla maximus orci, eu vehicula odio
sagittis ut. Vestibulum ac augue at quam lobortis ultricies mattis vitae odio.
Pellentesque aliquet aliquet maximus. Proin ac ex non elit lobortis dictum.
Pellentesque eu ante eu orci congue varius ut tempor velit. In laoreet lectus
non volutpat faucibus. Vestibulum sit amet imperdiet magna, porta cursus urna.
Nulla tristique lacus non dignissim placerat. </p>

La clase contenido tendrá un estilo

CSS
1
2
3
.contenido {
    font-family: "Times New Roman";
}

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).

XHTML
1
2
3
4
5
6
7
<figure class="imagen-izquierda">
    <img src="https://pixabay.com/static/uploads/photo/2015/05/03/15/07/polaroid-751275_960_720.jpg" alt="Cámara Polaroid">
 
    <figcaption>
      Cámara presentada en la convención profesional de fotógrafos.
    </figcaption>
</figure>

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:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/*Sitúa el elemento con clase imagen-izquierda a la izquierda (float)
y establece unos márgenes para colorcarlo*/
 
.imagen-izquierda {
    float: left;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 20px;
    margin-bottom: 0px;
}
 
/* El elemento <img> de la clase .imagen-izquierda tiene un ancho de 320px */
 
.imagen-izquierda img{
   width:320px;
}
 
/*El pie de la foto figcaption tendrá un ancho máximo de 200px, tendrá
fuente pequeña con estilo italic y un margen en la parte inferior de 5px
para que no esté pegado al texto del párrafo. */
 
.imagen-izquierda figcaption {
    max-width: 200px;
    font-size: small;
    font-style: italic;
    margin-bottom: 5px;
}

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

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<p>Pellentesque id imperdiet neque, eget aliquet urna. Duis porta erat magna,
sed venenatis nisi mattis quis. Pellentesque rutrum dolor vulputate,
rhoncus lectus sed, gravida metus. Integer tempor dolor in augue maximus,
ac rutrum arcu sollicitudin. Vestibulum imperdiet metus eget sem venenatis,
sit amet ornare elit pellentesque. Sed imperdiet nisl volutpat lorem
venenatis eleifend. Nullam ut lorem id diam congue placerat in eleifend nulla.
Donec malesuada nisi interdum purus laoreet tincidunt. Suspendisse felis libero,
rhoncus et ante elementum, euismod faucibus metus. </p>
 
<aside class="cita">
   <blockquote>
     Con esta cámara buscamos volver a la cabeza del mercado de la fotografía.
    </blockquote>
</aside>

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:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/*El contenedor de la cita irá a la derecha y tendrá un borde fino arriba y
una ancho abajo. Además se establece la altura de línea (line-height) y un
relleno (padding) para que el contenido no quede al borde*/
 
.cita {
   float: right;
   max-width: 300px;
   border-top: thin black solid;
   border-bottom: thick black solid;
   font-size: 18px;
   line-height: 130%;
   font-style: italic;
   padding-top: 5px;
   padding-bottom: 5px;
   margin-left: 15px;
   margin-bottom: 10px;
}
 
/*Escogemos como serán las comillas*/
blockquote {
   quotes: "«" "»";
}
 
/*Se establece que se pondrá al inicio y al final de la cita,
que serán las comillas*/
blockquote:before { content: open-quote; }
blockquote:after  { content: close-quote; }

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

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<p>Integer tincidunt justo quis magna ultricies, nec pulvinar massa tristique.
Nullam ornare ligula quis neque aliquam aliquet. Fusce nec malesuada orci.
In dui nulla, molestie non varius vitae, varius sit amet dolor.
Maecenas consectetur congue odio quis semper. In congue varius orci vitae pretium. Integer pellentesque, massa sit amet auctor laoreet, lacus arcu placerat lacus, quis aliquet purus elit a quam. Nullam rhoncus erat orci. Curabitur ac nunc sit amet lorem dapibus ullamcorper. Aliquam risus lacus, efficitur non imperdiet at, congue consectetur elit. Mauris non arcu accumsan, auctor eros nec, pulvinar felis. Integer venenatis ex augue, at fringilla odio consequat ac. Sed consequat rutrum purus vel pretium. Donec ac blandit diam. Suspendisse gravida egestas varius. Suspendisse ac urna massa. </p>
 
<p>Integer tincidunt justo quis magna ultricies, nec pulvinar massa tristique.
Nullam ornare ligula quis neque aliquam aliquet. Fusce nec malesuada orci.
In dui nulla, molestie non varius vitae, varius sit amet dolor. Maecenas
consectetur congue odio quis semper. In congue varius orci vitae pretium.
Integer pellentesque, massa sit amet auctor laoreet, lacus arcu placerat lacus,
quis aliquet purus elit a quam. Nullam rhoncus erat orci.
Curabitur ac nunc sit amet lorem dapibus ullamcorper. Aliquam risus lacus, efficitur non imperdiet at, congue consectetur elit. Mauris non arcu accumsan, auctor eros nec, pulvinar felis. Integer venenatis ex augue, at fringilla odio consequat ac. Sed consequat rutrum purus vel pretium. Donec ac blandit diam. Suspendisse gravida egestas varius. Suspendisse ac urna massa. </p>
 
</div>
 
</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 :).