HTML Basics: Unlocking the Secrets of DIV vs. SPAN – Your Ultimate Guide to Their Differences

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 areas 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. If not specified anything else via CSS, a DIV element takes up the entire available width of its parent element.

2. In contrast to DIV, SPAN is an inline element that can be used 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 text without interrupting the normal flow of text.

Inline elements must always be placed inside a block element and may not themselves contain any block elements.

A DIV container may contain other DIV containers as well as other inline and block elements.

In contrast, a SPAN container may only contain other inline elements.

SPAN containers are mainly used to define a different font, font size, font style, text or background color for certain text passages.

The HTML DIV and SPAN Tags can be Nested

The DIV and SPAN tags can be nested. However, a DIV tag may never be placed inside a SPAN tag. The 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="…">
  <button type="button">
  <big>Home</big>
  </button>
</a>

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

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

&nbsp; 
<a href="…">
  <button type="button">
  <big>Contact</big>
  </button>
</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 area occupies the entire available width of the parent element and starts on a new line. To learn how to position two DIV containers side by side using CSS, see the article CSS Box Model in the chapter CSS basics.

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>