How to use the header semantic element
In this post, the use of the semantic element header will be explained, which originated in version 5 of the HTML and fills a gap that existed in the headers.
How to use the header semantic element?
The <header> tag also falls to the obvious HTML5 tag-team.
I also believe that this is one of the purposes of semantic HTML, to make the visualization of tags very obvious for programmers to make the best choices.
So we’ll use the header when we’re going to represent a header.
This header can be from a website, containing a <nav> that will represent the navigation bar, and also a company/brand logo.
But of course, you can also insert the header for some section that has a header.
For example a form or a table with data.
Using header in practice:
When we use the <header> tag, we must pay attention to it being on top of the context that was inserted, after all, it is a header.
So let’s exemplify the classic, and perhaps most used, case of the page header.
HTML Example:
<header>
<a src="/" id="logo"><img src="logo.png" /></a>
<nav>
<li><a href="#">Home</a></li>
<li><a href="#">Produtos</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
</nav>
</header>
As the first element inside the <body>, and before the <main> tag.
The header element in this case has a logo and also a navigation bar, using the nav element to follow the semantic HTML concepts.
So this would be a perfect example of its use, positioned to be the website header, a fundamental part of most web projects.
Conclusion
In this post, we saw the use of the HTML5 header semantic element.
This tag can be inserted for headers, which can be either the top of the website with the company logo or also a header of some other element.
And that’s it for today, until the next post!
Also check our YouTube channel by clicking here!
