## What is an HTML entity?

**HTML** has reserved some characters to serve as a part of its syntax. For example, `<` and `>` signs are reserved for tags. To print these reserved characters in your text, you need to use an *ampersand* before them, followed by the *entity name* or the *entity number*. Here is how you print a `<` and `>` signs in your text:

| Symbol | Entity Name | Entity Number |
|-|-|-|
| `<` | &lt | &#60 |
| `>` | &gt | &#62 |



One would naturally wonder, "If ampersand is used to print different special characters, how will we print the `&` sign?".

The answer to this is, a separate entity name and entity number are used to print `&`. 

| Symbol | Entity Name | Entity Number |
|-|-|-|
| `&` | &amp | &#38 |

Below is a sample of how to incorporate `&` into your HTML text:

<html>
 <head>
 </head>
 <body>
   <h2>Shopping List</h2>
   <p>Apples &amp; Bananas &amp; Carrots &amp;</p>
   <p>Shampoo &#38; Soda &#38; Dog food</p>
 </body>
</html>

document.addEventListener("DOMContentLoaded", function () {
  pTag = document.querySelector("div");
  newVal = document.createElement("p");
  newVal.innerHTML = 'Hello, Hello';
  pTag.appendChild(newVal);
});

// Async Tests Example
/*
window.onModulesLoaded = new Promise( function( resolve, reject ) {
  setTimeout(function() {
    pTag = document.querySelector("div");
    pTag.innerHTML = '';
    newVal = document.createElement("p");
    newVal.innerHTML = 'Hello World';
    pTag.appendChild(newVal);
    resolve();
  }, 100)
});
*/

var TestResult = function() {
  this.succeeded = false;
  this.reason = "";
  this.input = "";
  this.expected_output = "";
  this.actual_output = "";
};

var executeTests = function(
  userJsCode,
  userCssCode,
  userHtmlCode,
  userHtmlPage
) {
  var results = [];

  const jsdom = require("jsdom");
  const { JSDOM } = jsdom;
  const dom2 = new JSDOM(userHtmlPage, { runScripts: "dangerously" });

  const pTag = dom2.window.document.querySelector("p");

  const result = new TestResult();
  result.expected_output = "Hello World";
  result.input = "Html page";

  if (!pTag) {
    result.actual_output = "null";
    result.succeeded = false;
    result.reason = "No p tag found";
  } else {
    const pTagText = pTag ? pTag.textContent : "";
    result.actual_output = pTagText;
    if (pTagText.trim() != "Hello World") {
      result.reason = "Expected output (Hello World in a p tag) did not match";
      result.succeeded = false;
    } else {
      result.succeeded = true;
      result.reason = "Found p tag with Hello World";
    }
  }

  results.push(result);

  return results;
};

// Async Tests Example
/*
var executeTestsAsync = function(
  userJsCode,
  userCssCode,
  userHtmlCode,
  userHtmlPage
) {
  var results = [];
  return new Promise(resolve => {

    const jsdom = require("jsdom");
    const { JSDOM } = jsdom;
    const dom2 = new JSDOM(userHtmlPage, { runScripts: "dangerously" });

    if (!dom2.window.onModulesLoaded) {
      console.log("window.onModulesLoaded not found!");
    	resolve(results);
    }
    dom2.window.onModulesLoaded.then(()=>{
      const pTag = dom2.window.document.querySelector("p");

      const result = new TestResult();
      result.expected_output = "Hello World";
      result.input = "Html page";

      if (!pTag) {
        result.actual_output = "null";
        result.succeeded = false;
        result.reason = "No p tag found";
      } else {
        const pTagText = pTag ? pTag.textContent : "";
        result.actual_output = pTagText;
        if (pTagText.trim() != "Hello World") {
          result.reason = "Expected output (Hello World in a p tag) did not match";
          result.succeeded = false;
        } else {
          result.succeeded = true;
          result.reason = "Found p tag with Hello World";
        }
      }

      results.push(result);
      resolve(results);
    });
  });
};
*/

What is an ampersand in HTML?

What is an HTML entity?