You probably dont need HTML imports

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.


This content originally appeared on Go Make Things and was authored by Go Make Things

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!


This content originally appeared on Go Make Things and was authored by Go Make Things


Print Share Comment Cite Upload Translate Updates
APA

Go Make Things | Sciencx (2024-07-19T14:30:00+00:00) You probably dont need HTML imports. Retrieved from https://www.scien.cx/2024/07/19/you-probably-dont-need-html-imports/

MLA
" » You probably dont need HTML imports." Go Make Things | Sciencx - Friday July 19, 2024, https://www.scien.cx/2024/07/19/you-probably-dont-need-html-imports/
HARVARD
Go Make Things | Sciencx Friday July 19, 2024 » You probably dont need HTML imports., viewed ,<https://www.scien.cx/2024/07/19/you-probably-dont-need-html-imports/>
VANCOUVER
Go Make Things | Sciencx - » You probably dont need HTML imports. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/07/19/you-probably-dont-need-html-imports/
CHICAGO
" » You probably dont need HTML imports." Go Make Things | Sciencx - Accessed . https://www.scien.cx/2024/07/19/you-probably-dont-need-html-imports/
IEEE
" » You probably dont need HTML imports." Go Make Things | Sciencx [Online]. Available: https://www.scien.cx/2024/07/19/you-probably-dont-need-html-imports/. [Accessed: ]
rf:citation
» You probably dont need HTML imports | Go Make Things | Sciencx | https://www.scien.cx/2024/07/19/you-probably-dont-need-html-imports/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.