Site /

What Is div In HTML?

September 1, 2020 at 7:09 am By
What Is div In HTML?

div short for Division in HTML divides the webpage into blocks of content or sets the layout. It has both the opening and the closing tag. <div> tag serves multiple purpose in HTML. It has several properties like setting the web-layout, as a block-level element, getting the headings, paragraphs, and forms.

β€œ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 functionality in the web pages.”, says GeeksForGeeks.

In this tutorial, we will see what is div in HTML.

div Using Class

We can use class by internal CSS or external CSS. We will see both ways.

Internal CSS

We will use <style> tag to define the class in the <head> section. And while using <div> tag we shall call the class that is previously defined. Check the example below:

<html>
  <head>
    <style>
      .check {
      border: 8px outset blue;
      background-color: gray; 
      text-align: center;
      }
    </style>
  </head>

  <body>
    <div class="check">
    <h2> What is div in HTML </h2>
    <p> This is one of the many important usages of div tag </p>
    </div>
  </body>
</html>

Here’s how the output will look like:

What Is div In HTML?

External CSS

We will use both the panes of HTML and CSS for the <div> tag. Try CodePen to access both the panes together. We shall use a link tag to connect the two codes and name .css file for the href attribute.

Here we have used inserthtml.css which implies the file in CSS will be .inserthtml and the class attribute to be used in <div> tag shall also be defined as inserthtml. Check the below code for more clarity.

<html> 
   <head> 
      <link rel="stylesheet" href="inserthtml.css"> 
      <title> 
         Uses of div in HTML
      </title> 
   </head> 
   <body> 
      <center> 
         <div class="inserthtml">
               <h1> What is div in HTML </h1> 
          <p> This is external CSS.
          </p> 
         </div>
      </center> 
   </body> 
</html>

Now, the CSS code will be as follows:

.inserthtml
{ 
height:150px; 
width:500px; 
 background-color: blue; 
}

Output:

What Is div In HTML?

div As A Web Layout

The layout of a webpage can also be set by using the <div> tag. Here we will use the Internal CSS in <div> as seen earlier.

<html>
  <head>
   
    <style>
      .divascontainer {
        display: flex;
        align-items: center;
        width: 100%;
        height: 350px;
        background-color: red;
      }
.divascontainer > div
      {
        width: 25%;
        height: 100px;
        margin: 150px;
        
       background-color: green;
      }
      
    </style>
  </head>
  <body>
    <div class="divascontainer">
      <div> <left> Hello </left> </div>
      <div> <center> HTML </center> </div>
     
    </div>
  </body>
</html>

Output:

What Is div In HTML?

Multiple layouts can be prepared to alter the above code. The best way shall be to design a UI and then implement it in HTML. I’m sure you will explore it more and it will keep you interested.

div As A Block

Sometimes we want to have a specific font, background, or color for a particular block of the webpage. This can be achieved by using <div>. In the following example, we will have three sections of the page.

First one without a <div> tag. The second section with <div> has a background image and it contains only the portion till this <div> tag ends. The background expands and contracts based on the content this section needs to display. The third and last section of this example has a blue color background and this, again, will only be for the text written till the closing tag.

<html>
  <body>
    <h1>Checking different usage of div tag in HTML</h1>
    <p>This section has no styling and is not a part of div tag.</p>
    <div style="background-image: 
     url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree- 
     736885__340.jpg')">
     <p>
       <center style="color:white">
       Check <br>for <br>the <br>image <br>Is<br> it <br>a <br>big <br>one?
       </center>
     </p>
    </div> 
    <div style="background-color:DodgerBlue;"> What is div in HTML.<br> The 
     background of only this section is blue.<br> This is how we can 
     separate the section of a webpage using div tag
    </div>
  </body>
</html>

Output:

What Is div In HTML?

Conclusion

In this tutorial, we saw multiple ways of using the <div> tag. Such styling tags are essential to building an interactive and responsive webpage. You can learn more about the attributes and styling of the <div> tag here!

To learn how to center text and image in HTML click here! You can learn more such useful techniques on our blog!