Elementos semánticos de HTML5 – Parte 2

HTML5

Elementos semánticos de HTML5

En el post anterior, había hablado de las ventajas de usar los elementos semánticos de HTML5 y puse un ejemplo práctico con algunos de ellos. Para continuar vamos a usar la página creada en el post anterior.

Elemento footer

El <footer> o pie de página se suele utilizar para información adicional como el copyright, enlaces estilo aviso legal, contacto, o darle funcionalidad empleando widgets en caso de usar un blog.

Donde termine la etiqueta <article> añadimos el elemento <footer> que contendrá una dirección de contacto y copyright.

XHTML
1
2
3
4
5
6
7
<footer>
 
    <address>Para contactar con nosotros podéis enviarnos un email a contacto@photoday.com</address>
 
    <p>Copyright © 2014 photoday</p>
 
</footer>

La etiqueta <address> se utiliza para indicar información de contacto que podría ser de un artículo o de toda la página web.

Para que quede un poco presentable vamos a escribir la siguiente regla de estilo:

CSS
1
2
3
4
5
6
7
/*Ocupa todo el ancho de la página,
tiene una altura de 65 píxeles y su texto se mostrará centrado*/
footer{
    width: 100%;
    height: 65px;
    text-align:center;
}

Agregando una barra lateral

Ahora vamos añadir una barra lateral donde irá el menú de la página. Lo ponemos justo después del cierre de <article>:

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<aside class="navegacion-lateral">
 
  <nav>
 
    <h2>Noticias</h2>
 
    <ul>
 
      <li><a href="#">Sony sacará 20 cámaras en 2016</a></li>
 
      <li><a href="#">Canon impresiona con la presentación de su nuevo objetivo</a></li>
 
    </ul>
 
  </nav>
 
 </aside>

Después de haber añadido esto se os habrá desordenado todo. Para arreglarlo vamos añadir las siguientes reglas de estilo:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*La barra tendrá un color gris, fuente pequeña, un margen respecto al
elemento superior de 15 píxeles, 650 píxeles de altura, relleno de 15 píxeles
para que los elementos del interior no estén pegados al margen y ocupa un 15%
de la página*/
 
.navegacion-lateral {
  background-color: #eee;
  font-size: small;
  margin-top: 15px;
  min-height: 650px;
  padding: 15px;
  width: 15%;
}
 
/*El elemento article se situará a la derecha y ocupará el 80% de la página*/
 
article {
  float: right;
  width: 80%;
}

Una vez solucionado voy a explicar las etiquetas. Si recordáis lo que dije en el post anterior sabréis que <aside> se emplea para relacionar elementos secundarios, anuncios, menús etc.

Dentro de <aside> hay una etiqueta <nav> que representa la navegación de la página. Contiene vínculos a otras páginas, ya sean de la propia web o a otras.

En <nav> hay un elemento <ul> que contiene unos <li>. La etiqueta <ul> es una lista desordenada y los <li> (list) son los elementos que la componen. Es muy común usar <ul> para crear menús.

¿Y que diferencia hay entre una lista desordenada <ul> a una ordenada <ol>? Pues que la <ul> empleará iconos para listar los elementos y <ol> usará letras o números siguiendo una serie.

Dentro del <aside> meteremos un <section> que se usa para representar una sección o bloque dentro de la página. Este tendría un contenido menos relevante. En este caso tendrá una información sobre la web.

Agregad <section> justo después del cierre de <nav>:

XHTML
1
2
3
4
5
6
7
  <section>
 
    <h2>Sobre nosotros</h2>
 
    <p>Photoday está compuesta por un grupo de fotógrafos profesionales que viven al máximo el mundo de la fotografía. </p>
 
  </section>

Os debería de quedar así:

Elementos semánticos de HTML5 Parte 2 final

Y hasta aquí los elementos semánticos de HTML5, espero que os haya servido de ayuda. Saludos 😉