What is div in html | html div tag full explanation

What is div in html | html div tag full explanation

What is div in html | html div tag full explanation

What is a div in html?

A div tag is actually a section or division in your website. You may wonder why does <div> exists when there is a tag called <section>. This is because <div> is much much easier to use to style in CSS and code in JavaScript later on.

In other words, we can call div as a container for storing your HTML elements to be easily accessed later on to style in CSS or add functionality in JS. You can actually keep almost any HTML element inside a div.
We can use div as a container to separate many types of HTML elements in our website. A div is also known as a block element compared to the span tag. So let's see some examples.


html Div in Text

Now let's first see how div works for text. First paste this simple code block in your HTML file:


 <div>welcome to codewithrandom blog</div>
    <div>welcome to codewithrandom blog</div>
    <div>welcome to codewithrandom blog</div>

Let's see the output of this easy code block:


What is div in html | html div tag full explanation


As you can see, when div sentences are added to our code, a line break is added by default. This shows easily that a div is like a container and in this example, it differentiates the three sentences easily.

We will now see why I mentioned earlier that div is easy to style in our CSS code or to add functionality in JavaScript code.

html div style Easily

So now we are going to give a class for each of the div and style them easily with CSS. We can also use ID if you want compared to class but it depends on how you're going to use this div element in your project.
First paste the code below in your HTML file:


    <div class="text1">welcome to codewithrandom blog</div>
    <div class="text2">welcome to codewithrandom blog</div>
    <div class="text3">welcome to codewithrandom blog</div>

Then in CSS, paste the code below:


    .text1{
        color:white;
        background-color: blue;
    }
    .text2{
        color:black ;
        background-color:mediumturquoise;
    }
    .text3{
        color:black;
        background-color: gold;
    }

Your final output would be:

What is div in html | html div tag full explanation

I hope this article gives you some good clarity on what is a Div and how you can use it to make your coding smoother, easier and much better.

written by @codingporium

Thanks for reading! Do contact me via the methods below if you have to say anything:

Post a Comment

Previous Post Next Post