In this section, we will learn what <div> element is and how it works.

What is <div> Tag in HTML?

HTML <div> element is a container element. It is used to group together those elements and content we want to represent them as one entity in a document.

Using <div> element allows us to compartmentalize a document and this helps a better organization of the document.

You should know that in HTML and CSS there’s a parent-child relation between elements in a document.

This means if, for example, there’s a <div> element and it has one or more elements in its body; technically, those inner elements are the children of the <div>. (In this scenario, the <div> becomes the parent of those inner elements)

So why we said that? It’s because applying styles to a parent element in some cases will also apply to children of that element as well.

This means using container elements like <div> gives us the opportunity to style a group of elements only in one place (in the parent element) and the entire children will inherit that style as well. As a result, we won’t repeat the same process for every child element anymore!

HTML <div> Tag Syntax:

<div>

Body…

</div>

HTML <div> Tag Values

HTML <div> element is a container for other elements and basically it groups them together. So the content of this element could be any other elements that come together to create an entity in a document.

Example: using <div> tag in HTML

See the Pen using <div> tag in HTML by Omid Dehghan (@odchan1) on CodePen.

Example: background color div HTML

See the Pen background color div HTML by Omid Dehghan (@odchan1) on CodePen.

Here, with the help of the class attribute, we got a reference to the <div> element of this example and then with the help of CSS background property we changed the background color of it to light-blue.

HTML Container Tags

The HTML <div> element is not the only container element in HTML! Traditionally, this was the main and perhaps the only container element that developers used to group related elements in a document.

Since HTML5, other container elements came along as well. Each of these container elements designed for a specific purpose.

Check the list below for more information:

• HTML <article>
• HTML <section>
• HTML <footer>
• HTML <header>
• HTML <aside>