Web design noob here... Is there a way to do web design where certain elements in the template like the table of contents, header, footer, etc. exist separately from the content? I want to do this so that if I ever want to change something in the header, for example, I only have to make one change instead of making it on every page.
Yes. Pretty much any CMS offers this, but many write their own lightweight CMS. You can also do it with SSI using virtual includes, but that's a bit hacky.
Make 3 files. 2 of them can be PHP files header.php and footer.php The third file is index.html Add all your header info into the header.php and all the footer info in the footer.php. Then all you need to do is include those 2 files into each html page.
Adding on to what the above had said, you could either use php include or ajax include (Of course, you've to be on a .php page to include php, could just use a normal .html page if you use ajax include). Google them for more information.