[Go Make Things] You probably dont need HTML imports

Saturday, July 20, 2024

For years, advocates of the lean web have lamented that there's no such thing as HTML imports—me included.

But turns out, you probably don't actually need them. Let's dig in!

JS and CSS have them. Why not HTML?

In JavaScript, you can import one JS file into another using the import keyword.

import {add, subtract} from './calculator.js';    let answer = add(40, 2);

In CSS, you use @import to load one CSS file from another.

@import "_config.css";  @import "_reset.css";  @import "_grid.css";

For a brief moment, there was a spec in the works to do the same thing with HTML, like this…

<!-- This doesn't actually work -->  <link rel="import" href="nav.html">

It was scrapped.

HTML imports would have enabled you to build more moderately sized websites with just HTML, CSS, and JS: no generator or CMS or build system required. A lot of us were pretty disappointed about this.

But in reality, you probably don't need them.

I just learned that for literally decades Apache has had a feature called _Server Side Includes (or SSI)_. I works more-or-less just like the scrapped HTML import spec.

<!--#include file="nav.shtml" -->

While it started as an Apache server thing, it's also supported in LiteSpeed, nginx, IIS and Jigsaw.

You also import HTML with PHP. Instead of ending your HTML file with the .html extension, use .php instead.

It can still be mostly HTML. We only need the include() function.

<?php include('nav.html'); ?>

But because PHP is a programming language, you could include() a PHP file instead, and do things like conditionally highlight certain nav links depending on which page is being viewed, for example.

The server is better than the browser.

The advantage with all of these approaches over a native HTML import is that it all happens on the server, so you're not waiting for an HTML file waterfall to complete before rendering.

In my opinion, that makes SSI and PHP a better approach than native HTML imports would be… and it's available already today!

Cheers,
Chris

Want to share this with others or read it later? View it in a browser.

Did someone forward this to you? Get Daily Developer Tips.

Don't want to get these emails? Totally cool. Update your subscriber preferences.

You can also unsubscribe from all emails from me, including updates to products you've purchased.

113 Cherry St #92768, Seattle, WA 98104-2205

Ad/iklan :