a hand with a pen behind a monitor that shows html code

HTML Div Element with Examples

In Web development, division is commonly achieved using the <div> element. A <div> is a block-level container that can hold various types of content and can be styled using CSS. This guide will explain how to use <div> elements and style them with CSS to create well-structured web pages.

What is a <div> Element?

The <div> element is a generic container for grouping and styling content. It does not have any special meaning or behavior on its own, but it becomes powerful when combined with CSS.

<div>This is a div element</div>

Using <div> for Layout

The <div> element is often used to create sections or divisions of content on a web page. For example, you might use <div> elements to separate the header, main content, and footer of a page.

<div class="header">
    <h1>Welcome to My Website</h1>
</div>

<div class="main-content">
    <p>Here is some main content.</p>
</div>

<div class="footer">
    <p>Footer information goes here.</p>
</div>

Styling <div> Elements with CSS

Using CSS, you can style <div> elements to create visually appealing layouts. Here are some common properties you might use:

Background Color

You can change the background color of a <div> using the background-color property.

.header {
    background-color: lightblue;
}

.main-content {
    background-color: lightgreen;
}

.footer {
    background-color: lightcoral;
}

Padding and Margin

Padding adds space inside the <div>, while margin adds space outside the <div>.

.header, .main-content, .footer {
    padding: 20px;
    margin: 10px 0;
}

Width and Height

You can set the width and height of a <div> using the width and height properties.

.main-content {
    width: 80%;
    height: 200px;
}

Border

You can add a border around a <div> using the border property.

.footer {
    border: 2px solid black;
}

Example: Styled Divisions

Let's put it all together with an example of a simple webpage layout using styled <div> elements:

<!DOCTYPE html>
<html>
<head>
    <title>My Simple Layout</title>
    <style>
        .header {
            background-color: lightblue;
            padding: 20px;
            margin: 10px 0;
        }
        .main-content {
            background-color: lightgreen;
            padding: 20px;
            margin: 10px 0;
            width: 80%;
            height: 200px;
        }
        .footer {
            background-color: lightcoral;
            padding: 20px;
            margin: 10px 0;
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Welcome to My Website</h1>
    </div>

    <div class="main-content">
        <p>Here is some main content.</p>
    </div>

    <div class="footer">
        <p>Footer information goes here.</p>
    </div>
</body>
</html>

Conclusion

The <div> element is a fundamental building block in web design. By using <div> elements and styling them with CSS, you can create organized and visually appealing layouts. Practice using <div> elements to group content and style them to see how they change the look and structure of your web pages.