HTML <div>

HTML Division <div> tag is used to define a division in an HTML document.

Div tag is generally used a container for a group of HTML Elements, which has to be styled or manipulated using CSS or JavaScript.

Example

A simple Div element is shown in the following example.

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <div>
            <h2>Topic 1</h2>
            <p>This is a sample text.</p>
        </div>
    </body>
</html>

Note: HTML Div element starts with the tag <div> and ends with an end tag </div>.

Default CSS for HTML <div>

By default, following CSS properties are set for a Div element.

</>
Copy
display: block;

Inline Style for HTML Div Element

We can change the style of a Div element through inline styling using style attribute.

In the following example, we have set the color as red for the Div element.

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <div style="color:red">
            <h2>Topic 1</h2>
            <p>This is a sample text.</p>
        </div>
    </body>
</html>

Apply CSS for HTML Div Elements

We can apply CSS for all Div elements using the div tag name.

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
              border: 1px solid;
              border-radius: 10px;
              margin: 10px 0;
            }
          </style>
    </head>
    <body>
        <div>
            <h2>Topic 1</h2>
            <p>This is a sample text.</p>
        </div>
        <div>
            <h2>Topic 2</h2>
            <p>This is a another sample text.</p>
        </div>
    </body>
</html>

Conclusion

In this HTML Tutorial, we learned about HTML <div> tag and went through different examples that cover defining an HTML Div element, and styling it.