HTML header

With an HTML header tag you can create your own header section. You can place many elements inside the HTML header such as heading, image or logo, link, etc.

We have a header example, after seeing which you will know how you can use the header tag.

<header class=”my-header”>
	<h1> header tag html</h1>
	<p> html header example</p>
	<img src=” my-img.png” alt=”myimg” >
</header>


.my-header {
	background-color: red;
}

If you want to create a menu navigation bar for your website, you can follow the easy header example given below for that.

<header class=”my-header”>
	<h1> html header example (menu navigation)</h1>
	<p>
		<a href=”#”>Menu 1</a> |

		<a href=”#”>Menu 2</a> |

		<a href=”#”>Menu 3</a> |

		<a href=”#”>Menu 4</a> |

		<a href=”#”>Menu 5</a> |

		<a href=”#”>Menu 6</a> |

		<a href=”#”>Menu 7</a>
	</p>
</header>


.my-header {
	background-color: red;
	color:#fff;
}

.my-header a{
	color: #fff;            
}

HTML Header Navigation Bar

If you want to create a Navigation Bar inside the header, for that you will have to see the header example given below.

<header>
	<div class=”my_menu”>
		<a href=”#”>Menu 1</a>
		<a href=”#”>Menu 2</a>
		<a href=”#”>Menu 3</a>
		<a href=”#”>Menu 4</a>
		<a href=”#”>Menu 5</a>
		<a href=”#”>Menu 6</a>
		<a href=”#”>Menu 7</a>
	</div>
</header>


.my_menu a {
	padding: 20px;
	text-decoration: none;
	color: #ffffff;
	font-size: 20px;
	float: left;
}

.my_menu {
	overflow: hidden;
}

header{
	background-color: red;            
}

HTML Header Navigation Bar With List Tag

If you want to make your Navigation Bar with List Tag, then for that you will have to see the example given below.

<header>
	<ul class=”my-menu”>
		<li><a href=”#”>Menu 1</a></li>
		<li><a href=”#”>Menu 2</a></li>
		<li><a href=”#”>Menu 3</a></li>
		<li><a href=”#”>Menu 4</a></li>
		<li><a href=”#”>Menu 5</a></li>
		<li><a href=”#”>Menu 6</a></li>
		<li><a href=”#”>Menu 7</a></li>
	</ul>            
</header>


ul.my-menu {
	list-style-type: none;
	margin: 0;
	padding: 0;

}

.my-menu ul, li {
	display: inline;
}

header{
	background-color: red;
}

ul.my-menu {
	padding: 20px;
}

ul.my-menu li a {
	padding: 20px;
	color: #fff;
	font-size: 20px;
	text-decoration: none;
	border-right:1px solid #fff;
}

Browser Support

  • Edge
  • Firefox
  • Internet Explorer
  • Opera
  • Safari
  • Chrome

Frequently Asked Questions

We have answers to some questions that people search on the Internet every day. Let us know what are those questions and what are their answers.

Where is header in HTML?

The <header> tag is a new element of HTML5, which is used to create a separate section( header of a website).

What is header and footer in HTML?

In simple language, the header is the head of the website and the footer is the foot, which is located at the bottom of the page.

What does P mean in HTML?

P <p> means paragraph, which shows the content.

What are the 3 types of CSS?

There are 3 types of CSS like Inline CSS, Internal CSS, External CSS, etc.

What are the 4 basic HTML tags?

The 4 tags of HTML that are first used to create a web page. <html>, <head>, <title> and <body>. Without these tags you cannot create your web page.

Note: All the examples shown in this article, we have tested before, you can use these examples without any difficulty.

Related: 5 Easiest Ways Of HTML Center For Text And Image