Div tag Usage

The div tag is the block-level tag.
It is used for applying styles and layout structure <div> and allows us to manipulate and position content through CSS.
It also divides content into logical sections, aiding in the readability and maintainability of the code.
As we know a Div tag is a block-level tag, the div tag contains the entire width. Hence, every div tag will start from a new line and not the same line.

Example 1: In this example, we will see the implementation div tag with an example.

html

<html>

<head>
    <title>HTML Div Tag</title>
    <style type=text/css>
        p {
            background-color: gray;
            margin: 10px;
        }

        div {
            color: white;
            background-color: 009900;
            margin: 2px;
            font-size: 25px;
        }
    </style>

</head>

<body>
    <div> div tag </div>
    <div> div tag </div>
    <div> div tag </div>
    <div> div tag </div>

</body>

</html>

Output:

HTML Div Tag Example Output

Example 2: In this example we don’t use div tag and hence we need to apply CSS for each tag (in the example using H1 H2 and two paragraphs p tags)

html

<html>

<head>
    <title>HTML Div Tag</title>
    <style type=text/css>
        p {
            color: white;
            background-color: 009900;
            width: 400px;
        }

        h1 {
            color: white;
            background-color: 009900;
            width: 400px;
        }

        h2 {
            color: white;
            background-color: 009900;
            width: 400px;
        }
    </style>
</head>

<body>
    <h1>w3wiki</h1>
    <p>How many times were you frustrated while looking out
        for a good collection of programming/algorithm/interview
        questions? What did you expect and what did you get?
        This portal has been created to provide well written,
        well thought and well-explained solutions for selected
        questions.
    </p>
    <h2>w3wiki</h2>
    <p>GCET is an entrance test for the extensive classroom
        program by w3wiki to build and enhance Data
        Structures and Algorithm concepts, mentored by Sandeep
        Jain (Founder & CEO, w3wiki).He has 7 years of
        teaching experience and 6 years of industry experience.
    </p>
</body>

</html>

Output:

HTML Div Tag Example Output

We can use CSS in any of the divisions (<div> tag) using the following methods:

HTML Div Tag

The HTML <div> tag defines sections in HTML documents, serving as containers styled with CSS or controlled with JavaScript. It’s easily customized using class or id attributes and can contain various content.

Note: Browsers add line breaks before and after <div> elements by default.

Div tag Usage

We can use CSS in any of the divisions (<div> tag) using the following methods:

HTML Div Tag

Similar Reads