👩‍💻 ¿Qué son header y footer en el lenguaje HTML? | Crehana para empresas
Header y footer: Conoce la importancia de cada uno en HTML

Header y footer: Conoce la importancia de cada uno en HTML

Última actualización 5 de Marzo del 2021Tiempo de lectura: 7 min.

María Luisa Arriola

Dentro de las páginas web, existen diferentes estilos, categorías y contenidos. Sin embargo, en todas ellas hay dos elementos invariables. Claro, existen otros cuantos más, pero por el momento hablaremos de dos: header y footer.

¿Los has escuchado? Apostamos que sí. Por eso te detallaremos qué son y para qué sirven las etiquetas footer y header de HTML5 y sus funciones. 

Si aún tienes dudas sobre qué son las etiquetas HTML, revisa esta guía sobre el lenguaje de programación HTML y CSS.

Ahora sí ¡Veamos qué son el header y footer!

Índice

  1. ¿Qué es header?
  2. Elementos de header
  3. Funciones de header
  4. Ejemplos de header
  5. Maquetación header
  6. ¿Qué es footer?
  7. Elementos de footer
  8. Funciones de footer
  9. Ejemplos de footer

¿Qué es header y footer en HTML5?

Fuente: Cengage Learning

La etiqueta header, o cabecera, es una de varias etiquetas de documento nuevas introducidas con HTML5. Es usada para clasificar el contenido que aparece en la parte superior de cada página de tu sitio web: el logo (y elementos que lo conforman o son parte de tu identidad, tal como un slogan), el menú de navegación, el buscador de tu sitio y demás elementos que explicaremos a detalle más adelante.

En la mayoría de los casos, el header HTML es el elemento mejor posicionado dentro de un sitio web porque es el que tiene mayor visibilidad. Además, es importante destacar que header HTML5 surge a partir de esta última versión de 2014.

Asimismo, por lo regular, la etiqueta header se usa para los encabezados de los sitios web. Sin embargo, no sirve únicamente para esta función; también es posible usarla para definir el encabezado de cualquier contenedor y del contenido donde se expone.

Es decir, si tenemos una etiqueta <div> en el contenido y esta capa tiene algún tipo de información, podemos darle un encabezado con esta misma etiqueta, pero esto lo explicaremos más adelante en las funciones de header.

Por el momento, te daremos a conocer algunos elementos de header.

banner

Los elementos usados en la etiqueta header HTML5 son diversos y a continuación te contamos de algunos de acuerdo con su función:

Elementos de identidad

Dentro de este rubro se encuentran elementos tales como:

  • Logo
  • Nombre
  • Eslogan

En resumen, algunas características de branding en cuanto a identidad visual se refieren. Por tal motivo, es importante detenernos en esta etiqueta no sólo por su forma, sino también por su contenido con relación a la identidad de tu sitio.

Con respecto a su ubicación, puedes colocarlos en el centro, por encima del menú. De igual manera al centro, pero alineados con el menú o quizás a la izquierda o a la derecha (que es lo más usual) en el header.

Asimismo, no importando en donde ubiques el logo, recuerda enlazarlo con el home de tu sitio. Ten en mente siempre la UX para que utilices la etiqueta header con base en lo que te guste a tu audiencia y lo que mejor te funcione.

Menú

Este es un elemento imprescindible en el header, ya que es la guía al usuario en su navegación por tu sitio. Puedes optar por un único menú o uno doble. Esto dependerá si tu web tiene muchas secciones o si tu e-commerce tiene infinitas categorías.

Pero en caso contrario, te recomendamos elegir un menú simple para que las personas que visitan tu web puedan navegar libremente.

Redes sociales

Añadir esto ya no es una opción; la única opción es saber si lo agregas en el header, en el footer o en el header y footer.  Ahora, con los diseños responsive es común que los usuarios recurran a esos dos elementos para encontrar tus redes.

Botones destacados

Si quieres destacar algún servicio o quieres dirigir al lector a una landing page específica (registrarse a una plataforma o pedir presupuesto de un servicio), esta opción podría ir en el header.  

Sin embargo, te recomendamos que, si ya tienes muchos elementos en el header, lo ideal es no sobrecargarlo.

Buscador

Es funcional para que tu audiencia encuentre algo en tu sitio web de manera fácil y rápida, aunque es opcional que vaya en el header.

Otros elementos para tener en cuenta en el header son:

  • Idioma / país: si tu audiencia vive en otros países, lo recomendable es agregar un selector de idiomas de dichos lugares.
  • Elementos referentes a una tienda online: Ahora que si tienes una e-commerce o tienda online deberás añadir un carrito, login o sign up, wish list, etc.

 

¿Te interesa el Desarrollo Front End? Revisa los cursos que tenemos para ti

 

Header y footer: Qué es e HTML5

Fuente: Pexels

Bien, ya vimos que debería ir en el header. Ahora te diremos algunos usos y funciones de esta etiqueta.

Encabezado de página o sección

El elemento header se utiliza para definir una sección de encabezado, pero con relación al elemento que lo contiene. Es decir, se puede usar como encabezado de una página completa (el uso más común), pero también como encabezado de un artículo o cualquier otra parte del contenido de la página. Esos son algunos de los usos en header HTML.

Como encabezado de página

Normalmente, cuando el elemento header se utiliza como encabezado de página, contiene el título o el logotipo del sitio (o ambos) y la navegación del sitio principal. Esto a veces se conoce como el "encabezado".

En un solo documento HTML puede haber varios header; siempre que estén relacionados con el elemento que lo contiene (por lo que ningún elemento debe contener directamente dos elementos header).

Ejemplos de la etiqueta Header HTML

Te mostraremos un ejemplo para que ubiques, en tu código fuente, la etiqueta header:

<header>
                <h1>TITULO DE LA WEB</h1>
                <h2>Breve descripción de la página web</h2>
                <ul>
                               <li><a href="inicio.html">Inicio</a></li>
                               <li><a href="seccionuno.html">Una Sección</a></li>
                               <li><a href="secciontres.html">Otra Sección</a></li>
                </ul>
</header>

 

Ahora, te daremos un código para poder obtener un header fijo, es decir, que permanezca mientras navegas y no lo pierdas si requieres algo. Veámoslo.                                         

Maquetación header

Ahora, veamos cómo maquetear un header fijo desde cero. Con ello deberás copiar el siguiente texto y poner especial atención en el apartado “main-header”.

<!DOCTYPE html>
<html lang="es">
<head>
                <meta charset="utf-8">
                <title> HEADER FIJO</title>
 
        <link rel="stylesheet" href="style.css">
</head>
 
<body>
               
                <header id="main-header">
                              
                               <a id="logo-header" href="#">
                                               <span class="site-name">Crehana (Por ejemplo 😉)</span>
                                               <span class="site-desc"> Cursos /Blog / Recursos </span>
                               </a> <!-- / #logo-header -->
 
                               <nav>
                                               <ul>
                                                               <li><a href="#">Inicio</a></li>
                                                               <li><a href="#">Acerca de</a></li>
                                                               <li><a href="#">Contacto</a></li>
                                               </ul>
                               </nav><!-- / nav -->
 
                </header><!-- / #main-header -->

 

Ahora, el siguiente paso será agregar en main header un código CSS. Recordemos que HTML da el formato mientras que en CSS puedes diseñar y dar estilo al resultado. En el “main header” deberás colocar lo siguiente para tener un header fijo y ¡Voilá!

 

#main-header {
                background: #333;
                color: white;
                height: 80px;
               
                width: 100%; /* hacemos que la cabecera ocupe el ancho completo de la página */
                left: 0; /* Posicionamos la cabecera al lado izquierdo */
                top: 0; /* Posicionamos la cabecera pegada arriba */
                position: fixed; /* Hacemos que la cabecera tenga una posición fija */

 

Como lo mencionamos antes, la etiqueta footer HTML es una etiqueta estructural que se utiliza para identificar el pie de página de un sitio, documento, artículo o sección. Surge a partir del footer HTML5 y aparece justo con esa versión del lenguaje de etiquetas, como lo mencionamos con header.

El footer normalmente contiene información sobre derechos de autor y autoría o elementos de navegación pertenecientes al contenido principal. Pero esos elementos los veremos con más precisión en el siguiente apartado. De igual forma, se utiliza para representar algunos enlaces relacionados con esos datos.

Header y footer: Introducción a HTML

Fuente: Pexels

Estos son algunos elementos, y también consideraciones que son útiles en tu footer. Recuerda que para elegir, debes tomar en cuenta tus objetivos y así decidir cuál va mejor en función de tus necesidades (claro los textos legales así como los enlaces de navegación no son opcionales, ¡eh!)

Textos legales

Esto es obligatorio desde que entró en vigor el nuevo reglamento de protección de datos, aviso de privacidad, la propiedad intelectual o Copyright en el footer, así como el año actual, los datos de contacto, o el aviso de políticas de privacidad.

De igual manera, la actualización de estos datos brinda calidad al sitio web y es un inicio hacia el camino de la optimización en sitios web.

Enlaces de navegación

En el footer puedes, y debes, incluir enlaces hacia otros sitios de tu web. Por lo que así tu audiencia podrá visitar otras páginas relevantes de tu sitio web.

Posts / productos

Este nos parece interesante cuando tu página es un blog o revista, donde puedes añadir un widget en el footer para mostrar tus últimos posts publicados o productos de tu tienda que quieres destacar.

Mapa de sitio

Este resulta clave para el SEO y la usabilidad. Se trata de un archivo que muestra a Google información sobre las URLs y otros contenidos web.

Otros elementos a tener en cuenta para incluir en el footer son:

  • Contacto
  • Créditos del template, layout o diseñador (si éste último fuera el caso)
  • Suscripción al newsletter (si cuentas con la opción de emailing)
  • Banners

El lugar obvio para el elemento footer es en la parte inferior de una página web. La mayoría de los sitios tienen un pie de página (con derechos de autor, contacto y otra información).

Ahora, gracias a HTML5, puedes crearlo con el footer HTML con significado semántico en lugar de un <div> sin significado.

NOTA: Con significado semántico nos referimos al significado o información adicional la cual brinda los elementos o etiquetas del lenguaje, información que define o describe el contenido, función o secciones que contienen. Esta información es lo que permite que un documento se pueda identificar y rastrear de mejor forma en los buscadores.

Aunado a lo anterior, puedes utilizar footer para definir un pie de página para cualquier sección de contenido, no solo para la página en su conjunto. (Así como explicamos antes con el elemento header, también funciona de esta manera).

Lo importante a recordar es que footer HTML5 está relacionado con su elemento padre. Si está dentro de un elemento <article>, entonces es el pie de página de ese artículo. Si es el último elemento dentro del elemento <body>, entonces es el pie de página de la página (disculpa la redundancia pero es para que no haya duda 😱) como un todo.

Crehana Premium

 

Ejemplo deFooter HTML5

<footer>
            <ul>
                    <li><a href="aviso-privacidad.html">Aviso de privacidad</a></li>
                    <li><a href="contacto.html">Contacto</a></li>
            </ul>
</footer>

 

De ahora en adelante, tendrás una visión más clara de lo que las etiquetas header y footer HTML5 te ofrecen.

Recapitulando, el header y el footer son dos elementos de un sitio web que cuanto más estructurados estén, el usuario mejor podrá navegar mejor. Lo que se traduce en una mayor permanencia en tu página, porque encontrarán fácilmente lo que buscan y además mejorarás tu posicionamiento SEO.

Si deseas conocer más al respecto te invitamos a realizar el Curso online de WordPress: Crea tus propias plantillas con HTML5, una capacitación gratuita impartida por Sergio Agamez. Aquí podrás practicar y saber cómo insertar header y footer en todas las páginas o cómo hacer un footer o header y muchas más posibilidades con estas etiquetas.

Así que lleva la teoría a la práctica para que te vuelvas un pro en header y footer en HTML5 😉.

También podría interesarte