HTML | DIV AND SPAN ELEMENTS | HTML BASICS

Share the post

Hello All, Today we will discuss the most important elements in HTML that are div and span elements. If you are a web developer or HTML developer then you might aware that these two elements are used many times while developing any web application, but many people don’t know which element should have to use at what time. Thus, I was thinking to show you the difference between those two elements with a simple example.  

div element : 

The div element is a block element used many times while developing any web application. It will occupy the whole width & always starts with a new line.  

span element :

The span element is an inline element used many times while developing any web application. It will occupy only small width as per the text value & not start with a new line.  

We will find the difference by using below example :

In the below example, we divided the example into two sections. In the first section, you can able to see the div element used inside the paragraph whereas in the second section you can able to see the span element used inside the paragraph.

Please find below HTML :

       
<html>

<head>
    <h1>HTML : div & span elements</h1>
    <style>

    </style>
</head>

<body>

    <h1>div example</h1>
    <h2>This is header one</h2>
    <p>This is paragraph <div>This is div</div> </p>
    <h3>This is header two</h3>
    <br>
    <br>
    <h1>span example</h1>
    <h2>This is header one</h2>
    <p>This is paragraph <span>This is span</span> </p>
    <h3>This is header two</h3>


</body>

</html>

<script>

</script>

Output :

div_span_example
Output

As we can see the above output it’s clearly seen that in the div example div element occupy the whole width whereas in the span example span element has occupied only small width as per text. So, the difference is clearly seen that the div element will occupy the full width whereas the span element will occupy the small width.

Leave a Comment