HTML Basics: Defining layout containers with DIV • defining areas • web design through areas with DIV and SPAN

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 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.

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.

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.

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.

<-- 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 part of the text in the content area can be colored 
<-- Background: yellow, Text color: black, Add extra spacing -->
<span class="BGyellow black mkspc">
like with a highlighter
</span>
. Then it continues as normal.
</p>

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