HTML Div Element

In HTML, the <div> element is a block-level element that defines a division or section in an HTML document. It is used to group elements together and apply styles to them. The <div> element is a versatile element that can be used for a variety of purposes, such as creating headers, footers, navigation menus, and content sections.

Syntax

<div>
    <!-- Content goes here -->
</div>

Attributes:
The <div> element has several attributes that can be used to control its appearance and behavior. Some of the most common attributes are:

  • id: Specifies a unique identifier for the element.
  • class: Specifies one or more class names for the element.
  • style: Specifies an inline style for the element.
  • title: Specifies additional text that appears when the mouse hovers over the element.

Example

Here’s a simple example of a <div> element containing a heading and a paragraph:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Div Example</title>
</head>
<body>
    <div>
        <h2>This is a heading inside a div</h2>
        <p>This is a paragraph inside a div.</p>
    </div>
</body>
</html>

Styling a <div> Element

You can use CSS to style a <div> element. For example, you can set the background color, border, padding, and more:

<!DOCTYPE html>
<html>
<head>
    <title>Styled Div Example</title>
    <style>
        .styled-div {
            background-color: lightblue;
            border: 2px solid blue;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="styled-div">
        <h2>Styled Div</h2>
        <p>This div has a background color, border, and padding.</p>
    </div>
</body>
</html>

Nested <div> Elements

You can nest <div> elements inside each other to create complex layouts:

<!DOCTYPE html>
<html>
<head>
    <title>Nested Div Example</title>
    <style>
        .outer-div {
            background-color: lightgrey;
            padding: 20px;
        }
        .inner-div {
            background-color: white;
            padding: 10px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="outer-div">
        <h2>Outer Div</h2>
        <div class="inner-div">
            <h3>Inner Div</h3>
            <p>This is a nested div.</p>
        </div>
    </div>
</body>
</html>

Using <div> for Layouts

The <div> element is commonly used to create layouts. Here’s an example of a simple two-column layout using <div> elements and CSS:

<!DOCTYPE html>
<html>
<head>
    <title>Two-Column Layout</title>
    <style>
        .container {
            display: flex;
        }
        .column {
            flex: 50%;
            padding: 10px;
        }
        .left-column {
            background-color: lightcoral;
        }
        .right-column {
            background-color: lightseagreen;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="column left-column">
            <h2>Left Column</h2>
            <p>This is the left column.</p>
        </div>
        <div class="column right-column">
            <h2>Right Column</h2>
            <p>This is the right column.</p>
        </div>
    </div>
</body>
</html>
Share this Tutorials

HTML Div Element

Or copy link

CONTENTS
Scroll to Top