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

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)

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.vinull.com/wp-content/uploads/2009/04/windowslivewriteryoushouldbeusingbalsamiqmockups_116a5image4.png&key=715e521224671318234b330cb0a43d92ff8d7bf72edc16a70992e0f8bfbcf4dd" alt="windowslivewriteryoushouldbeusingbalsami" />