The best HTML element to represent and show header or introductory content to the user is the header HTML element tag.
For example, the header HTML elements tag is used to add header parts of a website like nav (navigation element), h1 (heading level 1 element), etc. HTML element tags that are seen by the user as introductory content on the website.
The header HTML element tag can be written like this,
<!DOCTYPE html>
<!-- Usage of the 'header' HTML element tag -->
<html>
<body>
<!-- 'header' HTML element tag -->
<header>
<nav>
<li>Home</li>
<li>About</li>
</nav>
<h1>Hello World</h1>
</header>
</body>
</html>
As you see from the above code we have used the nav (navigation element tag) and h1 (heading level 1 tag) HTML tags inside the header HTML element tag that are introductory content when a user visits the website.
Some common use cases for the header HTML element tags are to hold:
- Navigation links
- Top-level Headings (h1)
- Logo of the website
- A search bar
- A menu Icon
- Hero image
etc. and everything that is introductory to the user who visits the website.
See the above code live in JSBin.
That's all 😃!