Include HTML snippet in HTML file

I’ve been trying to include HTML code in my index.html from another HTML file but through all the methods I’ve tried it hasn’t worked.

For reference here is what I am trying to accomplish in HTML:


I’ve looked at these sites for help but none of these methods have worked:



https://www.w3schools.com/howto/howto_html_include.asp

You can take a look at my project here: https://glitch.com/edit/#!/dankzonediscord
I’ve attempted to use the tutorials on the footer (line 336) but they haven’t worked.

I appreciate all the help I can get.

Unfortunately HTML does not support partials by default. A partial is simply a chunk of HTML markup that you can reuse and include everywhere.

However there are a few ways to do what you want to do. The project that you posted, minima, is built with Jekyll. Jekyll is a tool for generating websites and blogs from a bunch of reusable parts like HTML partials. It uses a templating language called Liquid, which is just an extension of HTML to make it support partials. Jekyll might be tricky to set up using Glitch, but I’m not sure. You can look up other templating languages like Handlebars.js that might be easier to set up.

Or, you could insert chunks of HTML where you need them with Javascript after the page loads. This can be pretty complicated, but there are lots of frameworks built around this concept. Looks like you already have jQuery so you could try appending HTML to the document after it loads with that.

2 Likes

Hey @LeoDoesThings, what @nonphoto says is correct. However the Apache web server does have an option for allow server-side includes as discussed in your first link at https://www.lifewire.com/include-html-file-in-another-3469529#mntl-sc-block_1-0-17.

Apache isn’t supported by default on Glitch, but you can run a site using it. It’s just a little more complicated, so you have to be prepared to deal with the additional complexity. https://glitch.com/edit/#!/bronzed-slipper?path=index.html:1:0 shows the basics, and if you’re interested in dealing with the additional overhead I can explain what’s going on in there.

3 Likes

@cori I’d be very interested in how to implement that in my site if you don’t mind.