HTML5 header Element
header element is used to semantically mark the header section of a
page, or of individual parts of the page. For instance, a page containing a list of blog posts
or articles may have a header section for the whole page, and a header section for each blog post / article.
Here is a diagram illustrating where the header section of a HTML5 page is normally located:
|The header section of an HTML5 page.|
Here is how it could look in HTML code:
<html> <body> <header> <div> Logo, logo text, top navigation links etc. </div> </header> </body> </html>
Remember that the
header element is a semantic element. It does not have any special look.
You can still style it using CSS though, as you can with a
Also remember, that being a semantic element you do not have to put a
into your page. The
header element is intended to be used by future intelligent browsers (maybe)
and web crawlers etc. but there is no guarantee about how these software components will use these elements.
Only the future will tell.
header Elements in article Elements
article element can also have a header section, which could be enclosed in a
element too. Here is a diagram illustrating
article elements with header sections:
|The header section of article elements in an HTML5 page.|
Here is how it could look in HTML5 code:
<html> <body> <header> <div> Logo, logo text, top navigation links etc. </div> </header> <article> <header> Title, author, rating buttons etc. related to this article. </header> <p> Article text... </p> </article> </body> </html>