Reusing HTML

When I was at the beginning of writing this website, I thought about creating a footer (which you see right now) that contains a convenient link back to my main page, an acknowledgement of Neocities (since it's included by default anyway when you start a website, so why not make use of it), and later a proud mark of a valid CSS. Then I thought about a way to reuse that HTML without copy-pasting the whole footer's code everytime I make a change to the footer. I settled with iframes, because they didn't require any scripting, whether its client-side (which I have little knowledge of), or server-side (which I also have little knowledge of, and is not possible under Neocities' free plan anyway). I looked at other websites and see if they use iframes to reuse HTML. And not surprisingly, they don't. So why not use iframes? They seem to be more convenient, and doesn't require any scripting. Ok, not all browsers properly support iframes (w3m totally doesn't support iframes at all, lynx at least allows the user to navigate to the content inside of the iframe), but that's not a concern for me. Javascript is more likely to break compatibility than iframes, I thought.


Turns out there's a good reason why you shouldn't use iframes for reusing HTML. While it worked perfectly for my footer (as long as you remove the borders and adjust the width and height of the iframe, which I recommend doing in your site's global CSS), it wasn't the case for my header, even now. Y'see, if you try to put a header that occupies like a horizontal bar on your screen, into an iframe, it doesn't display well. It becomes obvious when you zoom in, or use a mobile browser like Safari in the iOS. The bar doesn't adjust to the screen or zoom size. So I had to learn how to make my header iframe responsive. The solution I found did fix the problem by making the header wrap for smaller screens, but it introduced two new problems: the first one was that it resulted in a significant amount of unused space when rendered. That's unacceptable. I had to experiment with a lot of CSS to fix the problem, but I wasn't able to properly reclaim all of that unused space. If I did, it would then cover my first heading. So I settled with a compromise by setting the header tag's top padding to 4px, and bottom padding to 80px. It still resulted in some unused space, but it was a lot better than before, and it looks good in mobile devices in their portrait orientation. The other problem is that zooming in to 130% will bring up the scrollbar of the header's iframe. I decided to ignore that problem instead of trying to fix it (which could lead to more problems instead of eliminating it).

To end...

So I now fully understand why a lot of websites don't bother using iframes to reuse the HTML of their headers and footers. It's just too much of a hassle to keep those two look right while inside an iframe. Which is why they settled with Javascript, or PHP if they want maximum compatibility. Can't blame them.

I won't be replacing the iframe solution with JS though, because I think that's worse in terms of compatibility (think about the text-only browsers in text-only consoles). I might consider PHP, but only if it is really necessary, and when I become a Supporter of Neocities. I hope the WHATWG consider making the reuse of HTML for headers and footers easier, and not require any sort of scripting to achieve that. They could either extend the existing iframe tag, or create a new one (I suggest <reuse> with the src attribute).