Div Tag | HTML

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:

filter_none

edit
close

play_arrow

link
brightness_4
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;
}
</style>
   
</head>
  
 <body>
   <div > div tag   </div>
   <div > div tag   </div>
   <div > div tag   </div>
   <div > div tag   </div>
   
   </body>
</html>

chevron_right


Output:



Divtaghtml

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Output:

layoutwithoutdivtag

Creating Web Layout using Div Tag
The 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 layout
we can also create web layout using tables tag but table tags are very complex to modify the layout
The 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Using Div tag we can cover gap between heading tag and paragraph tag in this example will display three blocks web layout.

Output:
divtagblock

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.

  • Code:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    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>

    chevron_right

    
    

  • CSS for color class: File name color.css
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    .color
    {
    height:400px;
    width:600px;
    border:1px solid;
    background-color: 009900;
    }

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    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>

    chevron_right

    
    

  • 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 them
while 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.

Properties Div Tag Span Tag
Elements Types Block-Level Inline
Space/Width Contain Whole Width Available Takes only required Width
Examples Headings, Paragraph, form Attribute, image
Uses Web-layout container for soome text
Attributes Not required,with common css, class Not required,with common css, class

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:

filter_none

edit
close

play_arrow

link
brightness_4
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>

chevron_right


Output:

spanvsdiv

Supported Browser: The browser supported by <div> tag are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.