HTML span Tag Tutorial

In this section, we will learn what HTML <span> element is and how to use it.

What is <span> Tag in HTML?

HTML <span> element is a container just like HTML <div> element but an inline one!

We use it when we have a paragraph in a document and want to style or modify part of that content.

You see, when we want to create a paragraph, most of the time it’s the <p> element that is used for this purpose.

Basically, the <p> element is the container of our paragraph in a document. So now if we want to change the style of that paragraph with CSS or access the content via programming languages like JavaScript, we can call the <p> element and from there, access the inside content.

But with only <p> element, it is difficult to access only a specific part of the content and modify it!

So, this is where we can use HTML <span> element.

When we have inline content and want to modify part of that content via CSS or JavaScript, we can put the specified part as the body of the <span> element and then easily call that <span> element to access the specified content.

HTML <span> Tag Syntax:

<span> content </span>

Example: using <span> tag in HTML

See the Pen using <span> tag in HTML by Omid Dehghan (@odehghan) on CodePen.

Leave a Reply