Why is span Tag Used in HTML

The HTML <span> tag allows you to set style for part of your page. It is an inline element that can be used to group elements for styling purposes or to apply certain CSS property values to one particular sub section of the content. When using the HTML span element, it should be styled using CSS if you wish to change the look of your document.

The <span> tag provides no visual change by itself. It is normally used in conjunction with Cascading Style Sheets (CSS) to style sections of text. The <span>tag can be used to color portions of text, apply styles and generally affect a portion of a line within the browser window.

Like other elements <span> element comes also in pairs, like this: <span>text here…</span>. All the styling information is held between the opening and closing span tags. But it’s important to note that it will only style whatever text falls between those two tags. It’s also important to remember that you’ll need to code your style sheets properly in order for anything to actually happen.

Also Read: HTML div Tag

The <span> tag is a generic inline container used to mark up a part of a text, or a part of a document. If you want to style the element differently, you can add the class attribute to the opening tag and use the class name in the style sheet. <span> tag can also be used with id and class attributes.

In an example below let’s write a code to clear your your doubts about <span> tag.


<p>Learn to code with <span> crus4</span> for free.</p>

Now you may get confused after running this code. Because you don’t see anything special there. This is what I already told you that <span> tag provides no visual change by itself. So to make something new let’s add CSS to the <span> element.


<p>Learn to code with <span style="color:blue; font-weight:bold"> crus4</span> for free.</p>
Why is span Tag Used in HTML