Inserir elementos no DOM: Direto no HTML ou com JQuery?

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)
[img:descricao=Mockup exemplo da página]http://www.vinull.com/wp-content/uploads/2009/04/windowslivewriteryoushouldbeusingbalsamiqmockups_116a5image4.png[/img]