Estou fazendo um portfólio simples que não vai precisar de nenhum Framework como angular ou react, o que eu gostaria e fazer algo para que eu pudesse criar os arquivos html separados e um principal apenas trocando o conteúdo da pagina com JavaScript. Algo assim, meu index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>titulo principal que vai estar em todas as paginas</h1>
<div>
div onde quero ficar alterando meus arquivos
</div>
</body>
</html>
Um outro arquivo qualquer:
<div>subtitulo da pagina</div>
Outro arquivo html
<div>outro subtitulo</div>
Quero fazer com que esses arquivos sejam colocados dentro do meu html principal, não me preocupo de importar todos os css e javascript diretamente no meu arquivo principal já que vai ser algo muito leve, mas gostaria muito de fazer esse sistema de troca de arquivos.
one page application
isso normalmente se faz com Ajax. Seria melhor você estudar o Ajax do que ficar pedindo opnião, voce pode dar uma olhada: W3Schools ou MDN MDN é mais recomendado porque é mais atualizado, já o W3Schools é mais prático, vai direto ao assunto, porém um pouco desatualizado.