Articles → HTML → Span Tag In HTML

Span Tag In HTML

What Is An Inline Element?

Picture showing the horizontal space specifies the width of the browser
Click to Enlarge

What Is A Span Tag?

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




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

Picture showing the output of span tag in html
Click to Enlarge

  1. Update the battery status
  2. Change the color

<!DOCTYPE html>
<html lang="en"
    <meta charset="utf-8" />
    <title>Span Demo</title>
        .HundredPercentCharged {
            color: blue;

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

Try It

Browser Support

Internet ExplorerFirefoxChromeSafariOperaEdge

Posted By  -  Karan Gupta
Posted On  -  Monday, November 21, 2016
Updated On  -  Sunday, December 3, 2017


Your Email Id  
Query/FeedbackCharacters remaining 250