Division Tags in HTML

Division Tags plays a vital role in web development.

Division tag means the tag which contains various tags inside or a part of a page or a section.

<div> is used for division tag. Division tag takes the total width of body element for example , the  father and mother amount is for their sons or daughters.

Division tag takes total width of browser

Sorry for insufficient quality of image !

Example:

Case-1:

<div>I am the context of division tag(div)</div>

Above example contains small content.   

Case-2:

<div class="div">

    <img src="some image">

    <a href="https://www.google.com/">Google</a>

    <p>My div container contains many tags.</p>

    <li>Ducati</li>

</div>

In this div tag contains many tags.

Case-3:

<div>

    I can take the width of body element.

</div>

<span>I am span tag I am start in next line if above element is block level.</span>

In this above example the <span> tag element starts after the division tag in a new line.Because the Div tag takes full width.

 For clear demonstration I created Ms word template to understand

Div vs Span

 Case-4:

<span>My name is </span>

<span>Hulk</span>

Span tags the width of content . The next span tag start to continue in same line.

Span vs Span