Cómo crear un footer con HTML y CSS

Autor: | Última modificación: 16 de junio de 2022 | Tiempo de Lectura: 4 minutos
Temas en este post: ,

El elemento footer de una página web es el cierre vertical de tu contenido. Es decir, es lo último que el visitante verá una vez termina su scroll por tu página web. Este elemento es importante porque tiende a contener la información extra que el usuario puede estar buscando, pero que no pertenece en otro lugar. Por ello, en este post te enseñaremos cómo crear un footer con HTML y CSS para que lo puedas incorporar a tu página web.

Crear un footer con HTML y CSS

Crear el footer con HTML

Para crear un footer con HTML y CSS primero debemos insertar en nuestro archivo HTML el elemento <footer>. De entrada, le agregaremos un atributo de clase porque sabemos que necesitaremos estilizarlo con CSS en el futuro. Los atributos de clase nos permiten darle un nombre al elemento para, posteriormente, aplicarle estilos usando el selector básico de clase. En nuestro caso le hemos dado el nombre de footer. Aunque sea poco original, este nombre nos describe el elemento de una manera fácil y corta y eso es lo que necesitamos en un selector.

El footer que crearemos en este post, así como la mayoría de footers de páginas web, tiene dos bloques. Un bloque es para las redes sociales y otro es para los enlaces a otras páginas web relevantes. Estos bloques los puedes reemplazar por lo que quieras: información de contacto, direcciones y demás. Los dos bloques de nuestro footer se verán como una sola columna en la versión para dispositivos móviles, pero pasarán a ser dos columnas (cada bloque a un lado) en la versión de dispositivos más anchos. Conoce cómo hacer esto en nuestro post sobre media queries en CSS.

El siguiente paso es crear los bloques dentro de tu footer. Para ello, puedes crear dos elementos div con el contenido de cada bloque. Sin embargo, te sugerimos darle una etiqueta en HTML semántico para que tanto tú como el navegador sepáis el propósito de estos bloques. Como no existe ninguna etiqueta para redes o enlaces relacionados, te proponemos usar la etiqueta <aside>, pues los bloques del footer son un elemento que tiene cierta relación con el contenido principal, pero no es imprescindible. Esta etiqueta también se usa mucho en los ads de una página web.

Dentro de estos dos bloques puedes agregar la etiqueta <ul> o unordered list, ya que los elementos de dentro son una lista de enlaces, sean a redes sociales o a otras páginas web. Como siempre, te recomendamos darle a estas nuevas etiquetas un atributo de clase para hacer el proceso de estilizarlas más sencillo.

Además, para que los enlaces que agregas al footer se abran en una nueva pestaña del navegador, recuerda utilizar la función target="_blank". Recuerda que siempre que añadas esta función también puedes añadir características de la relación entre tu página y la externa usando "rel=noreferrer noopener". Esto le dirá al navegador que no queremos que el enlace nos referencie ni tenga un enlace de vuelta a nuestras páginas web. Te recomendamos hacer esto por temas de seguridad.

Dar estilo a tu footer con CSS

Has completado el primer paso para crear un footer con HTML y CSS; ahora, es el momento de darle estilo.

Antes de empezar a dar estilo a tu footer, te recomendamos crear un archivo CSS nuevo que se llame footer en donde crees y diseñes este elemento. En KeepCoding siempre recomendamos dividir el código de tu página web en las distintas secciones, porque así será más fácil revisar tu programación cuando llegue el momento. Siempre será más sencillo entender qué está pasando en distintos archivos con veinte líneas de código que en un archivo maestro inmenso.

Podemos añadir un color de fondo a nuestro elemento footer insertando la propiedad background-color en el selector de clase .footer.

Para darle un estilo a los enlaces que tenemos dentro, debemos seleccionarlos usando el selector de clase .footer y el selector de tipo a, separados por un espacio. Como puedes leer en nuestro post sobre selectores múltiples, separar dos selectores por un espacio se usa para seleccionar un elemento que es descendiente de otro. Entonces, al escribir «.footer a» estamos seleccionando los enlaces de nuestro footer. Con esto, podemos insertar las propiedades que queramos para nuestros textos. Puedes usar la propiedad text-decoration:none para eliminar el subrayado y las propiedades color y font-size para definir su color y tamaño, respectivamente.

¿Cuál es el siguiente paso?

Después de leer este post sabes exactamente qué necesitas hacer para crear un footer con HTML y CSS. ¡Es hora de que pongas este conocimiento en práctica! En KeepCoding sabemos que más que crear un footer quieres crear tu propia página web completa. Por ello, te invitamos a nuestro bootcamp intensivo Desarrollo Web Full Stack Bootcamp, donde continuarás aprendiendo mucho más acerca de los programas de desarrollo web y, en pocos meses, te convertirás en un experto. Al final, crearás y diseñarás tu propia página web con los conocimientos aprendidos en el curso. ¿A qué esperas para cumplir tu sueño de ser un desarrollador web profesional? ¡Solicita información e inscríbete ya!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!