Inserir elementos ao DOM: Direto no HTML ou com JS?

[zkado 0]

Bom dia!

Estou desenvolvendo um página para um projeto de pesquisa, já tenho uma boa prática com HTML/CSS e estou aprendendo JavaScript usando a biblioteca JQuery, como eu nunca desenvolvi uma ferramenta web antes, e apenas pratiquei HTML/CSS/JS:
Minha duvida se apresenta no seguinte contexto:

Estou criando uma pánina com 4 tabs menus Ex:(inicio, informações, contato e CADASTRO), onde cada tab dessa tem um conteúdo diferente e esse conteúdo é enorme. É aí que estou com dificuldade, não sei de que maneira inserir todo esse conteúdo, se insiro direto no html ou faço isso via JS. É lógico que se eu inserir direto no html seria muito mais rápido que inserir via JS.
Então seguindo a experiência de vocês, como devo inserir esse conteúdo ao DOM, direto no documento HTML ou via JS?

Comp.: Os dados do site serão armazenados em um Banco de dados PHP com MySQL.

Para deixar mais claro segue abaixo um mockup de exemplo: (não desenvolvido por min)

[goodeathx 8]

Questão de escolha, mas eu aconselho inserir os menus que são 'estáticos' em HTML. Pense o seguinte:

 

Se alguém acessa essa página web por um dispositivo que não tem suporte ou simplesmente o javascript não está ativado? Ele fica sem navegar?

 

Você pode mesclar, colocar os menus em html, verificar se o javascript está ativo , daí aplicar o atributo href='javascript:void(0)' e faz a mudança de conteúdo com javascript, caso não esteja ativado, altera os atributos href='?query=' ; Você disse que os dados iam estar em um banco de dados, você pode usar querystring e recuperar.

 

É um pouco trabalhoso, mas você vai ter certeza que sempre será possível visualizar o conteúdo.

[zkado 0]

Exáto, fiz os menus fixos no html, mudando a cor do background de cada um com uma classe active, e a transição entre eles com jquery. Você me fez pensar em uma coisa que realmente eu não tinha pensado antes, se o js não estiver ativado.

Minha estrutura está parecida com isso:

<main>
   <div class="container">
      <nav class="menu">
        <ul>
          <li>Tab1</li>
          <li>Tab2</li>
          <li>Tab3</li>
          <li>Tab4</li>
        </ul>
      </nav>
      <div class="content">
        /*Aqui vai o conteudo das tabs*/
      </div>
   </div>
</main>

Vai ser um pouco trabalhoso só fazer o formulário de cadastro de usuários se for via js, já que é grande, por isso que fiquei com essa duvida, de qual seria mais viável, já que vou trabalhar com vários inputs.