Resources for dynamically changing content in HTML

Help
, ,
1

I’m not sure how to word this correctly, but say my website has 3 rows: header, nav bar, and content. We land immediately in the ‘home’ tab with some introductory content, then we want to change to the ‘photos’ tab. When we change, I would like the header and nav bar to stay and only change the content row to load the ‘photos’ content.

My first idea is to have a template HTML file for all these pages, then href to the relevant html file. But that means if I wanted to change the header, then I would have to change the header in each file.

Could anyone please point me to a resource which explains how to do this? (Preferably only html and css, if possible).

2 Likes
2

If you want to only stick to old school HTML and CSS and keep things simple then the answer is yes, you have to update all the files.

This is what you’re asking I think: The Simplest Ways To Handle HTML Includes | CSS-Tricks

3

I could be wrong but I think there’s still no way to do this with just html. I think at some point there was a proposal to have native partials in html but I guess it went nowhere. I tried to do a quick search but couldn’t find anything.

4

You can use a static site generator. This will mean your input files have to include the generator’s template language in addition to your HTML and CSS, and the generator will convert them to regular HTML/CSS whenever you run it.

You may be thinking of XSLT stylesheets with XHTML; those are supported by browsers, but uncommon in practice.

5

@AtomsForHire, it sounds like you want a consistent header and nav bar between pages.

You can do this with PHP or server-side includes (SSI) on the web server if you’re renting a VPS or using a hosting provder like Dreamhost or Nearly Free Speech. You can also do this locally with static site generators like Jekyll, Hugo, Pelican, etc. If you’re writing in Markdown and generating HTML, pandoc also supports templates. My preferred solution is hxinclude from the W3C’s HTML-XML-utils package. It has a few other handy utilities, too.

2 Likes
6

@AtomsForHire these are the things that come to mind as you cannot do this natively with HTML. Why they haven’t made this a thing yet, I don’t know.

Where/how are you hosting your website?

7

I had griped about this last year while abusing existing elements to try to emulate an actual include function.

8

Thanks for the suggestions, everyone. I think I’ll probably take a look at Jekyll or server side includes with PHP.

Where/how are you hosting your website?

I’m still in the process of blocking out the columns and all that, and came across the problem when I was trying to make the nav bar.

9

Could this be sorted with iframes?

10

These are three different solutions and availability depend on the type of web host you choose.

My previous question was trying to determine where you had selected for hosting (different to constructing your website).

1 Like
11

They could be, but should be considered a last resort

12

Here’s the simplest way to do it with PHP: put everything at the top, starting with <html>, in header.php, and everything at the bottom all the way down to </html> in footer.php and then make a page like

<?php include($_SERVER[DOCUMENT_ROOT] . "/header.php");?>
ooh look at me i am a webpage
<?php include($_SERVER[DOCUMENT_ROOT] . "/footer.php");?>

edit: fixed slight harmless syntax error

3 Likes
13

Having a or tag in HTML would be a game changer. I can’t add anything useful to what’s already been posted and the great links they give but once upon a time it was possible in Netscape 4. Both the div and layer elements had src properties where another file could be inserted into the page.

W3Schools uses a JavaScript XML request that some other libraries use.

What I used to use was a multi-file search and replace Windows utility called BK ReplaceEm, which then changed its name to Replace Text, before disappearing. That worked very well but a bit of a pain when the site got larger and all the files had to be reuploaded.

As I self-host an Apache server, I use Server Side Includes which is easy . I think most web servers have the same functionality such as NGINX and IIS.