Console is throwing XML Parsing Errors when loading contents from one HTML file into another

I am using Firefox v123.0.1 (64-bit) to locally view the index.html for a static web page that I am developing, and I want to dynamically load the contents of another HTML file into a <div>. My goal with having several HTML files is to organize the contents of my web page so it is easier to maintain and to reduce the amount of data the client needs to load at once, all while not having to write duplicate code surrounding the <div> (e.g., by creating a web page for each <div> state).

When I write the contents directly into the <div>, I do not get XML Parsing Errors, but when I use jQuery 3.7.1 to load the contents from another HTML file, it has a problem with some void elements that are not explicitly closed like <br> instead of <br/> as well as some boolean attributes that are not explicitly defined like hidden instead of hidden='true'.

I would like to know:

  1. How do I stop these errors from occurring?
  2. Why do these errors happen?
  3. Is there a better way to accomplish my original goal?

I wrote some code in the spoiler below to demonstrate this problem. The errors are detailed as comments. Notice that there are no errors when the contents originate from index.html, but for some unexpected reason, an error occurs when the same contents originate from br.html or hidden.html.

index.html

<!DOCTYPE html>

<html lang='en'>

  <head>
    <link rel='stylesheet' href='app.css'>
    <title>Test</title>
  </head>

  <body>

    <button onclick='updateContainer("#container-with-br", "br.html");'>
      Load HTML containing &lt;br&gt;
    </button>
    <div id='container-with-br'>
      This HTML is from...<br>index.html
    </div>
    <!--
      XML Parsing Error: mismatched tag. Expected: </br>.
      Location: br.html:7:3
      Fixed by changing <br> to <br/>
    -->

    <br>

    <button onclick='updateContainer("#container-with-hidden", "hidden.html");'>
      Load HTML containing hidden element
    </button>
    <div id='container-with-hidden'>
      This HTML is from... index.html <span hidden>and this is hidden</span>
    </div>
    <!--
      XML Parsing Error: not well-formed
      Location: hidden.html:5:48
      Fixed by changing hidden to hidden='true'
    -->

    <script src='jquery-3.7.1.js'></script>
    <script>
      function updateContainer(container, filename) {
        $(container).load(filename);
      }
    </script>

  </body>

</html>

br.html

<!DOCTYPE html>

<html lang='en'>

  This HTML is from...<br>br.html

</html>

hidden.html

<!DOCTYPE html>

<html lang='en'>

  This HTML is from... hidden.html <span hidden>and this is hidden</span>

</html>