HTML div tag refers to a display section in an HTML document styled using CSS. This tag is quite easy to learn and use. In this tutorial, we will study the HTML <div> tag.

What is HTML Div Tag

The div tag in HTML is known as the division tag. The div tag is applied to HTML documents to create content segmentation in a web page, such as images, text, headers, footers, navigation bars, etc. The <div> tag contains both an opening and a closing tag. Since the HTML <div> tag helps users create different data blocks to represent different contexts, it is the most commonly used tag in web development.

Advantages of Using Div Tag

HTML provides various tags for different purposes of creating web pages. The <div> tag can be used instead of most all block-level tags and is not affecting the context of the layout of the HTML document. Since the <div> tag is a block-level element, it starts on a new line. The use of this HTML tag reduces the program's complexity for the web designer. Therefore, it is advisable to use div tags.

Example:

An example of an HTML div element:

<style>
body {
    background-color: #f7f7f7;
    font-family: Verdana, sans-serif;
}
h1 {
    font-size: 30px;
    color: royalblue;
}
.card-body {
    border: .031rem solid #bce8f1;
    box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%);
    padding: .5rem;
}
.card-body ol {
    margin: 0;
}
.card-body ol li {
    margin-bottom: 1rem;
}
</style>
<div class="card-body">
    <h2>This is a title inside the div element</h2>
    <ol>
        <li>Identifiers</li>
        <li>Keywords</li>
        <li>Constants</li>
        <li>Strings</li>
        <li>Operators</li>
        <li>Special Symbols</li>
    </ol>
</div>
<p>The above example displays some sample content inside a div element.</p>