title: mismatched tag. Expected: </link>, when loading .html with jQuery .load()
body: <p>I'm loading a .html file onto a div with id <code>#content</code>. Upon loading the external .html file I get the following error: <code>mismatched tag. Expected: &lt;/link&gt;.</code> </p>
  
  <p>Here's the html file I'm loading: </p>
  
  <pre><code>&lt;head&gt;
  &lt;link rel="stylesheet" href="css/landing.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="panel-header"&gt;
          &lt;p&gt;Lokacija&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="panel-body"&gt;
          &lt;p&gt;Institut Jožef Stefan&lt;/p&gt;
          &lt;p&gt;Jamova 30&lt;/p&gt;
          &lt;p&gt;1000 Ljubljana&lt;/p&gt;
          &lt;div id="map-canvas"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="panel-header"&gt;
          &lt;p&gt;Kontakt&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="panel-body"&gt;
          &lt;p id="info"&gt;informacije:&lt;/p&gt;
              &lt;a href="#"&gt;&lt;span class="ion-email icon-link-mail"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;a href="tel:+38614773304 "&gt;&lt;span class="ion-ios-telephone icon-link-phone"&gt;&lt;/span&gt;&lt;/a&gt;     
          &lt;p&gt;izposoja:&lt;/p&gt;
              &lt;a href="#"&gt;&lt;span class="ion-email icon-link-mail"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;a href="tel:38614773304"&gt;&lt;span class="ion-ios-telephone icon-link-phone"&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;p&gt;bibliografije:&lt;/p&gt;
              &lt;a href="#"&gt;&lt;span class="ion-email icon-link-mail"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;a href="tel:38614773247"&gt;&lt;span class="ion-ios-telephone icon-link-phone"&gt;&lt;/span&gt;&lt;/a&gt;       
          &lt;p&gt;vodja knjižnice:&lt;/p&gt;
              &lt;a href="mailto:luka.sustersic@ijs.si"&gt;&lt;span class="ion-email icon-link-mail"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;a href="tel:38614773258"&gt;&lt;span class="ion-ios-telephone icon-link-phone"&gt;&lt;/span&gt;&lt;/a&gt;       
      &lt;/div&gt;
      &lt;div class="panel-header"&gt;
          &lt;p&gt;Delovni čas&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="panel-body"&gt;
          &lt;p&gt;Pon-čet: 8.00-17:30&lt;/p&gt;
          &lt;p&gt;Pet: 8.00-17:00&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="panel-header"&gt;
          &lt;a href="http://www.cobiss.si/scripts/cobiss?command=CONNECT&amp;base=50108"&gt;&lt;p&gt;Katalog&lt;/p&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>If I try removing the <code>&lt;head&gt;</code> tags, I get another error <code>not well formed</code>. Is there another, more proper way to do this? Should I just be linking all the css I'll be needing for everything I load onto my main page?</p>