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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/lists_desc("`Lists and Descriptions`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/LayoutandSectioningGroup -.-> html/nav_links("`Navigation and Links`") subgraph Lab Skills html/basic_elems -.-> lab-70767{{"`HTML Section Header`"}} html/head_elems -.-> lab-70767{{"`HTML Section Header`"}} html/text_head -.-> lab-70767{{"`HTML Section Header`"}} html/lists_desc -.-> lab-70767{{"`HTML Section Header`"}} html/layout -.-> lab-70767{{"`HTML Section Header`"}} html/nav_links -.-> lab-70767{{"`HTML Section Header`"}} end

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>

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.

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:

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.

HTML Section Header

Introduction

Skills Graph

Setting up the HTML Document

Creating the Header Section

Adding Styles to the Header Section

Linking the CSS file

Summary

Other HTML Tutorials you may like