davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="en">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>The Simplest Ways to Handle HTML Includes (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
<meta name="robots" content="noai, noimageai">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
  <header>
    <h1>The Simplest Ways to Handle HTML Includes</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/" title="Lien vers le contenu original">Source originale</a>
      <br>
      Mis en cache le 2024-02-19
    </p>
  </nav>
  <hr>
  <p>It’s extremely surprising to me that HTML has never had any way to include other HTML files within it. Nor does there seem to be anything on the horizon that addresses it. I’m talking about straight up <em>includes</em>, like taking a chunk of HTML and plopping it right into another. For example the use case for much of the entire internet, an included header and footer for all pages:</p>

<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">...
&lt;body&gt;
   &lt;include src="./header.html"&gt;&lt;/include&gt;

   Content

   &lt;include src="./footer.html"&gt;&lt;/include&gt;
&lt;/body&gt;
...</code></pre>

<p>That’s not real, by the way. I just wish it was.</p>

<p><span id="more-286228"></span></p>
<p>People have been looking to other languages to solve this problem for them forever. It’s HTML preprocessing, in a sense. Long before we were preprocessing our CSS, we were using tools to manipulate our HTML. And we still are, because the idea of includes is useful on pretty much every website in the world.</p>

<h3 class="wp-block-heading" id="h-use-php"><a href="#aa-use-php" aria-hidden="true" class="aal_anchor" id="aa-use-php"><svg aria-hidden="true" class="aal_svg" version="1.1" viewbox="0 0 16 16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Use PHP</h3>

<p>Can you use PHP instead?</p>

<pre rel="PHP" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">...
&lt;body&gt;
   &lt;?php include "./header.html" ?&gt;

   Content

   &lt;?php include "./footer.html" ?&gt;
&lt;/body&gt;
...</code></pre>

<p>This will perform the include at the server level, making the request for it happen at the file system level on the server, so it should be far quicker than a client-side solution.</p>

<h3 class="wp-block-heading" id="h-use-gulp"><a href="#aa-use-gulp" aria-hidden="true" class="aal_anchor" id="aa-use-gulp"><svg aria-hidden="true" class="aal_svg" version="1.1" viewbox="0 0 16 16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Use Gulp</h3>

<p>What’s even faster than a server-side include? If the include is preprocessed before it’s even on the server. <a href="https://gulpjs.com/" rel="noopener">Gulp</a> has a variety of processors that can do this. One is <a href="https://www.npmjs.com/package/gulp-file-include" rel="noopener">gulp-file-include</a>.</p>

<p>That would look like this:</p>

<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">...
&lt;body&gt;
   @@include('./header.html')

   Content

   @@include('./footer.html')
&lt;/body&gt;
...</code></pre>

<p>And you’d process it like:</p>

<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">var fileinclude = require('gulp-file-include'),
  gulp = require('gulp');

gulp.task('fileinclude', function() {
  gulp.src(['index.html'])
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest('./'));
});</code></pre>

<p>Looks like this particular plugin has fancy features where you can pass in variables to the includes, making it possible to make little data-driven components.</p>

<h3 class="wp-block-heading" id="h-use-grunt"><a href="#aa-use-grunt" aria-hidden="true" class="aal_anchor" id="aa-use-grunt"><svg aria-hidden="true" class="aal_svg" version="1.1" viewbox="0 0 16 16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Use Grunt</h3>

<p>This is what the <a href="https://www.npmjs.com/package/grunt-bake" rel="noopener">grunt-bake</a> plugin does. You’d configure Grunt to process your HTML:</p>

<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">grunt.initConfig({
    bake: {
        your_target: {
            files: {
                "dist/index.html": "app/index.html",
            }
        }
    }
});</code></pre>

<p>Then your HTML can use this special syntax for includes:</p>

<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">...
&lt;body&gt;
   &lt;!--(bake header.html)--&gt;

   Content

   &lt;!--(bake footer.html)--&gt;
&lt;/body&gt;
...</code></pre>

<h3 class="wp-block-heading" id="h-use-handlebars"><a href="#aa-use-handlebars" aria-hidden="true" class="aal_anchor" id="aa-use-handlebars"><svg aria-hidden="true" class="aal_svg" version="1.1" viewbox="0 0 16 16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Use Handlebars</h3>

<p>Handlebars <a href="https://handlebarsjs.com/partials.html" rel="noopener">has partials</a>.</p>

<p>You register them:</p>

<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">Handlebars.registerPartial('myPartial', '{{name}}')</code></pre>

<p>Then use them:</p>

<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">{{&gt; myPartial }}</code></pre>

<p>There is also fancy features of this that allow for evaluation and passing data. You’ll still need a processor to run it, probably something like <a href="https://www.npmjs.com/package/gulp-handlebars" rel="noopener">gulp-handlebars</a>.</p>

<p>Speaking of templating languages which make use of curly braces… Mustache <a href="https://github.com/janl/mustache.js#include-templates" rel="noopener">has them, too</a>.</p>

<h3 class="wp-block-heading" id="h-use-pug"><a href="#aa-use-pug" aria-hidden="true" class="aal_anchor" id="aa-use-pug"><svg aria-hidden="true" class="aal_svg" version="1.1" viewbox="0 0 16 16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Use Pug</h3>

<p><a href="https://pugjs.org/" rel="noopener">Pug</a> is an HTML preprocessor that has a whole new syntax for HTML that is a bit more terse. <a href="https://pugjs.org/language/includes.html" rel="noopener">It’s got includes though</a>.</p>

<pre rel="Pug" class="wp-block-csstricks-code-block language-none" data-line=""><code markup="tt">...
body
   include ./header.html"

   p Content

   include ./footer.html"

   ...</code></pre>

<p>Then you run it with something like <a href="https://www.npmjs.com/package/gulp-pug" rel="noopener">gulp-pug</a>.</p>

<h3 class="wp-block-heading" id="h-use-nunjucks"><a href="#aa-use-nunjucks" aria-hidden="true" class="aal_anchor" id="aa-use-nunjucks"><svg aria-hidden="true" class="aal_svg" version="1.1" viewbox="0 0 16 16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Use Nunjucks</h3>

<p><a href="https://css-tricks.com/killer-features-of-nunjucks/">I love me some Nunjucks!</a> <a href="https://mozilla.github.io/nunjucks/" rel="noopener">Nunjucks</a> has <a href="https://mozilla.github.io/nunjucks/templating.html#include" rel="noopener">includes</a>. You’d do it like this:</p>

<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">...
&lt;body&gt;
   {% include "./header.html" %}

   Content

   {% include "./footer.html" %}
&lt;/body&gt;
...</code></pre>

<p>If you put that in a file called <code>index.njk</code>, you could process it with a simple Node script into index.html like this:</p>

<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">const nunjucks = require("nunjucks");
const fs = require("fs");

fs.writeFile("index.html", nunjucks.render("index.njk"), function(err, data) {
  if (err) console.log(err);
  console.log("Compiled the Nunjucks, captain.");
});</code></pre>

<p>Or process it with something like <a href="https://www.npmjs.com/package/gulp-nunjucks" rel="noopener">gulp-nunjucks</a>.</p>

<p>11ty has <a href="https://www.11ty.io/docs/languages/nunjucks/" rel="noopener">Nunjucks built-in</a>, along with many of the other mentioned so far. Might be good for you if you’re actually building a little site.</p>

<h3 class="wp-block-heading" id="h-use-ajax"><a href="#aa-use-ajax" aria-hidden="true" class="aal_anchor" id="aa-use-ajax"><svg aria-hidden="true" class="aal_svg" version="1.1" viewbox="0 0 16 16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Use Ajax</h3>

<p>Say you had…</p>

<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;body&gt;

  &lt;header&gt;&lt;/header&gt;

  Content.

  &lt;footer&gt;&lt;/footer&gt;

&lt;/body&gt;</code></pre>

<p>You could fetch the contents for the header and footer from respective files and dump the contents in.</p>

<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">fetch("./header.html")
  .then(response =&gt; {
    return response.text()
  })
  .then(data =&gt; {
    document.querySelector("header").innerHTML = data;
  });

fetch("./footer.html")
  .then(response =&gt; {
    return response.text()
  })
  .then(data =&gt; {
    document.querySelector("footer").innerHTML = data;
  });</code></pre>

<p>Speaking of JavaScript… If you’re building your site using a JavaScript framework of just about any kind, building through components is kind of the main deal there and breaking parts you want to include in other files should be no problem. Some kind of <code>import Header from "./header.js";</code> and <code>&lt;Header /&gt;</code> is the territory you’d be in in React land.</p>

<h3 class="wp-block-heading" id="h-use-iframes"><a href="#aa-use-iframes" aria-hidden="true" class="aal_anchor" id="aa-use-iframes"><svg aria-hidden="true" class="aal_svg" version="1.1" viewbox="0 0 16 16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Use iframes</h3>

<p>You could do this:</p>

<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;body&gt;

  &lt;iframe src="./header.html"&gt;&lt;/iframe&gt;

  Content.

  &lt;iframe src="./footer.html"&gt;&lt;/iframe&gt;

&lt;/body&gt;</code></pre>

<p>But the content in those iframes does not share the same DOM, so it’s a bit weird, not to mention slow and awkward to style (since iframes don’t know the heights of their contents).</p>

<p><a href="https://www.filamentgroup.com/lab/html-includes/" rel="noopener">Scott Jehl documented a cool idea</a> though: You can have the iframe inject the content of itself onto the parent page then remove itself.</p>

<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;body&gt;

  &lt;iframe src="header.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"&gt;&lt;/iframe&gt;

  Content.

  &lt;iframe src="footer.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"&gt;&lt;/iframe&gt;

&lt;/body&gt;</code></pre>

<p>Kolya Korruptis wrote in with this adaptation which will include more than the first child of the body in case your HTML file has that:</p>

<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;iframe src="included.html" onload="this.insertAdjacentHTML('afterend', (this.contentDocument.body||this.contentDocument).innerHTML);this.remove()"&gt;&lt;/iframe&gt;</code></pre>

<h3 class="wp-block-heading" id="use-jekyll"><a href="#aa-use-jekyll" aria-hidden="true" class="aal_anchor" id="aa-use-jekyll"><svg aria-hidden="true" class="aal_svg" version="1.1" viewbox="0 0 16 16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Use Jekyll</h3>

<p><a href="https://jekyllrb.com/" rel="noopener">Jekyll</a> is a Ruby-based static site generator with <a href="https://jekyllrb.com/docs/includes/" rel="noopener">includes</a>. You keep your includes in the <code>/_includes/</code> folder, then:</p>

<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;body&gt;
  {% include header.html %}

  Content.

  {% include footer.html %}
&lt;/body&gt;</code></pre>

<p>Jekyll is a big one, so I’m calling it out here, but there are <a href="https://www.staticgen.com/" rel="noopener">a ton of static site generators</a> and I’d wager any of them can do includes.</p>

<h3 class="wp-block-heading" id="use-sergey"><a href="#aa-use-sergey" aria-hidden="true" class="aal_anchor" id="aa-use-sergey"><svg aria-hidden="true" class="aal_svg" version="1.1" viewbox="0 0 16 16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><a href="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/#use-sergey"></a>Use Sergey</h3>

<p>OK, I’ll call out one more SSG because it’s new and super focused. <a href="https://sergey.cool/" rel="noopener">Sergey</a> has a web components style format:</p>

<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;body&gt;
  &lt;sergey-import src="header" /&gt;

  Content.

  &lt;sergey-import src="footer" /&gt;
&lt;/body&gt;</code></pre>

<p>You’d name the files <code>header.html</code> and <code>footer.html</code> and put them in <code>/includes/</code> and then it’ll make a build with the includes processed when you run the npm script it has you do.</p>

<h3 class="wp-block-heading" id="use-apache-ssi"><a href="#aa-use-apache-ssi" aria-hidden="true" class="aal_anchor" id="aa-use-apache-ssi"><svg aria-hidden="true" class="aal_svg" version="1.1" viewbox="0 0 16 16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><a href="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/#use-apache-ssi"></a>Use Apache SSI</h3>

<p>Apache, a super duper common web server, can <a href="https://httpd.apache.org/docs/2.4/mod/mod_include.html" rel="noopener">do includes</a>. You do it like this:</p>

<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;body&gt;

  &lt;!--#include file="./header.html" --&gt;

  Content

  &lt;!--#include file="./footer.html" --&gt;

&lt;/body&gt;</code></pre>

<p>But you need the right Apache configuration to allow stuff. I tried my best to get a working demo going but didn’t have much luck.</p>

<p>I tried using <code>.htaccess</code> within a folder on an Apache server and flipping on what I thought was the right stuff:</p>

<pre rel="HTAccess" class="wp-block-csstricks-code-block language-none" data-line=""><code markup="tt">Options +Includes

AddType text/html .html
AddOutputFilter INCLUDES .html</code></pre>

<p>I’m sure there is some way to get it working though, and if you do, it’s kinda neat that it needs zero other dependencies.</p>

<h3 class="wp-block-heading" id="use-codekit"><a href="#aa-use-codekit" aria-hidden="true" class="aal_anchor" id="aa-use-codekit"><svg aria-hidden="true" class="aal_svg" version="1.1" viewbox="0 0 16 16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><a href="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/#use-codekit"></a>Use CodeKit</h3>

<p>Mac only, but CodeKit has <a href="https://codekitapp.com/help/kit/" rel="noopener">a special language called Kit</a> it processes where 90% of the point of it is HTML includes. It uses special HTML comments:</p>

<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">...
&lt;body&gt;
   &lt;!-- @import "./header.html" --&gt;

   Content

   &lt;!-- @import "./footer.html" --&gt;
&lt;/body&gt;
...</code></pre>

<h3 class="wp-block-heading" id="use-dreamweaver"><a href="#aa-use-dreamweaver" aria-hidden="true" class="aal_anchor" id="aa-use-dreamweaver"><svg aria-hidden="true" class="aal_svg" version="1.1" viewbox="0 0 16 16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><a href="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/#use-dreamweaver"></a>Use Dreamweaver</h3>

<p>Lol jk. But it <a href="https://helpx.adobe.com/dreamweaver/using/server-side-includes.html" rel="noopener">really is a thing</a>. <a href="http://shop.pixelmill.com/support/al0/kb101502.htm" rel="noopener">DWTs</a>, baby.</p>

<h3 class="wp-block-heading" id="holy-crap"><a href="#aa-holy-crap" aria-hidden="true" class="aal_anchor" id="aa-holy-crap"><svg aria-hidden="true" class="aal_svg" version="1.1" viewbox="0 0 16 16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><a href="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/#holy-crap"></a>Holy Crap</h3>

<p>That’s a lot of ways, isn’t it?</p>

<p>Like I said at the top, it’s very surprising to me that HTML itself hasn’t addressed this directly. Not that I think it would be a great idea for performance to have <code>&lt;include&gt;</code> statements that trigger network requests all over our code, but it seems in-line with the platform. Using ES6 imports directly without bundling isn’t a great idea always either, but we have them. <code>@import</code>ing CSS within CSS isn’t a great idea always, but we have it. If the platform had a native syntax, perhaps other tooling would key off that, much like JavaScript bundlers support the ES6 import format.</p>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>