Plantillas de pie de página html gratuitas
La etiqueta de inicio de un elemento body puede omitirse si el elemento está vacío, o si lo primero dentro del elemento body no es un carácter de espacio o un comentario, excepto si lo primero dentro del elemento body es un elemento de script o de estilo.
Dado que <head/> debe ir en primer lugar, y sólo puede contener elementos (y no texto directo), todos los elementos aptos para <head/> pasarán a formar parte de <head/> implícito, hasta el primer texto perdido o elemento específico de <body/>. En ese momento, todos los elementos y nodos de texto restantes se colocarán en <body/>.
En este caso, el elemento <header/> no es apto para <head/> (es contenido de flujo), la etiqueta <body> se colocará inmediatamente antes. En otras palabras, el documento será entendido por el navegador como lo siguiente:
Así, el <header/> o el <footer/> se utilizarán correctamente en este contexto. Pues serán prácticamente equivalentes al primer fragmento. Pero esto provocará un elemento <body/> adicional en medio de un <body/> que no es válido.
Veo lo que estás tratando de hacer, estás tratando de usar la etiqueta <body> como el contenedor para el contenido principal de la página. En su lugar, utiliza la etiqueta <main>, como se especifica en la especificación HTML5. Yo uso este diseño:
¿Qué contiene normalmente el pie de página de la etiqueta?
Este método utiliza un “truco” colocando un pseudo-elemento ::after en el cuerpo, y configurándolo para que tenga la altura exacta del pie de página, de modo que ocupará exactamente el mismo espacio que el pie de página, de modo que cuando el pie de página se posicione de forma absoluta sobre él, parecerá que el pie de página está realmente ocupando espacio y eliminará los efectos negativos de su posicionamiento absoluto (por ejemplo, pasar por encima del contenido del cuerpo)
Esa es la única modificación que tienes que hacer en el HTML, añadir ese div con la clase “allButFooter”. Lo hice con todas las páginas, las que eran tan cortas que sabía que el pie de página no se pegaría al fondo, y también las páginas lo suficientemente largas como para saber que tenía que hacer scroll. Hice esto, para poder ver que funciona bien en el caso de que el contenido de una página sea dinámico.
Eso es todo lo que hice, y me funcionó perfectamente. No lo he probado en todos los navegadores, sólo en Firefox, Chrome y Edge, y los resultados fueron los que quería. El pie de página se pega a la parte inferior, y no hay que meterse con el z-index, la posición o cualquier otra propiedad. La posición de cada elemento de mi documento era la posición por defecto, no la cambié a absoluta ni fija ni nada.
Pie de página simple html
Dado que representa la parte central de tu página -la “carne” si quieres- y que los encabezados y los pies de página se consideran contenido adyacente, yo diría que los encabezados y los pies de página no deberían ser elementos hijo.
La especificación sólo menciona que main no puede anidarse en ninguno de los elementos mencionados, pero no dice nada sobre lo contrario. Yo diría que el encabezado y el pie de página deberían estar completamente separados del main en la mayoría de los casos. El main contiene el “contenido principal”, y el encabezado y el pie de página suelen estar separados de él.
Plantilla html de pie de página
Cuando estás construyendo una página web, puedes decidir que quieres añadir un pie de página. Por ejemplo, digamos que estás construyendo un sitio para una cafetería local. Puede que quieras añadir un pie de página con el nombre, la información de contacto y el horario de apertura de la cafetería.
Ahí es donde entra en juego la etiqueta HTML <footer>. La etiqueta <footer> se utiliza para crear un pie de página en HTML. Las etiquetas <footer> suelen contener otras etiquetas que ayudan a la navegación, identifican al autor de una página, etc.
En HTML, hay una amplia gama de etiquetas que se utilizan para definir el diseño de una página y sus elementos. Estas etiquetas ayudan a los desarrolladores a simplificar sus páginas web porque hacen más clara la estructura de una página web.
La etiqueta <footer> en HTML define un pie de página para un documento o una sección de una página web. Los pies de página suelen contener el autor de un documento, información de contacto y enlaces importantes. Un pie de página al final de una sección incluirá cualquier información final relacionada con el contenido de esa sección.
Puede utilizar la etiqueta HTML <footer> varias veces en un documento, dependiendo de la estructura de su página. Sin embargo, sólo puede utilizarse en la etiqueta <body>. No se puede colocar una etiqueta <footer> dentro de un <header>, un <address>, u otra etiqueta <footer>.