Div Tag in HTML | HTML5 for Web Development - Software Development PDF Download
Introduction
In HTML, the '<div>' tag is a versatile and powerful element used to create divisions or sections on a webpage. It acts as a container that allows you to group and organize various HTML elements, such as text, images, and other tags, together. The '<div>' tag provides structure to your webpage and helps with styling and layout.
Syntax
The basic syntax of the '<div>' tag is as follows:
<div>
<!-- Content goes here -->
</div>
The opening tag '<div>' and the closing tag '</div>' define the beginning and end of the division. You can place any HTML content within the '<div>' tags.
Example 1: Basic '<div>' Structure
Let's start with a simple example to understand the basic structure of the '<div>' tag:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<div>
<h1>Welcome to My Webpage!</h1>
<p>This is a sample paragraph.</p>
<img src="https://cn.edurev.in/mage.jpg" alt="Sample Image">
</div>
</body>
</html>
In this example, we have a '<div>' element that contains a heading ('<h1>'), a paragraph ('<p>'), and an image ('<img>'). The content within the '<div>' will be displayed together as a group.
Example 2: Using Multiple '<div>' Tags
You can use multiple '<div>' tags to create different sections or blocks on your webpage. Let's take a look at an example:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
.section {
background-color: lightgray;
padding: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="section">
<h2>About Me</h2>
<p>I am a web developer with a passion for coding.</p>
</div>
<div class="section">
<h2>My Projects</h2>
<ul>
<li>Project 1</li>
<li>Project 2</li>
<li>Project 3</li>
</ul>
</div>
</body>
</html>
In this example, we have two '<div>' elements with the class attribute set to "section." We've also applied some CSS styling to the "section" class to add a light gray background color, padding, and a bottom margin. Each '<div>' represents a separate section on the webpage, one for "About Me" and another for "My Projects."
Explanation:
- The '.section' selector in the CSS targets the elements with the class "section."
- The 'background-color' property sets the background color of the section to light gray.
- The 'padding' property adds 10 pixels of space inside the section.
- The 'margin-bottom' property adds a 10-pixel margin at the bottom of each section.
Sample Problems
Problem 1: Create a '<div>' with a red background color and white text.
<div style="background-color: red; color: white;">
This is a red div with white text.
</div>
Problem 2: Create two '<div>' sections side by side, each taking up 50% of the width.
<div style="width: 50%; float: left;">
Left Div
</div>
<div style="width: 50%; float: left;">
Right Div
</div>
Conclusion
In this article, we've explored the '<div>' tag in HTML and its usage as a container for organizing and grouping elements. We covered basic syntax, examples with code explanations, and even provided sample problems for you to practice. By using the '<div>' tag effectively, you can enhance the structure, layout, and styling of your webpages.
|
20 videos|15 docs|2 tests
|
study material
,Exam
,Div Tag in HTML | HTML5 for Web Development - Software Development
,past year papers
,Div Tag in HTML | HTML5 for Web Development - Software Development
,practice quizzes
,Sample Paper
,mock tests for examination
,Important questions
,Free
,Div Tag in HTML | HTML5 for Web Development - Software Development
,shortcuts and tricks
,ppt
,Semester Notes
,video lectures
,Previous Year Questions with Solutions
,Summary
,MCQs
,Objective type Questions
,Extra Questions
,Viva Questions
;
Div Tag in HTML Free PDF Download
Importance of Div Tag in HTML
Div Tag in HTML Notes
Div Tag in HTML Software Development Questions
Study Div Tag in HTML on the App
|
© EduRev
|
Education Revolution
|
|
within 7 days!