HTML Page - same top menu (header) and footer in all HTML pages?

Question

I am developing a static website (don't need any server-side support. I have Basic HTML and JAVAscript) which have a number of pages.

all pages have the same top menu (header) and footer. what is the best practice considering SEO ?

I have two options:

Option 1. Should I copy header.html & footr.html code on every HTML page?

Option 2. Should I include header.html & footer.html on every HTML page?

which Option is better? Does any of them affect SEO?

if Option 2 is the right solution then my follow up question is "How to include common header.html and footer.html?" I don't want to use PHP/ iframe.

Answer 1

For easy client end work, I could have suggested jquery or javascript for client end rendering of header and footer, but you are looking for SEO friendly web pages.

Considering SEO you need to have rendered HTML pages with header and footer so crawlers can read it (and above solution won't work for that as it renders extra stuff after page load). So either you go for copying and pasting header footer to each page or use PHP/.NET etc for server end rendering that will handle header and footer while rendering.

Answer 2

How often do you change the content of the header? When I was starting with web design I used to include the whole menu with/copy paste, and then do search/replace across all files. But this was before PHP and JS were around.

Content-wise, it should be the same. There could be a difference in the number of HTTP requests and load time if you are including something from another file.

These are so small speed differences that I don't think that it will make any difference SEO-wise.

I personally like to use PHP to include content but you have said that this is not an option for you. Depending on whether you want to use jquery, pure JS, or some other way there is a bunch of different approaches .