Articles → HTML → Span Tag In HTML

Span Tag In HTML

In this article, we will discuss span tags in HTML.

What Is An Inline Element?

Before I explain the span tag, it is important to understand some basics. The concepts you should know are – inline elements and block elements. Let me try to explain it.

Consider the following figure: -

Picture showing the horizontal space specifies the width of the browser

Here the rectangle box represents the browser and the horizontal space represents the width of the browser.

If an HTML element starts with the new line and takes the full available width of the browser, then that element is a block-level element. A break (br) element in HTML is one example of block level element.

While inline elements are those that take only necessary space and do not start with the new line.

What Is A Span Tag?

Span is used to: -

Styling the inline element (using a style sheet)
Identify the inline element (using a script)

Syntax

<span></span>

Example

Consider an example in which you want to display information about your mobile battery status. (You can assume that you are getting the status from some data source).

Our requirement is: -

Show the charging percentage
Show the label as red if the battery is not 100% charged and green color if the battery is 100% charged.

See the below figure.

Picture showing the output of span tag in html

In both requirements, we identify the inline element and

Update the battery status
Change the color

For the above scenario, we can use span.

<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Span Demo</title>
    <style>
        .HundredPercentCharged {
            color: blue;
        }

        .LessThanTenPercentCharged {
            color: red;
        }
    </style>
</head>
<body>
    Your battery is <span class="HundredPercentCharged">100% charged</span> <br />
    Your battery is <span class="LessThanTenPercentCharged">10% charged</span>
</body>
</html>

Try It

Here we have uniquely identified the inline element through id. We can apply style or change the value using the script.

Browser Support

Internet Explorer	Firefox	Chrome	Safari	Opera	Edge
Yes	Yes	Yes	Yes	Yes	Yes

Posted By -	Karan Gupta

Posted On -	Monday, November 21, 2016

Updated On -	Sunday, December 3, 2017

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**