Cómo crear un footer con HTML y CSS

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, ya que 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 en tu página web.

Crear un footer con HTML y CSS

A continuación te contamos cómo crear un footer en HTML paso a paso.

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 para crear un footer en HTML 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.
• En el proceso de crear un footer con HTML y CSS, debes saber que estos elementos, en la mayoría de páginas web, tienen 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 para crear un footer con HTML y CSS es crear los bloques dentro de tu footer HTML. Para ello, puedes crear dos elementos div con el contenido de cada bloque. Sin embargo, te sugerimos darle una etiqueta en footer 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, como parte del proceso de crear un footer con HTML y CSS, para que los enlaces que agregas al footer se abran en una nueva pestaña del navegador, recuerda utilizar la función target="_blank". 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 darle estilo a tu footer en CSS, te recomendamos crear un archivo CSS nuevo que se llame footer, donde crearás y diseñarás 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ñadirle un color de fondo a nuestro elemento footer en CSS insertando la propiedad background-color en el selector de clase .footer.
• Para darle un estilo a los enlaces que tenemos dentro del proceso de crear un footer con HTML y CSS, debemos seleccionarlos usando el selector de clase de la etiqueta .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 en CSS. 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 nuestra formación intensiva, e 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!