In this video, we are going to expand on a tag in close relation to <div> called the <span>. In the last video, we learned about <div> and its many benefits, but <span> carries its own collection of perks.

Below is an example of a span tag:

<span>My amazing content</span> 

With a quick glance, it is easily identified that the <span> tag is indented. This, is this how HTML renders <span> when compared to <div>. A more important difference is that the <span> tag does not create a line break like a <div>.

To further demonstrate, here is a <span> tag inside the first <div>. As a result, the content gets added to the content of the <div>.

<div>
My first type of content
<span>My amazing content</span>
</div>     <!-- My first type of content My amazing content -->

A<span> tag's purpose is simply to select items on a certain line.

For demonstration, we will bring a visitor's attention to the words "type of content". By putting that content inside a <span> tag otherwise know as an inline tag we able to do so.

<div>
my third <span>type of content</span> goes here

With this step alone, nothing obviously changed because nothing special has been added yet. To see the difference, we'll quickly use CSS coding to change the color of this text to red (CSS code will be gone through in depth in later sections).

<span style="color: red;"> type of content </span> 

Now, the text color is changed to red.

Do not be concerned about the style or the syntax now because details will be explained later. For now, it is important to grasp the difference between a <div> and a <span> tag, and how each can be utilized.

In short, <span> allows you to select certain parts of the sentence and change its style, without giving a line break. If a <div> was used here instead of a <span>, the content would look as below:

This is definitely not what we were trying to achieve. To change the style of a few words within a sentence, a<span> is the correct selection.