HTML Div and Span

HTML classifies elements in two different categories: block-level elements and inline elements.

Let's start off with understanding what are block-level elements.

Block-level elements appear on new lines, a characteristic feature of block-level elements.

Some block-level elements that we've explored uptil now in this course include <h1> to <h6>, <p>, <pre>, <blockquote>, <ol> and <ul>, etc.

The opposite of a block-level element is an inline element:

Unlike block-level elements, inline elements appear on the same line alongside adjacent inline elements.

We've also explored many inline elements in the previous chapters, including <a>, <code>, <samp>, <q>, <mark>, <ins>, <del>, <b>, <i>, and so on.

It's not really very difficult to imagine this distinction for real.

For example, consider the two elements <p> and <b>. <p> as we already know is used to denote a paragraph, i.e. a block of text, whereas <b> is used to denote a small piece of text (in a larger portion of it) to be formatted as bold.

Now, <b> is an inline element while <p> is a block-level element.

We customarily use <b> (which is inline) inside <p> (which is block-level), to format some parts of text of the underlying paragraph as bold. However, we never use <p> inside <b>.

Another way to remember this distinction between <p> and <b> is by virtue of the fact that two adjacent <p> elements are rendered on different lines whereas two adjacent <b> elements are rendered next to one another. Likewise, <b> is inline and <p> is block-level.

Moving on, when we ought to use the semantics of inline elements to denote whole blocks of content (notice the emphasis on the word 'blocks'), there's a point we must take note of.

That is described as follows:

This isn't strictly required in HTML per se but it's considered a really good practice.

We already saw such an example, in fact quite a few examples, in previous chapters.

For instance, we already know that the <code> element (an inline element) is used to denote an inline piece of code in some text. If we want to denote a whole block of code using it, we won't (and ideally shouldn't) be doing the following:

<code>var x = 10
var y = 100</code>

Instead, we'd (and ideally should) wrap <code> inside <pre> (additionally because we even need the block of code to be preformatted) which is a block-level element.

Like the following:

<pre><code>var x = 10
var y = 100</code></pre>

Once again, this isn't required in HTML — we can just stick to using <code> all alone (and possibly preformat it using CSS) — but it's a good practice to wrap up <code> with a block-level element such as <pre> when representing a block of code.

Now, there are a multitude of block-level elements and a multitude of inline elements in HTML. We just identified a bunch of them in the discussion above.

But there are two such elements, meant to be used as generic containers, that are particularly worth consideration. One is <div> and the other is <span>.

Let's start off with the <div> element.

The term 'div' stands for 'division' and emphasizes on the fact that <div> is used to create a division (a segment) of content in an HTML document.

But what's the use of <div>?

More often than not, we'll come across the need to wrap up content with a block-level element in HTML that doesn't have any semantics (and likewise any default styling) attached to it.

For example, suppose we want to wrap up a level-2 heading along with a paragraph inside a container. What options do we have for the element to represent this container?

Think about it.

Can it be <p>? Absolutely not — a <p> element can't contain a <p> itself! Can it be <pre>? No, we don't need any preformatting. Alright, so can it be <ol>? Seriously! <ol> is for lists.

Well whatever we choose, our choice would end up to be inappropriate in one way or the other. What we really seek here is a generic container, one that carries absolutely no semantic or stylistic significance with it. It should just be able to wrap up any piece of content without any styling applied to itself by default.

This is essentially what <div> is there for.

Let's demonstrate using <div> in this very example.

In the following code, we wrap up a level-2 heading along with a paragraph inside a <div> element:

<h1>A heading</h1>

<div>
   <h2>A sub-heading</h2>
   <p>This is a paragraph.</p>
</div>

If we take a look at the output produced, as follows,

there's absolutely no difference between when we have the <div> wrapping up the <h2> and <p> vs. when we don't have it.

This is simply because <div>s don't carry any special style information with them unlike almost all block-level elements in HTML.

We can, however, obviously manually style the <div> to produce a visual clue of it being there. This is done below:

<h1>A heading</h1>

<div style="background-color: yellow">
   <h2>A sub-heading</h2>
   <p>This is a paragraph.</p>
</div>

Since the <div> contains the <h2> and the <p>, the background color applied to it encapsulates both these contained elements.

The <div> element kind of groups the <h2> and <p> together. We can treat <h2> and <p> as a single unit from the perspective of the <div>. And, if we want to, we can even work with them individually.

<div> is simply amazing, isn't it?

If we take a look out there at most of the websites, we notice a pretty high usage percentage of <div> elements amongst the total number of elements therein. This signifies the sheer importance of <div> in HTML, precisely as a generic block-level container.

Now, let's talk about the <span> element.

Unlike <div>, <span> is NOT intended to denote blocks of content, rather it's just meant to generically mark up any inline content.

In other words, <span> can appear in block-level elements but can't itelf contain them (in fact, this is true for almost all inline elements).

Let's say we want to replicate a terminal (such as Command Prompt in Windows, Bash in Linux, etc.) program's display in HTML.

A naive implementation follows:

<pre><samp>C:\Users&gt; <kbd>echo Hello World!</kbd>
Hello World!

C:\Users&gt;</samp></pre>

Recall the <kbd> element from the HTML Foundation — Code chapter; it's used to denote keyboard input. It's used here since the text 'echo Hello World!' is input by the user.

Shown below is the rendered output of the code above:

C:\Users> echo Hello World!
Hello World!

C:\Users>

To add some spice to it, let's give the <pre> element a black background color and its text a white color. This is accomplished below:

<pre style="background-color: black;color: white;"><samp>C:\Users&gt; <kbd>echo Hello World!</kbd>
Hello World!

C:\Users&gt;</samp></pre>

C:\Users> echo Hello World!
Hello World!

C:\Users>

Much more similar to an actual terminal.

But what does this all have to do with the <span> element? Well, everything, as you'll figure out very soon shortly.

The phrase C:\Users above denotes what's called an input prompt. In this case, it tells us where we currently are on our system.

Conventionally, terminal software specifically styles input prompts. We can too in the example above but before that we need to mark up the prompt text C:\Users with some element. The question is: Which element to use?

Shall we use <code>? Well we could but it doesn't make sense to, since, strictly speaking, the text C:\Users isn't code. Shall we use <samp>? Well, we already are inside <samp> so why would we use it again! Maybe <kbd>? Not at all! That's for keyboard input.

What we really need here is a generic inline container. And so the perfect candidate for this job is the <span> element.

Following we mark up the prompt text using <span>:

<pre style="background-color: black;color: white;"><samp><span>C:\Users&gt;</span> <kbd>echo Hello World!</kbd>
Hello World!

<span>C:\Users&gt;</span></samp></pre>

C:\Users> echo Hello World!
Hello World!

C:\Users>

But that won't obviously produce any stylistic change; we need to also apply some CSS to the <span>s in order to alter the styles of the input prompts.

For now, let's go with a simple style for the prompt text: giving it a grey color.

This is accomplished below:

<pre style="background-color: black;color: white;"><samp><span style="color: grey">C:\Users&gt;</span> <kbd>echo Hello World!</kbd>
Hello World!

<span style="color: grey">C:\Users&gt;</span></samp></pre>

C:\Users> echo Hello World!
Hello World!

C:\Users>

As can be seen, the prompt text is now distiguishable from the rest of the text in the emulated terminal, thanks to the <span> element and some basic CSS.

Perfect!

One super important concept to get used to when working with <div>s and <span>s, and even other elements in HTML in general, is that of the class attribute.

For example, let's say we want to have a bunch of <p> elements on an HTML page, styled as caption text in a way we like (maybe italicized, colored grey, and so on). In order to style these <p> distinctively, we can set a class attribute on them with the same value.

This class can then be easily selected using CSS and given styles to in order for those styles to be applied to all the elements having that class.

Usage of class proves to be an indispensible feature in HTML, especially when we're working with the generic containers <div> and <span>.

The class attribute can be used to give some kind of a semantic meaning to <div> and <span> elements in HTML (albeit only in the source code), and thus help a developer better understand their purpose in given piece of code.

Let's take an example.

Suppose we have a <div> element to represent the table of contents of a large piece of text. The heading is represented by an <h2> and the actual table of contents by an <ol> element:

<div>
   <h2>Table of contents</h2>
   <ol>
      <li>Introduction</li>
      <li>...</li>
   </ol>
</div>

If we just take a look at this code, especially the <div>, we can't really see what its purpose is or what it's trying to annotate.

To do so, we can add the class attribute to the <div>, as follows:

<div class="toc">
   <h2>Table of contents</h2>
   <ol>
      <li>Introduction</li>
      <li>...</li>
   </ol>
</div>

The value of the attribute is "toc", where toc is the class that the <div> now belongs to. The word toc is simply our own chosen abbreviation for 'table of contents'.

If we now take a look at the code (with class), it does seem to convey something to the reader of the code. That is, we can now see that the <div> element represents a table of contents section.

Do keep in mind though that HTML class names aren't just used to give semantic information to <div>s and <span>s in the source code; in fact, almost always, class names are used to aid in styling a set of elements using CSS.

We shall defer learning how to style a given set of elements with a given class over to the HTML Metadata — Style Sheets chapter, where we explore CSS in more detail.

While working with the <div> and <span> elements in HTML, there are a few things to note, as discussed in this section.

<div> can be nested inside <div>

If we take a look at some block-level elements in HTML, we see that most of them can NOT be nested within one another.

For instance, we can't put a <p> inside a <p> (it doesn't even make sense). Similarly, we can't put an <h1> inside an <h1> (no sense again). As another example, we can't put a <pre> inside a <pre> (no sense, yet again).

However, when we talk about the <div> element, it enjoys this rare feature that it could be nested inside another <div>.

Outer <div>s defines divisions while inner <div>s define subdivisions of these divisions. Makes perfect sense.

Let's take a look at a concrete example.

In the following code, we have a top-level <div> representing the entire table of contents section (same as above) with two <div>s nested directly inside it:

<div class="toc">
   <div class="toc-header">
      <h2>Table of contents</h2>
      <p>This text contains a total of 19 chapters.</p>
   </div>
   <div class="toc-body">
      <ol>
         <li>Introduction</li>
         <li>...</li>
      </ol>
   </div>
</div>

These <div>s denote the header of the table of contents and its body, as is apparent by their class names, respectively.

<div> can't be nested in some block-level elements

There are some block-level elements in HTML that can NOT contain any other block-level elements, including <div>.

For example, we can't put a <div> inside a <p> element, as shown below:

<p>A paragraph can't contain <div>divs</div>.</p>

A <p> element is intended for a block of text representing a paragraph — that's it. Putting <div>s inside it doesn't make much sense, if at all.

<span> can't contain any block-level element

Although this point has been discussed already in the sections above, we'd like to emphasize on it once more.

That is, a <span> element can NOT contain any block-level element in it. This follows right from the fact that it's an inline element.

So, the following is considered bad HTML:

<span>A span can't contain a <div>div</div>.</span>

If we really wish to have a block-level element inside an inline element, we can do so only visually using some CSS while the code still has an inline element inside an inline element in the source code.

This is demonstrated below:

<span>A span can contain an <span style="display: block">element with a block-level–like effect</span> using CSS.</span>

We consider the display CSS property in detail in the CSS Layout — Display and Visibility chapter.