Artistas Digitales

Los elementos HEADER y FOOTER en HTML5

Los elementos HEADER y FOOTER en HTML5

Los elementos HEADER y FOOTER de HTML5 son nuevos elementos agregados para ayudar a diseñadores a definir una mejor estructura semántica de sus sitios web. De acuerdo con la especificación HTML5. El elemento HEADER representa un grupo de navegación introductora o herramientas de navegación para el sitio. Y el elemento FOOTER representa un pie de pagina  para la sección de contenido antecesora mas cercana ala raíz delcontenido. Usualmente esta contiene información acerca de la sección, información del autor, documentos relacionados, área de derechos de autor, publicaciones recientes, datos de contacto, información en redes sociales etcétera.

Caracteristicas de estos elementos:

  • Los elementos HEADER y FOOTER NO son elementos para dividir o separar contenido.
  • NO crean nuevas secciones.
  • Ninguna cabecera dentro de ellas crea o implica nuevas secciones.

¿Cuantas HEADER y FOOTER puede tener mi pagina?

La respuesta correcta a esta pregunta es “Todas las que necesites”.

Un error muy común que los diseñadores web cometen cuando utilizan los elementos de <footer> es el supuesto de que se trata de elementos de diseño que definen forzosamente una cabecera y pie de pagina. Pero eso no es precisamente cierto. De hecho, una página web puede tener un encabezado y pie de página en cada sección.

Por ejemplo, una página web puede tener un artículo, las secciones  a un lado y una sección sin definir. Cada uno de estos elementos puede tener un encabezado y un pie de página. Y aun asi puede haber una seccion <header> y footer general.

Puede incluir una cabecera y un elemento FOOTER en cualquiera de los elementos de seccionamiento, incluyendo

  • <body>
  • <article>
  • <aside>
  • <section>
  • <nav>

Lo que va dentro de un encabezado o elemento PIE DE PÁGINA

No hay elementos que se requieren en el encabezado y pie, pero hay algunas cosas que normalmente se encuentran en ellos.

El PCB contiene típicamente:

  • Al menos un elemento partida (H1-H6 y HGROUP)
  • Logo o icono
  • Por línea o la autoría de información

Pero nada de esto se requiere información. Puede definir un encabezado con el contenido de lo que sientes es parte necesaria y semánticamente de la cabecera de la sección o la página.

El PIE generalmente contiene:

  • La información de copyright
  • Mapa del sitio
  • Información de contacto
  • Volver a los enlaces de arriba
  • Por línea o la autoría de información
  • Documentos relacionados

Y, como el PCB, nada de esto se requiere información. Puede definir un pie de página con cualquier contenido que usted siente es parte necesaria y semánticamente del pie de página de esa sección o la página.
Estilos y el encabezado y elementos FOOTER

El PCB y los elementos FOOTER no hacer cambios en el estilo de la página web. Una cabecera no se mostrará automáticamente en la parte superior de la página y un pie de página no se mostrará automáticamente en la parte inferior de la página. Estos elementos son semántica para representar ciertas áreas de la página o sección.

Esto significa que usted necesita para proporcionar estilos de la cabecera y los elementos de pie de página si desea que tenga una mirada diferente a ellos. El estilo que siempre se debe aplicar es la siguiente:

cabecera, pie de página {display: block;}

Esto ayuda a los navegadores que no soportan estos elementos del HTML para mostrar el mismo que otros navegadores, más compatibles con hacer. También es una buena idea utilizar el HTML5Shiv para ayudar a Internet Explorer 8 e inferior reconocer estos elementos. Usted lo hace mediante la adición de:


al jefe de sus documentos de HTML5. Este script sólo se ejecuta si el navegador es más bajo que IE9 (los comentarios condicionales ver con eso) y agrega los diversos elementos nuevos HTML5 a la DOM para que pueda aplicar CSS a ellos.
Tags relacionados con HTML5.

¿Te gusto el artículo? Compartelo!!

Acerca del autor

Dejar un comentario