<embed-html src="header.html"> - a way to do light, easy, fast HTML embedding - ✁ ∙ Web Crafting

Background

Remember @Tuffy!'s thread about how to serve the same header/sidebar on multiple pages?

The short of it is: some folks are using PHP. Some folks are using SSI (Nekoweb can do this!). A good number of folks are using Static Site Generators.

But most folks here are using either <iframe>s (which have some problems) or JavaScript (which has different problems).

I looked at some of the ways people were using JavaScript and thought... I can make this easier! Want to see what I came up with?

<embed-html>

Have you come across Web Components? I really love them. Basically, they're a way to use JavaScript to invent your own HTML elements!

So I've made one for exactly this purpose. If you're using (or considering using) JavaScript or <iframe>s to embed the same content across multiple pages (e.g. headers, menus, sidebars, whatever!), this is for you!

I made a one-page site to explain in detail, but the short of it is you just do this:

1. Add the JavaScript to a page (anywhere you like!):

Code

<script type="module" src="//embed-html.danq.dev/embed-html.js"></script>

(it's fine to hotlink it just like this, or you can download it and host it yourself; whatever you like!)

2. Use the new <embed-html> element to embed HTML inside other HTML:

Code

<embed-html src="sidebar.html"></embed-html>

Now the contents of sidebar.html are embedded on your page. Do that on every page and your sidebar gets shared throughout your site. Update it in one place and every page gets updated. Neat, eh?

Rather I "show, not tell"? Cool. embed-html.neocities.org is an (ugly and bland!) Neocities site I threw together that has a nav bar "shared" between all three pages. "View Source" to see how it works!

(Note that "Inspect Element" will not show you how it works, because it'll show you the result of the transformation: when you "Inspect Element" on that page, it'll look like each page manually had the nav bar added to it, "the hard way". This is one of those occasions where "View Source" and "Inspect Element" differ wildly!)

There's more it can do, too. <embed-html src="sidebar.html" cache></embed-html> will cache the sidebar in your visitors' browsers so they don't see a "flash" as it loads: it's instant! (But in exchange, when you change the file they won't see it until the second time it loads.) Got lots of embeds on a page and only want them to load when they scroll into view? <embed-html src="sidebar.html" lazy></embed-html> is your friend. Go read the guide if you're interested in the full details.

It even supports embedding CSS and JS within your embedded sub-pages (which most other JS approaches struggle with!).

Oh, and the whole thing is open source/public domain so you can take it and change it to your needs if you like and you don't even have to credit me. Just take it!

But if you find it useful at all, or even if you've just got ideas to improve it, then let me know! Melonlanders are getting to see this first.