❮❮ PREV NEXT ❯❯

HTML - Header Tag

The header tag or <header> tag in HTML is used to represent the topmost portion of the webpage and usually contains the Headings(i.e. From <h1> to <h6>) or logos.

Why do we need Header Tag in HTML?

So far we have used <div> tags to represent headers in HTML. However, with Semantic tags, we got the Header tag that represents the Headers.

Let us understand header with the below example.

Example :

<html>
<body>
	<header>
		<h1>My Header</h1>
	</header>	
</body>
</html>

Output :

So, if you look at the above code. The header tag represents the header in the HTML page.

<header>
	<h1>My Header</h1>
</header>

Now, the header tag is not just restricted to one header tag in a webpage. In simple words we can have multiple header tags in an HTML file.

Using multiple header tags in an HTML page

Example :

<html>
<body>		
	<section>
		<header>
			<h1>A Header for section</h1>
		</header>
		
		<h1>First Paragraph</h1>
    	<p>This is the first paragraph</p>
    </section>
    	
	<article>
		<header>
			<h1>A Header for article</h1>
		</header>
			
		<h1>Second Paragraph</h1>
    	<p>This is the second paragraph</p>
    </article>	
</body>
</html>

Output :

So, if you look the above code, we have two header tags in the HTML page.

The first header tag is within the <section> tag.

<section>
	<header>
		<h1>A Header for section</h1>
	</header>

	<h1>First Paragraph</h1>
	<p>This is the first paragraph</p>
</section>

And the second header tag is within the <article> tag.

<article>
	<header>
		<h1>A Header for article</h1>
	</header>

	<h1>Second Paragraph</h1>
	<p>This is the second paragraph</p>
</article>

❮❮ PREV NEXT ❯❯