HTML - Header Explanation with Examples 1

A

AllJobsInfo

Administrator
Staff member
In HTML, the `<header>` element represents introductory content typically at the top of a page or section within a page. It often contains headings, logos, navigation menus, search forms, or other introductory elements. The `<header>` element is part of the HTML5 semantic elements, which provide clearer structure to web documents for both developers and search engines.

Here's an explanation of the `<header>` element with examples:

Example 1: Basic Header

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Header Example</title>
</head>
<body>
<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>
<main>
<!-- Main content of the webpage goes here -->
</main>
<footer>
<!-- Footer content goes here -->
</footer>
</body>
</html>

Example 2: Header with Logo and Navigation

<header>
<div class="logo">
<img src="logo.png" alt="Company Logo">
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>

Example 3: Header with Search Form

<header>
<h1>Search Website</h1>
<form action="/search" method="get">
<input type="text" name="query" placeholder="Search...">
<button type="submit">Search</button>
</form>
</header>

Example 4: Header with Background Image

<header style="background-image: url('header-bg.jpg');">
<h1>Welcome to Our Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>

Example 5: Header with Flexbox Layout

<header style="display: flex; justify-content: space-between; align-items: center;">
<div class="logo">
<img src="logo.png" alt="Company Logo">
</div>
<nav>
<ul style="display: flex;">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
These examples illustrate various ways you can structure and style a `<header>` element in HTML to create different types of headers for your web pages.
 
Top