Create Header Section in HTML

Introduction

In this lab, we will learn how to create the header section of an HTML page using the <header> tag. The header section of a web page typically contains the website logo, navigation menu, search bar, etc. The <header> tag is a block-level element used to group other HTML elements together to create the header section of a web page.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

This is a Guided Lab, which provides step-by-step instructions to help you learn and practice. Follow the instructions carefully to complete each step and gain hands-on experience. Historical data shows that this is a beginner level lab with a 86% completion rate. It has received a 100% positive review rate from learners.

Setting up the HTML Document

We will start by creating a new HTML file named index.html. In index.html, we will add the basic HTML document structure by using the following code:

<!doctype html>
<html>
  <head>
    <title>HTML Header Tutorial</title>
  </head>
  <body></body>
</html>

Creating the Header Section

We will create the header section of the HTML page using the <header> tag. Inside the <body> tag, add the following code:

<header>
  <h1>Welcome to My Website</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

In the code above, we have added a <h1> tag to define the header section heading and a <nav> tag to define the navigation menu. Inside the <nav> tag, we have added an unordered list <ul> and three list items <li> with the corresponding anchor <a> tags to create the navigation menu.

Adding Styles to the Header Section

To add styles to the header section, we will create a CSS file called style.css. In style.css, we will write the following code:

header {
  background-color: #333;
  color: #fff;
  padding: 1rem;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav li a {
  color: #fff;
  display: block;
  padding: 0.5em;
  text-decoration: none;
}

In the above code, we have added styles to the <header> tag to set the background color, text color, and padding. We have also added styles to the <nav> tag and its child elements to set the styles for the navigation menu.

Linking the CSS file

To link the CSS file to the HTML file, add the following code inside the <head> tag:

<link rel="stylesheet" href="style.css" />

Save the changes to index.html and open it in a web browser. You should see the following output:

HTML Header Example

Summary

Congratulations! You have successfully created a basic HTML header section using the <header> tag. In this lab, you learned how to create the header section of an HTML page, add styles to it, and link a CSS file to the HTML document. The header section is an essential part of any webpage as it provides the introductory content and navigation menu to the visitors.