HTML Basics: Understanding DIV and SPAN – Why Their Differences Matter and How to Use Them Right

DIV vs. SPAN – How do They Differ?

The two HTML tags DIV and SPAN are generic HTML elements that group related parts of a web page. But they serve different purposes. They can only be used in a meaningful way by using CSS. Both elements are used to define regions of a web page. It is very important to understand the exact difference between <div> and <span>.

In this article, we'll help you understand when and for what purpose each item is used by examining the differences.

1. The DIV tag also known as division tag is a generic Block Element that defines a region of the web page or, in other words, a container that contains content. Unless otherwise specified via CSS, the DIV Element will occupy the full available width of its parent element.

2. In contrast to DIV, SPAN is an Inline Element that can be contained within a DIV container.

The thing about these two HTML tags is that they do not have any kind of semantic meaning at all. A DIV tag is mainly used to position and format regions on the web page. SPAN is primarily used to format pieces of text without interrupting the normal flow of text.

HTML DIV and SPAN Tags Can Be Nested

DIV and SPAN tags can be nested. However, a DIV tag may never be placed inside a SPAN tag. DIV and SPAN tags are empty tags that don't describe any special form of data. In simple terms, they are containers that can be filled with any content.

Using the DIV Tag

In the past, i.e.in the 2000s, almost each website was built using a layout table. This was a nested table that assigned the various rows and columns of the layout to specific table cells. Such layout tables are usually very complex, and many tables have to be nested within each other. This makes the HTML code unnecessarily difficult to read and maintain. In addition, such a layout is only suitable for a specific screen resolution.

Today, Responsive Web Design has become the industry standard. Such a layout automatically adapts to different devices and screen sizes. The regions of the web page are defined by using DIV containers or corresponding semantic HTML tags. These elements are containers that hold the content of the page.

Using <div> for different parts of a web page

<div class="bg-red black">
Navigation: 
&nbsp; 
<a href="…"
   class="button">
   Home
</a>

&nbsp; 
<a href="…"
   class="button">
   Our Service
</a>

&nbsp; 
<a href="…"
   class="button">
   About us
</a>

&nbsp; 
<a href="…"
   class="button">
   Contact
</a>

</div><br>

<div class="bg-silver black">
<p>The content of the page is placed here.</p>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt ut labore et dolore 
magna aliquyam.</p>

<p>Diam voluptua at vero eos et accusam et justo duo dolores 
et ea rebum. Stet clita kasd gubergren, no sea takimata 
sanctus.</p>

<p>No sea takimata, sit amet, consetetur sadipscing elitr. 
Deos Dolores consetetur sadipscing et larorum magnum. Sit 
vero eos at accusam no sea sadipscing.</p>
</div>

Since the HTML DIV tag is a block-level element, the region occupies the entire available width of its parent element and starts on a new line. To learn how to position two DIV containers side by side using CSS, take a look at the CSS Box Model article in the CSS Basics section.

Using the SPAN Tag

The SPAN tag is a generic Inline Container that is used to markup a small portion of text for styling purposes. It is mainly used to colorize small chunks of text.

You shouldn't nest <span> tags unless you know what you are doing. You can place multiple span tags within a block-level element.

The following example demonstrates how a small portion of text can be colorized.

Using <span> for inline areas of the web page

<-- Background: red, Text color: black -->
<div class="BGred black">
Navigation bar
</div>
<-- Background: silver, Text color: black -->
<div class="BGsliver black">
<p>
This example shows how a piece of the text in the content area can be colorized 
<-- Background: yellow, Text color: black, Add extra spacing -->
<span class="BGyellow black mkspc">
like using a highlighter
</span>
. Then it continues as normal.
</p>

<p>
A second paragraph begins here.
</p>
</div>