TOC

This article is currently in the process of being translated into Spanish (~93% done).

Semantic HTML5 section tags:

The header tag

El elemento <header> es un poco ambiguo ya que puede ser usado de diferentes maneras. primero necesitas saber que el elemento <header> no introduce una nueva sección - es la cabeza (head) de una sección existente. segundo no debes confundirlo con el elemento <head> - son dos elementos diferentes!

Here is what it looks like:

<header>...</header>

Entonces puedes tener dos elementos <header> en la misma pagina?obvio que puedes! Imagina que tienes tres publicaciones de un blog en una misma pagina; bueno, cada una de ellas puede tener su propia sección de <header>, tienes múltiples artículos en una pagina? todos ellos tienen su propio elemento <header>.

Usando el articulo-harina (flour-article): esto significa que el elemento <div> que previamente usamos para dividir el titulo y autor del resto del contenido puede ser reemplazado por el elemento <header>.

<article>
	<header>
		<h1>All About Flour</h1>
		<p class="teaser">Wheat flour is the backbone of the baked goods we love.</p>
		<p class="byline">by Jane Doe</p> 
	</header>

	<div id="content">
		<h2>The Two Types of Wheat</h2>
…

Cuando usas el elemento <div> siempre tienes que tener como mínimo una etiqueta de titulo (<h1> - <h6>). tambien puedes usar el elemento <hgroup>, que explicare mas adelante. por ultimo también puedes tener otro contenido relevante para el "header" así como firma, fecha de publicación, tabla de contenidos, etc.

What you have learned

  • <header> is a new semantic HTML5 element
  • The <header> is used inside a section (not necessarily at the top of your document)
  • Therefore, you can have multiple <header> in the same document
This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!