title: How to load an html page inside an existing html page
body: <p>Good day!</p>
  
  <p>I am creating a website that have several HTML pages. My main page is divided as follows using the <code>div</code> code:</p>
  
  <p><img src="https://i.stack.imgur.com/sdoGa.jpg" alt="main page"></p>
  
  <p>I've decided that the header, the left column and the footer will be same for all pages. Without using the <code>FRAMES</code> in html, Is it possible that when I click the BUTTON 1 (I used hyperlink code <code>&lt;a href="Catalogue.jsp" class="widget" &gt;Catalogue&lt;/a&gt;</code>) the page called will be loaded inside the right column? I've read <a href="https://stackoverflow.com/questions/3564356/loading-html-page-inside-div">this article</a> but I don't know which is the best solution to my problem (and honestly, i don't know how to insert it in my codes because I tried  this code <code>$("#mydiv").load("myexternalfile.html");</code> and it didn't work.. I think i am missing something.. How can i do the code, if i click the hyperlink, show this page inside the right column...).</p>
  
  <p>Also, I am wondering if it is faster or more commonly used if I do this method instead of reloading the whole page everytime even though my header, leftcolumn, and footer will be the same for all of my pages. What will be the cons if i do this to all of my pages? </p>
  
  <p>Thank you in advance.</p>