You need to put the same<\/strong> header on all three pages. <\/p>\n\n\n\n Our developer brains scream at us to ensure that we’re not copying the exact code three times, we’re creating the header once <\/em><\/strong>then “including” it on the three (or a thousand) other pages.<\/p>\n\n\n\n We don’t need to list them all here. I documented some<\/em> of them<\/a> one time, but there are many more. <\/p>\n\n\n\n We’ve got JavaScript to go fetch<\/a> the HTML and insert<\/a> it. We’ve got old school web server directives<\/a>. Any static site generator<\/a> can do it. Task runners<\/a> can do it. Templating languages<\/a> tend to have include functionality. Any backend language<\/a> can generate HTML on the fly. I’ve seen several Web Components<\/a> purpose-built for this. We’ve got None of these are a straightforward HTML tag. None of these are just some HTML way of saying “go get this HTML and put it here”, like I had a discussion about all this<\/a> with Jake Archibald and Dave Rupert on ShopTalk Show that was very interesting and enlightening.<\/p>\n\n\n\n No, really, why?<\/em><\/p>\n\n\n\n CSS can import CSS. JavaScript can import JavaScript. HTML cannot import HTML.<\/p>\n\n\n\n I’m sure there are reasons. Normally, web standards and browsers are all about “paving the cowpaths”, that is, providing solutions around what developers are already doing. We were reaching for third-party JavaScript to help with dates, so the web platform stepped in<\/a>. We were using frameworks for page transitions, so the web platform stepped in<\/a>. We used libraries for positioning elements next to each other safely, so the web platform stepped in<\/a>. There are countless examples like this.<\/p>\n\n\n\n I’d wager (counts fingers) pretty much all<\/em> websites need this ability, and all of them reach for different additional non-web-standard tooling to get it done. That’s weird<\/em>.<\/p>\n\n\n\n So what are those reasons?<\/p>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/04\/Screenshot-2025-04-29-at-11.34.15%E2%80%AFAM.png?resize=1024%2C551&ssl=1\")
<\/figure>\n\n\n\nThere are so many solutions to this problem<\/h2>\n\n\n\n
<iframe><\/code>, which technically is a pure HTML solution, but they are bad for overall performance, accessibility, and generally extremely awkward here, but we can extract them<\/a>. We can just not worry about includes at all and trust our code editors powerful find and replace tools.<\/p>\n\n\n\nBut none of the solutions is HTML<\/h2>\n\n\n\n
<img><\/code> is for “go get this image and put it here. <\/p>\n\n\n\nWhy?<\/h2>\n\n\n\n