HTML5 Prático: Cabeçalho e Rodapé com Includes

Um dos segredos para manter um site bem organizado e fácil de atualizar é centralizar os elementos que se repetem em todas as páginas — como o cabeçalho e o rodapé. Isso pode ser feito facilmente com os Server Side Includes (SSI), recurso disponível em hospedagens que aceitam arquivos .shtml.

1️⃣ O que são os Server Side Includes (SSI)

SSI é uma técnica usada em servidores web (como Apache) que permite incluir o conteúdo de um arquivo dentro de outro, antes de enviá-lo ao navegador. É muito útil para aplicar o mesmo layout em várias páginas.

Exemplo básico:

<!--#include virtual="/includes/header.html" -->
<main>
  <h1>Título da Página</h1>
  <p>Conteúdo principal aqui.</p>
</main>
<!--#include virtual="/includes/footer.html" -->

2️⃣ Estrutura de pastas recomendada

/ (raiz do site)
├── includes/
│   ├── header.html
│   └── footer.html
├── informatica/
│   └── html5/
│       └── conteudo/
│           └── includes-cabecalho-rodape.shtml
└── index.html

Coloque o cabeçalho e rodapé na pasta /includes/ e chame-os em cada página com o comando include virtual.

Diagrama da estrutura de pastas do site mostrando includes e páginas. — Figura 1 – Estrutura de diretórios para o uso de includes no site.

3️⃣ Exemplo de arquivo header.html

<header>
  <div class="logo">
    <img src="/images/logo-gospellife.png" alt="Comunidade Vida Evangélica">
  </div>
  <nav>
    <ul>
      <li><a href="/">Início</a></li>
      <li><a href="/informatica/html5/">HTML5</a></li>
      <li><a href="/religiao/">Religião</a></li>
      <li><a href="/politica/">Política</a></li>
    </ul>
  </nav>
</header>

4️⃣ Exemplo de arquivo footer.html

<footer>
  <p>© 2025 Comunidade Vida Evangélica. Todos os direitos reservados.</p>
  <p><a href="/contato/">Fale Conosco</a> | <a href="/sobre/">Sobre o Site</a></p>
</footer>

Exemplo visual de uma página HTML com cabeçalho e rodapé incluídos via SSI. — Figura 2 – Exemplo visual do resultado final com cabeçalho e rodapé incluídos automaticamente.

5️⃣ Vantagens

Atualiza o menu e rodapé de todo o site com apenas um arquivo.
Facilita a padronização visual entre páginas.
Evita erros de digitação repetitiva.
Compatível com hospedagens Apache e Nginx (com SSI habilitado).

6️⃣ Dica importante

Certifique-se de que os arquivos usem a extensão .shtml e que sua hospedagem esteja configurada para interpretar SSI. Em muitos servidores, o recurso vem habilitado por padrão.

⬅ Voltar ao índice de HTML5

Desenvolvido por Maxwell Alves – Comunidade Vida Evangélica