What is a Div in HTML? HTML Div Tag Explanation

What is a Div in HTML? HTML Div Tag Explanation

What is a Div in HTML? HTML Div Tag Explanation
What is a Div in HTML? HTML Div Tag Explanation

 

What is a Div in HTML?

A div tag is actually a section or division in your website. You may wonder why <div> exists when there is a tag called <section>. This is because <div> is 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 into 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:

50+ HTML, CSS & JavaScript Projects With Source Code

 
What is a Div in HTML

 

 

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

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.

5+ HTML CSS Projects With Source Code

First, paste the code below into 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 a Div in HTML
What is a Div in HTML

 

15+ Product Card Using HTML and CSS [ Demo + Code]

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

written by @codingporium



Tags: , ,

Leave a Reply