Syntax explanation for html()

Syntax explanation for html()

Hi

Here is a code to get the background color when you click on a color:


<!DOCTYPE html> 
<html> 
<head> 
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
 $( "div" ).click(function() { 
      var color = $( this ).css( "background-color" ); 
      $( "p" ) .html( "That div is <span style="color:" + 
        color + ";">" + color + "</span>." );  
    });
  <meta charset="utf-8"> 
  <title>JS Bin</title> 
    <style> 
  div { 
    width: 60px; 
    height: 60px; 
    margin: 5px;    
  } 
  p { 
    margin-top:20px; 
    padding: 5px; 
    border: 2px solid #666; 
  } 
  </style> 
</head> 
<body> 
<div style="background-color:red;"></div> 
<div style="background-color:rgb(16,99,30);"></div> 
<div style="background-color:#523456;"></div> 
<div style="background-color:#a11;"></div> 
  <p></p> 
</body> 
</html>


I did not understand the highlighted code of <span>. Can this be explained to me?
The full solution is here Tutorial Link

Thanks so much
Jayashree