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.