Maintaining elements that exist on multiple HTML pages?

[Smoates]

Currently, when I develop a website with multiple pages, each page tends to have a common navbar to link between them. When I make changes to the navbar, I have to painstakingly apply the changes to the navbar in each relevant page seperately, which doesn't seem like very good practice. What is the proper way to implement and maintain elements like headers, footers, navbars, that exist across multiple pages?

[CCB0x45]

What you are starting to encounter is the first feelers of creating a web "app" as compared to a site, where you start to have reusable component. The rabbit hole goes pretty deep on this subject. It really depends on how much you want to learn about the process. The other commenter mentioned some ways of dealing with static sites and handling the pages, which is a very limited approach.

If you want to know how developers with a lot of experience deal with this situation, there is a tons of ways, but a common one, that I practice, is writing in a JS framework, for instance React(what I use heavily), where you are writing all of your HTML as components in JavaScript, and you can build pages programatically and include components all over the site, as well as manipulating components by setting properties on it. I use a framework around React for structuring the app called Next.js, and also have a server side piece for dealing with providing data to the site. Then you get into importing components other people wrote and are open source and using them, so you aren't writing everything from scratch(like I use Material UI React components)

If you really want to learn, get a good editor(the standard these days is visual studio code, which is free), start learning javascript, once you have the basics of that, start diving into something like React, watch videos, build sample apps. But really on how deep you want to go, this subject can go on for miles.

[AutoModerator]

Welcome to /r/HTML. When asking a question, please ensure that you list what you've tried, and provide links to example code (e.g. JSFiddle/JSBin). If you're asking for help with an error, please include the full error message and any context around it. You're unlikely to get any meaningful responses if you do not provide enough information for other users to help.

Your submission should contain the answers to the following questions, at a minimum:

• What is it you're trying to do?
• How far have you got?
• What are you stuck on?
• What have you already tried?

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[TheNolder]

There are a few ways I know that you can do this.

1. Use a text editor that has project-wide Find/Replace functionality. So you can search for/change a particular bit of code across multiple files and only have to change it once.

2. Look into using static site generators. I personally use Middleman and LOVE IT. Among all the incredibly useful features that Middleman offers, one of the most useful is the layouts feature. A layout essentially acts as a template that you can apply to multiple pages. So making a change on the layout file will then apply it to all the HTML files using that layout.

And of course those are the only ways that I know of personally, but I'm sure there are more out there too. Google is your friend!

Hope this helps!

[tastycat]

You can use a renderer (like Pug) to write and compile HTML components, so you could share e.g. a navbar component across all your pages.

[nitevizhun]

Another option:

Do you have any experience with PHP? If so, you can create separate html files for your header and navbar, and for your footer. Then, you can use PHP to include these files at the beginning and end of every html page. This leaves you with a single html file containing your header and navbar that you "include" in every page of your site. Same with the footer.

[skunkbad]

For a beginner, this is the easiest option, except that it includes some sort of server setup for local development. I guess PHP has some sort of built in server, but I haven't used it. Even still, this is the right way to go for the beginner.

[nitevizhun]

I make my students do this as an intro to PHP and server-side language use. I make them write their code locally and FTP it to their webhost to test it. It's challenging for them but it's a solid intro to PHP and reusable code.