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://edurev.gumlet.io/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
|
|
Nov 25, 2024 Last updated |
|
Explore Courses for Software Development exam
|
|
Previous Year Questions with Solutions
,Exam
,Summary
,Div Tag in HTML | HTML5 for Web Development - Software Development
,past year papers
,study material
,mock tests for examination
,Div Tag in HTML | HTML5 for Web Development - Software Development
,practice quizzes
,Free
,Viva Questions
,Objective type Questions
,shortcuts and tricks
,Semester Notes
,Extra Questions
,MCQs
,Div Tag in HTML | HTML5 for Web Development - Software Development
,video lectures
,Sample Paper
,ppt
,Important 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
|
Follow Us
|
