Armé lo siguiente que quizás te pueda ayudar, quizás no sea la mejor opción, podrías optar por algo como motores de templates como ejs, pug o nunjunks en Node por ejemplo, u otros recursos como React, Angular o Vue.. Pero puede ayudar para resolver el planteo.
Aquí va lo que armé:
Archivo index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div id="navbar"></div>
<hr />
<section>
<h2>Contenido</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, blanditiis.
Ea aliquam voluptatibus eligendi fugit enim consectetur, soluta sed,
reiciendis voluptas quisquam, cum obcaecati id assumenda? Cum velit rem
ex?
</section>
<hr />
<div id="footer"></div>
<script src="importFiles.js"></script>
<script>
getComponent("navbar", "navbar.html");
getComponent("footer", "footer.html");
</script>
</body>
</html>
En este archivo hay 3 partes importantes.
La primera son los DIVs con id navbar y footer.
<div id="navbar"></div>
y
<div id="footer"></div>
La segunda es el script src al archivo importFiles que es un script que a continuación detallaré, es la siguiente línea:
<script src="importFiles.js"></script>
La tercera es sencillamente un bloque de script donde se invoca a una función creada que recibirá 2 parámetros, el primero es el id del elemento donde se desea importar el contenido del otro archivo y el segundo es el nombre del archivo a importar, quedando de la siguiente manera:
getComponent("navbar", "navbar.html");
getComponent("footer", "footer.html");
Archivo importFiles.js
async function getComponent(container, fileName) {
const response = await fetch(fileName);
const fileToImport = await response.text();
const targetContainer = document.getElementById(container);
targetContainer.insertAdjacentHTML("beforeend", fileToImport);
}
Finalmente cree 2 archivos solo para prueba un archivo navbar.html con el siguiente contenido:
<div>
<h1>Prueba Navbar</h1>
</div>
Y un archivo footer.html con el siguiente contenido:
<div>
<p>Esto sería el footer</p>
</div>
Entre medio de ellos agregué una etiqueta section con un párrafo solo para simular una estructura básica de navbar, contenido y footer.
Todos los antes mencionados archivos están en la misma carpeta para simplificar, si esto cambia se deberán modificar las rutas.