Is there a quicker way to update all pages in a HTML website?

Question

I've made a website with multiple pages, and each page has a header containing a horizontal navigation bar. Every time I've learned something new about HTML or had an idea regarding the design of the heading, I've changed the header. However, after learning and changing some things a couple of times, I realized that I would have to copy and paste the code for the header for each page I had on the website, and I thought that for larger websites, this could be a very time consuming process. Is there any way to save that amount of time?

• I completely understand that it's best to just have the code complete before you add it to other pages.
• I'm completely ok if the truth is that I have to just do the work and not take any shortcuts.
• I'm aware that there are no functions in HTML, I just wanted to make sure that I wasn't coding sloppily or doing anything unnecessary.

I'm currently in the process of learning HTML and CSS, so I apologize if my question seems dumb or absurd in any way. Also, sorry if the title was worded poorly or abnormally, I wasn't entirely sure how to summarize this into one question.

Thanks,

-Ethan S.

Answer 1

What you want is includes. There are several ways to have includes:

• Frontend process (preprocessing) with task managers like Gulp, Grunt, Webpack you can embed the same partial HTML into multiple destinations.
• Backend process : when using a back-end language, you can achieve this as well.

For simplicity, and given your knowledge is likely 100% front-end only, I would recommend one of the following:

1. JavaScript: the option for absolute beginners. No backend require, but generally not recommended (potentially insecure, bad practice)

    <!DOCTYPE html> <html> <head> <title>My site</title> </head> <body> <div class="header-container"></div> <script> (async function () { const headerHTMLRequest = await fetch('./header.html'); const headerHTML = await headerHTMLRequest.text(); document.querySelector('.header-container').innerHTML = headerHTML; })(); </script> <!-- rest of page --> </body> </html> 

2. PHP: it's an interpreted back-end language and there are several tools like MAMP or XAMPP that will provide you with an out-of-the-box solution for having a server. There are plenty of free hosting alternatives as well.

    <!DOCTYPE html> <html> <head> <title>My site</title> </head> <body> <?php include("header.html"); ?> <!-- rest of page --> </body> </html> 

Hope this makes sense. I tried to keep it simple.

Answer 2

I feel your frustration. Okay, I know some people freak out at the thought of PHP, but bear with me. If you have a header you like that you want to use on all of your pages, you can simply put all that code for the header into a separate file and save it as "header.php" and then type:

<?php include 'header.php';?>

at the top of your pages. The only real change you have to make to the rest of your pages is ensure that they are all saved as .php files and NOT .html files.

All you're doing by using that simple line of PHP is importing that chunk of code that makes up your header file ("header.php") into your current pages.

w3schools website has a really great, simple explanation of how to do this.

PS when testing PHP pages you MUST be going through the server.

Best of luck! Don't give up.

Answer 3

You are looking for a templating language that has supports for partials.

Partials are smaller, context-aware components in your list and page templates that can be used economically to keep your templating DRY (Don't Repeat Yourself).

Some templating languages have syntax closer to HTML than others so have a look around.

Most templating languages compile on the server . They are not pre-made files that are simply served to your client. Instead they are compiled, upon request, on the server and served as HTML to your clients.

This is in contrast to static HTML files (which is what you probably use now), where the client requests an HTML file and just get's it, as-is.

I personally use Handlebars on a Node.js/Express server because it's syntax is close to HTML.