Using the same Header/Nav on every page

Question

I've used HTML, CSS, and JS before but mostly just for projects that needed one or two pages. Now I'm working on a more complex project with a lot of pages. Every page needs to include an identical header/nav on top. Most pages also need links to various style sheets. I'm sure there must be an easier way then changing everything on every page individually. Is there a way to have all the pages use the same file for the header? (Also I'd prefer not to use JS or PHP just pure HTML/CSS which is why this answer, did not help)

Answer 1

OK, this looks like it actually needs an answer.

There are various ways to do what you want, and it depends on whether you are making a webpage or Single Page App.

If you making a single page app, then you would only have one html file with the header and footer anyway, then you'd use something like HTML Imports, or Ember or Angular to change the content. In this case, you don't have a problem, as the header/nav/footer only exist once anyway.

If you are not making that, then you go down two routes,

1) Use whatever server side language you want (PHP, ASP.NET, Python, Ruby, Node.js etc etc etc). If you are using PHP, make files called header.php, nav.php and footer.php. Then in your index.php file use:

<?php include('header.php'); ?>
<?php include('nav.php'); ?>
<h1>Title of Page</h1>
<?php include('footer.php'); ?>

2) The preferred option - grab a templating library, e.g. PHP's Twig, or use whatever is built into your framework, e.g. Laravel's Blade.

Use those tools to build up the page.

If you can't use PHP or any other server side language, then sort yourself out so you can. Hosting with PHP particularly is very cheap and very easy to sort out.