HTML Header

Create a header section on your webpage.

The HTML Header element represents a container for introductory content or a set of navigational links for a section or page. It typically contains a logo or a heading, and may also contain a tagline, search bar, or other elements that help users navigate and understand the content of the page.

Contents

HTML TUTORIALS HTML5 FEATURES HTML5 References HTML Header Create a header section on your webpage. How to use the HTML header element.Step 1: Create a basic HTML document Step 2: Add a header section Step 3: Style your header

The <header> element can be used within the <body> of an HTML document, and can also be nested within other HTML elements such as <section> or <article> to define specific headers for those sections.

How to use the HTML header element.

Step 1: Create a basic HTML document

First, create a new HTML document and add the basic HTML structure:

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<!-- your content goes here -->
</body>
</html>

Step 2: Add a header section

Inside the <body> section, add the <header> element. This can contain any content you want to display at the top of your webpage, such as a logo or navigation menu:

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<header>
<h1>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>
<!-- rest of your content goes here -->
</body>
</html>

In this example, the <header> element contains an <h1> tag with the website name, and a <nav> element with a list of links.

Step 3: Style your header

You can use CSS to style your header to make it look more attractive. For example, you can change the background color, font size, and text color:

header {
background-color: #333;
color: white;
font-size: 24px;
padding: 20px;
}

nav {
display: inline-block;
}

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

nav li {
display: inline-block;
margin-right: 10px;
}

nav a {
color: white;
text-decoration: none;
}

In this example, we’ve added some basic styles to the <header> and <nav> elements.

That’s it! You now have a basic understanding of how to use the HTML <header> element to create a header section on your webpage.