I wonder if there’s a minimalist way to put tab contents in separate files that are named e.g. tab1.html, tab2.html, and then include or link these "module" files in the index.html main file.
I note that a similar question has been asked in stackoverflow, linked below, however it seems the discussion has gone into a different direction.
HTML tabs with content in separate files
Alternatively, in case that the better writing practice is actually not to "modulize" but have a single html file, please comment on that too.
HTML imports don’t exist so you broadly have three options:
Move each tab to a different file. Link between these HTML files from the navigation. The immediate con of this is (without some more work) you are copy pasting any changes to your navigation or global structure across several files.
Move everything to different files but use frames (or iframes) to load in things like the navigation. You’ll have to be clever with your targeting of these links, or they will just affect the frame contents (
This requirement gets very close to being fulfilled more easily by something like NextJS, a modern framework which makes it quite easy to build and deploy small sites like this. Each file would be separate page, but you could import global styles and layout across them. If you have the patience to look into this check out the NextJS tutorial which builds something very similar.