HTML Div Element

HTML `<div>` Element

The <div> element is a block-level container used to group HTML elements together. It does not add any visual change by itself but is commonly used for layout and styling purposes, especially with CSS.

Basic Syntax

Example Code

<!DOCTYPE html>
<html>
<head>
<style>
.container {
border: 2px solid black;
padding: 10px;
background-color: lightyellow;
}

.content {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>

<div class="container">
<h2>This is a div container</h2>
<p class="content">This paragraph is inside the div.</p>
</div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.container {

border: 2px solid black;

padding: 10px;

background-color: lightyellow;

}

.content {

color: blue;

font-size: 18px;

}

</style>

</head>

<body>

<h2>This is a div container</h2>

<p class="content">This paragraph is inside the div.</p>

</div>

</body>

</html>

Output Preview

A yellow box with a border
Heading and paragraph are inside the box
Paragraph text is blue due to CSS

Key Points

<div> is a block-level element.
Commonly used for grouping elements for styling or layout.
Works well with CSS and JavaScript for styling and interaction.

The <div> element is one of the most important tools for building modern webpage layouts.

CodeCapsule

Sanjit Sinha — Web Developer | PHP • Laravel • CodeIgniter • MySQL • Bootstrap Founder, CodeCapsule — Student projects & practical coding guides. Email: info@codecapsule.in • Website: CodeCapsule.in

HTML Div Element

HTML `<div>` Element

Basic Syntax

Example Code

Output Preview

Key Points

You may also like...

Leave a Reply Cancel reply

HTML Div Element

HTML <div> Element

Basic Syntax

Example Code

Output Preview

Key Points

You may also like...

HTML YouTube Videos

HTML Responsive Web Design

HTML Images

Leave a Reply Cancel reply

HTML `<div>` Element