What are Headers in HTML?
The header element is a semantic element that was introduced in HTML5. It serves two primary purposes: as a page header and as a section header. In this article, we will cover page headers and section headers, discover the differences between each and show examples of both.
Page and section headers have one primary thing in common: they both contain information that introduces the primary content of either the page or the section.
Page Header
On a web page, a page header’s primary purpose is to introduce information about the website. This might include your company logo, a navigation bar that routes users to different parts of your site or a search bar. This content is usually the same across all the pages of your site.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Satisfy&display=swap" rel="stylesheet">
<title>Headers</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
max-width: 1000px;
width: 100%;
margin: 0 auto;
border-left: 1px solid black;
border-right: 1px solid black;
}
header {
width: 100%;
display: flex;
align-items: center;
}
.logo {
display: flex;
align-items: center;
width: 35%;
padding: 10px 20px;
justify-content: space-between;
font-family: 'Satisfy', cursive;
}
nav {
width: 70%;
}
nav ul {
display: flex;
justify-content: space-around;
width: 100%;
list-style-type: none;
}
main {
padding: 20px;
text-align: center;
font-size:1.4rem;
}
</style>
<script src="https://kit.fontawesome.com/c52d9055c7.js" crossorigin="anonymous"></script>
</head>
<body>
<img src="http://www.placekitten.com/1000/305" alt="kitty!" />
<header>
<div class="logo">
<i class="fas fa-cat fa-3x"></i><h1> Kit Kat Hospital</h1>
</div>
<nav>
<ul>
<li>About Us</li>
<li>Services</li>
<li>Contact Us</li>
<li>Patient Login</li>
</ul>
</nav>
</header>
<main>
The rest of the landing page will go here...
</main>
</body>
</html>Section Headers
A section header’s primary purpose is to introduce a section of content. We would use a section header to give the title of a blog post and its author’s name.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Satisfy&display=swap" rel="stylesheet">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
max-width: 1000px;
width: 100%;
margin: 0 auto;
border-left: 1px solid black;
border-right: 1px solid black;
}
.first {
width: 500px;
border: 3px solid black;
padding: 20px
}
header {
width: 100%;
display: flex;
align-items: center;
}
.logo {
display: flex;
align-items: center;
width: 35%;
padding: 10px 20px;
justify-content: space-between;
font-family: 'Satisfy', cursive;
}
nav {
width: 70%;
}
nav ul {
display: flex;
justify-content: space-around;
width: 100%;
list-style-type: none;
}
main {
padding: 20px;
text-align: center;
font-size:1.4rem;
}
.section-header {
flex-direction: column;
text-align: left;
}
.section-header h2 {
align-self: flex-start;
}
.title {
display: flex;
align-items: center;
width: 100%;
padding: 20px;
}
.title h2 {
margin-bottom: 0;
}
.title h4 {
margin-left: 10px;
margin-bottom: 0;
color: rgb(34, 33, 33);
font-weight: lighter;
}
.title p {
align-self: flex-start;
}
.author {
margin: 0;
font-size: 1rem;
align-self: flex-start;
padding: 0px 20px;
}
.section-content {
text-align: left;
text-indent: 25px;
padding: 20px;
font-size: 1.2rem;
line-height: 1.5;
height: 200px;
width: 75%;
text-overflow:ellipsis;
}
</style>
<script src="https://kit.fontawesome.com/c52d9055c7.js" crossorigin="anonymous"></script>
</head>
<body>
<img src="http://www.placekitten.com/1000/305" alt="kitty!" />
<header>
<div class="logo">
<i class="fas fa-cat fa-3x"></i><h1> Kit Kat Hospital</h1>
</div>
<nav>
<ul>
<li>About Us</li>
<li>Services</li>
<li>Contact Us</li>
<li>Patient Login</li>
</ul>
</nav>
</header>
<main>
<section>
<article>
<header class="section-header">
<div class="title">
<h2>Meows Decoded: </h2>
<h4>What your kit cat if trying to tell you</h4>
</div>
<p class="author">By Cat N. Mouse</p>
</header>
<p class="section-content">
Cat lorem ipsum dolor sit amet, pee on walls it smells like breakfast for fall asleep on the washing machine. Drool destroy couch as revenge. Lick the plastic bag. Humans,humans, humans oh how much they love us felines we are the center of attention they feed, they clean touch my tail, i shred your hand purrrr why use post when this sofa is here, yet Gate keepers of hell, but skid on floor, crash into wall for cat dog hate mouse eat string barf pillow no baths hate everything yet meow and walk away.</p>
</article>
</section>
</main>
</body>
</html>As illustrated in the code editor, you can have multiple headers per HTML document. The only requirement is that headers cannot be nested inside other headers. Best practice is that you have a header element that is intended for the whole page and then a header element representing each section element.
Just remember that the header is something that introduces a page or a section and is one of the many semantic elements that were introduced in HTML5.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
