Por que a formatação do texto não muda <h2> e <p>?

<meta charset="utf-8">

<script>

    function pulaLinha() {

        document.write("<br>");

    }

    function pergunta(pergunta) {

        document.write("<h2>" + pergunta + "</h2");
        pulaLinha();

    }

    function resposta(resposta) {

        document.write("<p>" + resposta + "</p>");

    }


    var mediaCasalFilhos = 28;
    var brasilDescoberta = 1500;
    var anoAtual = 2021;
    var geracoes = (anoAtual - brasilDescoberta) / mediaCasalFilhos;

pergunta("Em média, um casal tem filhos quando atinge a idade de " + mediaCasalFilhos + " anos. Seguindo essa média, se os portugueses chegaram em " + brasilDescoberta + " no Brasil, então, a primeira geração de brasileiros surgiu em " + (brasilDescoberta + mediaCasalFilhos) + ", a segunda em " + (brasilDescoberta + mediaCasalFilhos + mediaCasalFilhos) + " e assim por diante. Desde " + brasilDescoberta + " até o ano atual, quantas gerações se passaram?");

resposta("Desde o descobrimento do Brasil e considerando a média de " + mediaCasalFilhos + " anos por geração, passaram-se aproximadamente " + Math.round(geracoes) + " gerações de brasileiros até esse ano de " + anoAtual + ".");

</script>