Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a section in a document in HTML?
Use the <div> tag to add a section in a document. The HTML <div> tag is used for defining a section of your document. With the div tag, you can group large sections of HTML elements together and format them with CSS.
Syntax
Following is the basic syntax for the <div> tag −
<div id="sectionName"> Content goes here </div>
The <div> tag is a block-level container element that creates a rectangular section on the page. It serves as a wrapper for other HTML elements and provides a way to apply CSS styles or JavaScript functionality to a group of elements.
Creating Basic Sections with DIV
Example
Following example demonstrates how to create different sections using the <div> tag −
<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
<style>
#header {
background-color: #4CAF50;
color: white;
padding: 15px;
text-align: center;
}
#contentinfo {
line-height: 20px;
margin: 30px;
padding-bottom: 20px;
text-align: justify;
width: 400px;
color: red;
border: 1px solid #ccc;
padding: 15px;
}
#footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div id="header">
<h1>TutorialsPoint Website</h1>
</div>
<div id="contentinfo">
<p>Welcome to our website. We provide tutorials on various subjects including HTML, CSS, JavaScript, Python, Java, and many more programming languages and technologies.</p>
</div>
<div id="footer">
<p>Copyright 2024 TutorialsPoint</p>
</div>
</body>
</html>
The output shows three distinct sections with different styling −
TutorialsPoint Website (white text, green background, centered) Welcome to our website. We provide tutorials on various subjects including HTML, CSS, JavaScript, Python, Java, and many more programming languages and technologies. (red text, bordered box) Copyright 2024 TutorialsPoint (white text, dark background)
Using DIV with Class Attribute
The class attribute allows you to apply the same styling to multiple div sections. This is useful when you want consistent formatting across similar sections.
Example
<!DOCTYPE html>
<html>
<head>
<title>DIV with Classes</title>
<style>
.card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
margin: 15px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
width: 300px;
}
.card h3 {
color: #2c3e50;
margin-top: 0;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<div class="card">
<h3>HTML Tutorial</h3>
<p>Learn the fundamentals of HTML markup language.</p>
</div>
<div class="card">
<h3>CSS Tutorial</h3>
<p>Master styling and layout with Cascading Style Sheets.</p>
</div>
<div class="card">
<h3>JavaScript Tutorial</h3>
<p>Add interactivity to your web pages with JavaScript.</p>
</div>
</body>
</html>
Each div shares the same card styling, creating a consistent layout −
HTML Tutorial (bordered card) Learn the fundamentals of HTML markup language. CSS Tutorial (bordered card) Master styling and layout with Cascading Style Sheets. JavaScript Tutorial (bordered card) Add interactivity to your web pages with JavaScript.
Nested DIV Sections
DIV elements can be nested inside other DIV elements to create complex layouts and hierarchical document structures.
Example
<!DOCTYPE html>
<html>
<head>
<title>Nested DIV Sections</title>
<style>
.container {
background-color: #f0f0f0;
padding: 20px;
border: 2px solid #333;
}
.sidebar {
background-color: #e6f3ff;
width: 200px;
float: left;
padding: 15px;
margin-right: 20px;
}
.main-content {
background-color: #fff6e6;
padding: 15px;
overflow: hidden;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<div class="container">
<h2>Website Layout Example</h2>
<div class="sidebar">
<h3>Navigation</h3>
<p>Home</p>
<p>About</p>
<p>Contact</p>
</div>
<div class="main-content">
<h3>Main Content Area</h3>
<p>This is the main content section where the primary information is displayed. DIV elements help organize content into logical sections.</p>
</div>
</div>
</body>
</html>
The nested structure creates a layout with a container holding a sidebar and main content area −
Website Layout Example (gray container) Navigation Main Content Area Home This is the main content section where the primary About information is displayed. DIV elements help organize Contact content into logical sections.
DIV vs Semantic HTML5 Elements
While <div> is a generic container, HTML5 introduces semantic elements like <header>, <nav>, <main>, <section>, <article>, and <footer> that provide better meaning to document structure.
| Generic DIV | Semantic HTML5 | Purpose |
|---|---|---|
| <div id="header"> | <header> | Page or section header |
| <div id="nav"> | <nav> | Navigation links |
| <div id="main"> | <main> | Main content area |
| <div id="footer"> | <footer> | Page or section footer |
Use <div> when no semantic element fits your purpose, or when you need a generic container purely for styling or JavaScript purposes.
Conclusion
The <div> tag is essential for creating document sections and organizing HTML content into logical groups. It serves as a versatile container that can be styled with CSS and manipulated with JavaScript. While semantic HTML5 elements are preferred when appropriate, <div> remains indispensable for general-purpose sectioning and layout creation.
10K+ Views
