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 Span Tag?

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




  1. Show the charging percentage
  2. Show the label as red if battery is not 100% charged and green color if 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>
    Your battery is 
			<span id="spnBatteryStatus"></span>

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