Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Separate Header from Body in HTML
To separate header from body in HTML, can be useful in providing information and highlighting the actual body. The header includes elements such as the title of the web page, the list of navigation options, and other initiating features. The content section contains webpage information and is usually positioned at the bottom of the webpage.
In this article we are having a web page with the header and the main body. Our task is to separate header from body in HTML.
Approaches to Separate Header from Body
- Using Semantic Tags
- Using CSS
- Using Multiple Headers
1. Using Semantic Tags
HTTP5 framework provides semantic HTML tag names. This will enable us to have the basis on which we can make a distinction between the header section and the other sections of the site's content.
- The header fixes the above part of the site and contains the title and links to sections of the site.
- Concerning the organization of the webpage, the body tag contains the major information of the website.
- We have used header tag for the heading part and main tag where we have written the body in main tag.
Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Header Separation Example</title> </head> <body> <header> <h1>Welcome to the Tutorialspoint</h1> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header> <main> <p> Hello this section is for the main content for webpage , it's not header.</p> </main> </body> </html>
2. Using CSS
The styling of the actual header from the remaining content can be changed a little more through CSS. This will also better separate the header by modifying its background, paddingand border.
- In the first level of the header, the background color with the code #42e483 and padding is provided to set it out of the body content.
- Some changes made to the style include having a bottom border to the header in order to give a clear divide from the rest of the page.
- Padding is also applied to the body and the main content to make the structure of the site more clearly differentiated.
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to Tutorialspoint</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.site-header {
background-color: #14ea01;
padding: 30px;
text-align: center;
border-bottom: 3px solid #000000;
}
.site-header h3 {
margin: 0;
font-size: 2rem;
color: #ffffff;
}
.nav {
margin-top: 10px;
}
.nav a {
margin: 0 15px;
text-decoration: none;
color: #000;
font-weight: bold;
transition: color 0.3s;
}
.nav a:hover {
color: #ea1414; /* Change color on hover */
}
.content-area {
padding: 25px;
font-size: 1.1rem;
line-height: 1.6;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
margin: 20px auto;
max-width: 800px;
}
footer {
text-align: center;
padding: 15px 0;
background-color: #14ea01;
color: #fff;
position: relative;
bottom: 0;
width: 100%;
}
footer p {
margin: 5px 0;
}
</style>
</head>
<body>
<header class="site-header">
<h3>Tutorialspoint Header</h3>
<nav class="nav">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
<p>This header has been styled uniquely, ensuring it stands out from the body content.</p>
</header>
<main class="content-area">
<p>The main content section appears distinctly from the header, thanks to custom CSS styling.</p>
<p>You can add more content here, such as articles, tutorials, or any other relevant information.</p>
</main>
<footer>
<p>©Tutorialspoint.</p>
<p>Follow us on social media!</p>
</footer>
</body>
</html>
3. Using Multiple Headers
More often in some complicated websites, the headers prove to be several to subdivide the contents of the page in the regions. This can be done through the use of HTML headings at various levels of h1, h2, h3, and even further on down the line. Each section can have its own header to interpret what content is being presented to the consumer.
- This example employs a number of sections, every single one containing an h2 tag.
- Additionally, subdivisions of every section are based on the h3 tag for improved classification.
- CSS is used to put a unique dressing code to each section and header so that the user can easily distinguish between sections.
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome Tutorialspoint - Multiple Headers Example</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #f9f9f9;
color: #333;
}
header {
background-color: #14ea01;
padding: 20px;
text-align: center;
border-bottom: 3px solid #000;
}
header h1 {
margin: 0;
font-size: 2rem;
color: #fff;
}
nav {
margin: 20px 0;
}
nav a {
margin: 0 15px;
text-decoration: none;
color: #fff;
font-weight: bold;
transition: color 0.3s;
}
nav a:hover {
color: #ea1414; /* Change color on hover */
}
.section {
margin: 30px auto;
padding: 20px;
border: 1px solid #1db006;
border-radius: 5px;
background-color: #ffffff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
max-width: 800px;
}
h2 {
background-color: #59ff00;
padding: 10px;
font-size: 1.5rem;
border-radius: 5px;
}
h3 {
color: #333;
padding-bottom: 10px;
}
p {
font-size: 1rem;
line-height: 1.5;
}
footer {
text-align: center;
padding: 15px 0;
background-color: #14ea01;
color: #fff;
position: relative;
bottom: 0;
width: 100%;
}
footer p {
margin: 5px 0;
}
</style>
</head>
<body>
<header>
<h1>Welcome to the Multiple Headers Tutorial</h1>
<nav>
<a href="#introduction">Introduction</a>
<a href="#content">Content</a>
<a href="#conclusion">Conclusion</a>
</nav>
</header>
<section class="section" id="introduction">
<h2>Introduction</h2>
<h3>What You'll Learn</h3>
<p>This section introduces the concept of using multiple headers for different parts of a webpage, making content easier to organize and read.</p>
</section>
<section class="section" id="content">
<h2>Content Section</h2>
<h3>Section Header</h3>
<p>Here, we are using a second-level header for the overall section and a third-level header to introduce smaller subsections within the content.</p>
</section>
<section class="section" id="conclusion">
<h2>Conclusion</h2>
<h3>Final Thoughts</h3>
<p>In this tutorial, you've seen how to use multiple headers, from <code>h1</code> for the page title to <code>h2</code> and <code>h3</code> for organizing content within sections.</p>
</section>
<footer>
<p>© Tutorialspoint </p>
<p>Follow us on social media!</p>
</footer>
</body>
</html>
Conclusion
In this article we have discussed how to isolate headers within the body of an HTML document using semantic tags, using CSS and by using multiple headers . All of the methods discussed can be used in various circumstances, ranging from the basic page title to the more complex structurally divided, several-sectioned page containing various levels of content headers.
169 Views
