Artículos
HTML5

Cabecera de documento en HTML5

27/Oct/2018

Semánticamente el uso del elemento header nos permite definir una cabecera de documento en HTML5. De esta forma podemos identificar cuales son los elementos introductorios de la página.

En una cabecera de documento en HTML5 nos podemos encontrar elementos como el título, un menú de navegación, logo y en algunos casos un formulario de búsqueda. Si bien esto no está reglado estos son los elementos más comunes.

El elemento header es un elemento agrupador, por lo cual no tiene una representación explícita y su contenido es texto u otro elemento. El elemento header se utilizaría de la siguiente forma:

<header>
...
</header>

Este elemento lo encontraremos, normalmente detrás del elemento body de las página webs, cuando este se esté utilizando para representar una cabecera de documento en HTML5.

Es importante que diferenciemos entre los que es la cabecera del documento definida mediante el elemento head> y la cabecera representada mediante el elemento header. En el primer caso utilizamos el elemento head> para definir la metainformación de la página así como un área para enlazar a nuestros scripts u hojas de estilo. Por otro lado el elemento header nos permite definir la cabecera del documento, aquella que tiene una representación visual y por lo tanto es renderizable.

Para completarlo, vamos a insertar dentro del elemento header> un título y un logo. Para ello nos apoyamos en los elementos h1 y img.

<header>
<h1>Cabecera de documento HTML5</h1>
<img src="logo.jpg" alt="Logo Línea de Código" />

</header>

De esta manera ya tenemos identificado semánticamente qué representa el título e imagen representativa de la página dentro de nuestra cabecera.

Ya habéis visto lo sencillo que es definir una cabecera de documento en HTML5.

Código Fuente

Descárgate el código fuente de Cabecera de documento en HTML5
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre HTML5

Disfruta también de nuestros artículos sobre HTML5 en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML5

¿Te atreves a probar tus habilidades y conocimiento en HTML5 con nuestro test?

Test HTML5
Suscribir
Notificar de
guest
1 Comentario
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios