Is there a way to make html modular [closed]

Question

I want to divide html into several parts like modules.For example:

• domHeader.html
• bodyheader.html
• content.html
• footer.html

All pages must have same domHeader,bodyHeader and footer and different content.I just need to quote them in all page.If I want change footer, I don't need change all page footer.I just need change footer.html.

I know in java and other language can do.I'm just a primary web developer, and just know html css js,havn't personal website.

I have looked a few js templates,but didn't find this feature. Is there a easy way to do it? node.js ??

Answer 1

The easiest and "proper" way is with server-side code (no matter the language), but if you're restricted to the browser you can do it with JavaScript. Create a basic HTML file and perform Ajax requests to fill some placeholders (with HTML fragments, stored in separate files). When interacting with the page (clicking links, etc) instead of navigating away from the page, just do more Ajax requests and replace those placeholders (you'll end up with an one-page site this way).

Another option would be having many pages that use the same script, and all them would "assemble" their contents on load using Ajax requests, the same way.

I can give you some examples if you're interested, but I should point out that this will make your site unusable if JavaScript is turnd off. Worse, it won't be properly parsed by search engines (i.e. your site will rank poorly, and people won't be able to easily find it by googling). For these reasons, I strongly suggest learning some server-side programming (whether to use Node.js or other is up to you).