Artículos
HTML5

Pie de página en HTML5

29/Oct/2018

Siguiendo con el uso de elementos semánticos de HTML5 vamos a ver cómo podemos crear un pie de página en HTML5 mediante el elemento footer. El elemento semántico footer nos permite agrupar los elementos que representen el pie de la página.

Dentro del contenido del pie de página tenemos el copyright de las páginas, enlaces a páginas administrativas o tipo «acerca de» del sitio, los últimos artículos publicados,… todo depende de lo grande o pequeño que sea nuestro pie de página.

Para incluir el pie de página con el elemento footer simplemente añadiremos el elemento antes del cierre del cuerpo de la página body.

<footer>
...
</footer>

El elemento footer al ser un elemento semántico no tiene ninguna representación visual a la hora de renderizar el documento. A no ser que mediante CSS le demos algún tipo de visualización o bien insertemos dentro de él diferente contenido que tenga su propia visualización.

En nuestro caso vamos a crear un pie de página en HTML5 que contenga el copyright de la página y un conjunto de enlaces dentro de una lista.

<footer>
  <p>&copy; 2018 Línea de Código</p>
  <ul>
    <li><a href="/acerca-de">Acerca de</a></li>
    <li><a href="/conectar">Conectar</a></li>
    <li><a href="/rrss">Redes Sociales</a></li>
  </ul>
</footer>

Hay que notar que hemos utilizado la entidad &copy; para poder crear el símbolo del copyright y por otro lado hemos utilizado una lista desordenada mediante el elemento ul.

De esta forma tan sencilla y mediante el elemento footer hemos creado nuestro pie de página en HTML5.

Código Fuente

Descárgate el código fuente de Pie de página en HTML5
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre HTML5

Disfruta también de nuestros artículos sobre HTML5 en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML5

¿Te atreves a probar tus habilidades y conocimiento en HTML5 con nuestro test?

Test HTML5
Suscribir
Notificar de
guest
0 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios