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)

Syntax


<span></span>



Example






  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"
		xmlns="http://www.w3.org/1999/xhtml">
		<head>
			<meta charset="utf-8" />
			<title>Span Demo</title>
		</head>
		<body>
    Your battery is 
		
			<span id="spnBatteryStatus"></span>
		</body></html>





Browser Support


Internet ExplorerFirefoxChromeSafariOperaEdge
YesYesYesYesYesYes



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

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250