HTML | Div Tag - GeeksforGeeks

17 Mar, 2022
The div tag is known as Division tag. The div tag is used in HTML to make divisions of content in the web page like (text, images, header, footer, navigation bar, etc). Div tag has both open(<div>) and closing (</div>) tag and it is mandatory to close the tag. The Div is the most usable tag in web development because it helps us to separate out data in the web page and we can create a particular section for particular data or function in the web pages.
Div tag is Block level tag
It is a generic container tag
It is used to the group of various tags of HTML so that sections can be created and style can be applied to them.
As we know Div tag is block-level tag in this example div tag contain entire width. It will be displayed div tag each time on a new line, not on the same line.Example 1:
<html>   <head>      <title>gfg</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:
As we know div tag is used for grouping HTML elements together and is to apply CSS and web layout on them Lets see below example without using div tag. we need to applying CSS for each tag (in the example using H1 H2 and two paragraphs p tags)
Example 2:
<html>   <head>      <title>gfg</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>GeeksforGeeks</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>GeeksforGeeks</h2>      <p>GCET is an entrance test for the extensive classroom       program by GeeksforGeeks to build and enhance Data       Structures and Algorithm concepts, mentored by Sandeep       Jain (Founder & CEO, GeeksforGeeks).He has 7 years of       teaching experience and 6 years of industry experience.      </p>   </body></html>
Output:
Creating Web Layout using Div TagThe div tag is a container tag inside div tag we can put more than one HTML element and can group together and can apply CSS for them.div tag can be used for creating a layout of web pages in the below examples shows creating a web layoutwe can also create web layout using tables tag but table tags are very complex to modify the layoutThe div tag is very flexible in creating web layouts and easy to modify. in below example will show grouping of HTML element using div tag and create block-wise web layout.Example:
<html>   <head>      <title>gfg</title>      <style type=text/css>         .leftdiv         {         float: left;         }         .middlediv         {         float: left;         background-color:gray         }         .rightdiv         {         float: left;         }         div{         padding : 1%;         color: white;         background-color: 009900;         width: 30%;         border: solid black;         }      </style>   </head>   <body>      <div class="leftdiv">         <h1>GeeksforGeeks</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>GeeksforGeeks</h2>         <p>GCET is an entrance test for the extensive classroom          programme by GeeksforGeeks to build and enhance Data          Structures and Algorithm concepts, mentored by Sandeep          Jain (Founder & CEO, GeeksforGeeks).He has 7 years of          teaching experience and 6 years of industry experience.      </p>      </div>      <div class="middlediv">         <h1>GeeksforGeeks</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>GeeksforGeeks</h2>         <p>GCET is an entrance test for the extensive classroom          programme by GeeksforGeeks to build and enhance Data          Structures and Algorithm concepts, mentored by Sandeep          Jain (Founder & CEO, GeeksforGeeks).He has 7 years of          teaching experience and 6 years of industry experience.         </p>      </div>      <div class="rightdiv">         <h1>GeeksforGeeks</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>GeeksforGeeks</h2>         <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>      </div>   </body></html>
Using Div tag we can cover gap between heading tag and paragraph tag in this example will display three blocks web layout.
Output:
we can use CSS in any divisions using the following methods:
1. Using class:we can use Class on that particular div either in internal CSS or external CSS
In case of internal CSS: we need to define Class in the <head> section of HTML within <style> element.
In case of External CSS: we need to create a separate .css file and include it in HTML code in <head> section using <link> element.The class name should be different from other class names in other div otherwise the CSS used in one div can affect another division.
The class name should be different from other class names in other div otherwise the CSS used in one div can affect another division.
Code:<html>   <head>      <link rel="stylesheet" href="color.css">      <title>         gfg      </title>   </head>   <body>      <center>         <div class="color">            <!--open tag of Div!-->            <caption>               <h1>GEEKSFORGEEKS</h1>            </caption>            <h1>Inline CSS is not  USED in THIS method.            </h1>         </div>         <!--closing tag of Div!-->      </center>   </body></html>
<html>   <head>      <link rel="stylesheet" href="color.css">      <title>         gfg      </title>   </head>   <body>      <center>         <div class="color">            <!--open tag of Div!-->            <caption>               <h1>GEEKSFORGEEKS</h1>            </caption>            <h1>Inline CSS is not  USED in THIS method.            </h1>         </div>         <!--closing tag of Div!-->      </center>   </body></html>
CSS for color class: File name color.css.color{height:400px;width:600px;border:1px solid;background-color: 009900;}In this example, we used a class to that particular Div. with name color.css which properties of div. It is a separate file which is linked by link tag in this HTML code
.color{height:400px;width:600px;border:1px solid;background-color: 009900;}
In this example, we used a class to that particular Div. with name color.css which properties of div. It is a separate file which is linked by link tag in this HTML code
Output:
2. Inline CSS:we can directly use CSS in div also this method does not require of CLASS. Div in HTML coding is used as a container tag also because it is the one that can contain all other tags.
Code:<html>   <head>      <title>         gfg      </title>   </head>   <body>      <center>         <div style="height:300px; width:500px; color:white;            border:1px solid; background-color: 009900;">            <!--open tag of Div!-->            <caption>               <h1>GEEKSFORGEEKS</h1>            </caption>            <h1>Inline CSS is USED in THIS method.               In this div no class is used.            </h1>         </div>         <!--closing tag of Div!-->      </center>   </body></html>In this method, we applying inline CSS in the div tag. By using style attribute this style will apply to that particular div.
<html>   <head>      <title>         gfg      </title>   </head>   <body>      <center>         <div style="height:300px; width:500px; color:white;            border:1px solid; background-color: 009900;">            <!--open tag of Div!-->            <caption>               <h1>GEEKSFORGEEKS</h1>            </caption>            <h1>Inline CSS is USED in THIS method.               In this div no class is used.            </h1>         </div>         <!--closing tag of Div!-->      </center>   </body></html>
In this method, we applying inline CSS in the div tag. By using style attribute this style will apply to that particular div.
Output:
Difference Between Div tag and span tag
The div and span tag are two common tags when creating pages using HTML and perform different functionality on themwhile div tag is a block level element and span is inline element The div tag creates a line break and by default creates a division between the text that comes after the tag as begun and until the tag ends with </div>. div tag creates separate boxes or containers for all elements inside this tag like text, images, paragraphs.
The span tag does not create a line break similar to a div tag, but rather allows the user to separate things from other elements around them on a page within the same line. avoiding of line break, results only that selected text to change, keeping all the other elements around them same.Below example will display the difference between span and div tag while div tag contains whole width and span tag contain only required width and rest parts are free for another element.Code:
<html>   <head>      <title>gfg</title>      <style type=text/css>         p{         background-color:gray;         margin: 10px;         }                               div         {         color: white;         background-color: 009900;         margin: 2px;         font-size: 25px;         }         span         {         color: black;         background-color: gray;         margin: 5px;         font-size: 25px;         }      </style>   </head>   <body><!-- below some div tags -->              <div > div tag   </div>      <div > div tag   </div>      <div > div tag   </div>      <div > div tag   </div>        <!-- below some span tags -->            <span>span-tag</span>      <span>span-tag</span>      <span>span-tag</span>      <span>span-tag</span>   </body></html>
Output:
Supported Browser: The browser supported by <div> tag are listed below:
Google Chrome
Internet Explorer
Firefox
Opera
Safari
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-Tags
HTML
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
CSS to put icon inside an input element in a form
REST API (Introduction)
Types of CSS (Cascading Style Sheet)