HTML Basics: Dive Deep into DIV and SPAN – Exploring Their Differences and How to Use Them Like a Pro

DIV vs. SPAN – How do They Differ?

The two HTML tags DIV and SPAN are generic container 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. People use them both to define and customize 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 an area of the web page or, in other words, a generic 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 a generic 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 style sections of 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="navigation">
  Navigation: &nbsp; 
  <a href="…" class="button">Home</a>
  <a href="…" class="button">Our Service</a>
  <a href="…" class="button">About us</a>
  <a href="…" class="button">Contact</a>
</div>

<div class="mainContent">
<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>

As mentioned above, DIV can only be used in a meaningful way by using CSS.

Styling navigation and main content section

/* Generic Container Elements and Buttons */
:root {
  --FontSize: 1em;
  --navFontSize: 1.25em;
  --navHeight: 2em;
  --navBG: #dddddd;
  --navFG: #000000;
  --mainBG: #fffafa;
  --mainFG: #000000;
  --buttonBG: #cccccc;
  --buttonHoverBG: #d0d0d0;
  --buttonFG: #000000;
  --borderColor: #000000;
}

.navigation {
  padding: 0 0.2em;
  height: var(--navHeight);
  font-size: var(--FontSize);
  font-weight: 450;
  background: var(--navBG);
  color: var(--navFG);
}

.button {
  display: inline-block;
  margin: 0;
  padding: 0 0.375em;
  height: 100%;
  font-size: var(--navFontSize);
  font-weight: 500;
  text-align: center;
  text-decoration: underline;
  background: var(--buttonBG);
  color: var(--buttonFG);
  color: 1px solid var(--borderColor);
  cursor: pointer;
}

.button {
  background: var(--buttonHoverBG);
}

.mainContent {
  padding: 0.5em 0.2em;
  font-size: var(--FontSize);
  background: var(--mainBG);
  color: var(--mainFG);
}

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 an inline area of the web page

<-- Background: red, Text color: white -->
<div class="navigation">
Navigation bar
</div>

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

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

Define areas for navigation and main content

/* Define Generic Container Elements */
:root {
  --FontSize: 1em;
  --navFontSize: 1.25em;
  --navHeight: 2em;
  --navBG: #dd0000;
  --navFG: #fdfdfd;
  --mainBG: #cccccc;
  --mainFG: #000000;
  --BGyellow: #ffff00;
  --FGblack: #000000;
  --FGwhite: #ffffff;
}

.navigation {
  padding: 0.25em 0.2em;
  height: var(--navHeight);
  font-size: var(--navFontSize);
  font-weight: bold;
  background: var(--navBG);
  color: var(--navFG);
}

.mainContent {
  padding: 0.5em 0.2em;
  font-size: var(--FontSize);
  background: var(--mainBG);
  color: var(--mainFG);
}

.bg-yellow {
  background: #ffff00;
}