HTML Header Tag
The HTML header tag <header> is used to define a container for introductory content or navigation links that typically appear at the top of a web page. The header can contain other elements such as headings, paragraphs, images, logos, and other types of content.
Syntax
1<header> 2 <!-- header content goes here --> 3</header>
The <header> tag is an HTML5 element, and it should be used as a container for the header content only once in a web page.
Example 1 - Basic Header
In this example, we create a basic header with a heading and a paragraph:
1<!DOCTYPE html> 2<html> 3<head> 4 <title>Header Example</title> 5</head> 6<body> 7 <header> 8 <h1>Welcome to my Website</h1> 9 <p>Explore the world with us!</p> 10 </header> 11 <main> 12 <!-- main content goes here --> 13 </main> 14 <footer> 15 <!-- footer content goes here --> 16 </footer> 17</body> 18</html>
In this example, we have created a basic header that contains a main heading and a paragraph that provide introductory content to the web page. The <main> and <footer> tags are used to create the main content and footer of the web page.
Example 2 - Header with Navigation Links
In this example, we create a header with navigation links:
1<!DOCTYPE html> 2<html> 3<head> 4 <title>Header Example</title> 5</head> 6<body> 7 <header> 8 <nav> 9 <ul> 10 <li><a href="#">Home</a></li> 11 <li><a href="#">About Us</a></li> 12 <li><a href="#">Services</a></li> 13 <li><a href="#">Contact Us</a></li> 14 </ul> 15 </nav> 16 </header> 17 <main> 18 <!-- main content goes here --> 19 </main> 20 <footer> 21 <!-- footer content goes here --> 22 </footer> 23</body> 24</html>
In this example, we have created a header that contains a navigation bar with four links. The <nav> tag is used to create the navigation bar, and the <ul> and <li> tags are used to create an unordered list of links. The <a> tag is used to create the link, and the href attribute specifies the URL of the page the link should take the user to.