javascript – Como podría vincular HTML externos?

tengo una consulta.
estoy realizando una pagina, tengo HTML diferentes( index.html – proceso.html – productos.html -contacto.html), lo que tengo que hacer es vincular los HTML con el HTML principal que seria index.html
donde tengo los button

        <div>
        <nav class="tab">
            <button type="button" class="boton"> <i class="fas fa-home"></i> Home</button>
            <button type="button" class="boton"> <i class="fas fa-beer"></i> Proceso</button>
            <button type="button" class="boton"> <i class="fab fa-product-hunt"</i>Productos</button>
            <button type="button" class="boton"><i class="fas fa-address-book"></i> Contacto</button>
        </nav>
        </div>

como podría realizar ese método que cuando le de un clip a la pestaña “contacto” me tome el HTML que realice con ese nombre

introducir la descripción de la imagen aquí

por que use href=>contacto.html pero estoy vinculando una pagina me sale de esta forma

introducir la descripción de la imagen aquí

la idea que me saliera algo así( realice una edición de imagen para que puedan apreciar mi ejemplo)

introducir la descripción de la imagen aquí

si pudieran ayudarme con algún ejemplo que podría aplicar o orientarme, llevo mi primer año de estudio la universidad método online igual no apoyan mucho con material de estudio , me la he rebuscado para poder aprender, agradecería su apoyo, saludos