HTML div Tag

HTML <div> tag is used to divide the web page into different divisions or parts. The <div> tag basically acts as a container for other HTML elements.

• The <div> tag is used for grouping the HTML elements into sections on a webpage.

• You can also apply CSS(cascading Style sheets) to the elements that are grouped using the <div> tag.

• The <div> tag should not be used inside <p> tag, although you can use it inside the paragraph tag, if in a paragraph you want to divide the content into different parts.

• Also, this is a block-level element.

To learn about the <div> tag interactively - HTML Interactive Tutorial

The <div> tag is a tag which has no specific styling of its own other than display:block; because it is block level element, which means two <div> tags will not be displayed inline,

HTML <div> Tag - Syntax and Usage

It requires both opening tag (<div>) as well as closing tag(</div>).

Following is the syntax for using this tag in your HTML code:

<div>
    ...content here...
</div>

HTML <div> Tag Basic Example

To understand how <div> tag is useful, let's take an example where we will develop a basic webpage structure, in which we will have a top header, a left sidebar, a main body part, and a footer. We will use the <div> tag to create these parts on our webpage.

In the code example below, we have simply used the <div> tag to make the divisions. As you can see in the output, if we use the <div> tag without any specific styling, then all it does is create invisible blocks and we think it is just like HTML line break, to show text in separate lines.

<div class="header">This is header</div>
<div class="body">
    <div class="sidebar">Sidebar</div>
    <div class="main-body">Main Body</div>
</div>
<div class="footer">This is footer</div>

But the <div> tag is created to be like this, so that we can use CSS to style it as we want. We have added styling to the above code, in the interactive example below.

In the above example, we can use more <div> tags inside each section created on the webpage. Let's see how we can do so.

As you can see in the example above, we have used the <div> tag inside the main body. This is how we create any webpage. The <div> tag is one of the most used HTML tag.

<div class="main-body">
    <div id="title">Feedback Form</div>
    <div id="form-box">
        <div><input type="text" placeholder="feedback..."/></div>
        <div><input type="submit" /></div>
    </div>
</div>

If you are a beginner, don't get confused by seeing so many <div> tags. This is how webpages are created. It's good practice to enclose various HTML components within <div> tags.

HTML <div> Tag Attributes

This element does not have any specific attributes although this element supports Global attributes and Event attributes. There are some common attributes which are oftenly used with the <div> tag and these are given below:

Default CSS style for HTML <div> Tag

div {
    display: block;
}

Browser Support for HTML <div> tag

Following browsers support this attribute:

• Firefox 1+

• Google Chrome 1+

• Internet Explorer 2+

• Safari 1+

• Opera 4+