How can I reuse HTML code across several HTML files

by

There are three places you can do this:

When you build the site, before/during deployment.

This is a step where you take the source code you’ve written (along with any data you want to pull from, for example, a database) and convert it to code (and content) suitable to be copied to your server and then sent to browsers.

You can use any programming language you like for this. Generally you would use a template library and inject the content in it from a series of source files.

There are lots of static site generators which are designed to do this. Jamstack has a longer list (albeit with less explanation).

On the server

You’ve rejected PHP, but it or another server side language are common choices for this sort of problem, be it with a simple set of includes, something slightly smarter with templates or a full on big CMS.

On the client

Pulling content over HTTP with client-side JS and then injecting it into the page is a fairly simple option, but the least friendly to search engines and most likely to break due to client issues (like network timeouts for individual files or ad-blockers).

More complex systems would use tools like React but the best of those are backed by server-side rendering (e.g. via Next.js) or build-time generated static files (e.g. via Gatsby). That is to say you use option 1 or option 2 and then add client-side to enhance the UX and performance.

More Related Contents:

  1. My Website is Mirror-flipped on iPhone Devices
  2. Trying to work on responsiveness of login form
  3. Bootstrap row with columns of different height
  4. Compiling dynamic HTML strings from database
  5. Why does my XPath query (scraping HTML tables) only work in Firebug, but not the application I’m developing?
  6. How can I scale the content of an iframe?
  7. Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively
  8. Bootstrap 4: Multilevel Dropdown Inside Navigation
  9. Why does firebug add to ?
  10. Bootstrap columns stacking vertically on mobile device
  11. How to center nav-items in Bootstrap? [duplicate]
  12. Create a responsive navbar sidebar “drawer” in Bootstrap?
  13. Bootstrap 4 row fill remaining height
  14. How to get a child element to show behind (lower z-index) than its parent?
  15. Bootstrap 4 Cards of same height in columns
  16. How to make Bootstrap 4 cards the same height in card-columns?
  17. Why does a stray end tag generate an empty paragraph?
  18. How does Selenium click on elements that are 50% on screen and 50% not on screen?
  19. Bootstrap – align button to the bottom of card
  20. Bootstrap 4 – Sticky footer – Dynamic footer height
  21. Bootstrap 4 – Responsive cards in card-columns
  22. Align the form to the center in Bootstrap 4 [duplicate]
  23. Why is a self-closing iframe tag preventing further DOM elements to be displayed?
  24. How to center cards in bootstrap 4?
  25. Add spacing between vertically stacked columns in Bootstrap 4
  26. Bootstrap navbar link color won’t change
  27. Which DOM elements can be child of tr?
  28. Bootstrap navbar: nothing is displayed on smaller devices
  29. Why are some of my CSS rules not working?
  30. Bootstrap 4 collapsing two navbars into one toggle button

Leave a Comment