Skip to content
Related Articles

Related Articles

Improve Article

HTML | Div Tag

  • Difficulty Level : Easy
  • Last Updated : 01 Feb, 2021

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:

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:




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

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:




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




    <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

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

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

PropertiesDiv TagSpan Tag
Elements TypesBlock-LevelInline
Space/WidthContain Whole Width AvailableTakes only required Width
ExamplesHeadings, Paragraph, formAttribute, image
UsesWeb-layoutcontainer for soome text
AttributesNot required,with common css, classNot 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:




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

spanvsdiv

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

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

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :