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>