Docs executáveis de HTML: Tag header

Q: Qual a diferença entre head e header no HTML?

é a parte invisível do documento, com o , as tags e os links de folhas de estilo, e existe exatamente um. é conteúdo visível dentro do , e uma página pode ter vários.

Q: Como fazer o header ficar no topo ao rolar a página?

Dê a ele position: sticky; top: 0; mais uma cor de fundo e um z-index, para que o conteúdo role por baixo. O sticky só funciona enquanto o pai do header for mais alto que ele, e um ancestral com overflow: hidden impede que ele fique preso à página.

Como fazer um cabeçalho no HTML

Envolva o topo da sua página (logo, nome do site, menu principal) num elemento <header>. É uma caixa block sem aparência padrão, então algumas linhas de CSS a transformam numa barra:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Site header</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    .site-header {
      display: flex; align-items: center; gap: 16px;
      padding: 12px 20px; background: #111827; color: #fff;
    }
    .logo { font-weight: 700; font-size: 20px; margin-inline-end: auto; }
    .site-header a { color: #e5e7eb; text-decoration: none; }
    .site-header a:hover { color: #fff; text-decoration: underline; }
    .cta { background: #2563eb; padding: 6px 12px; border-radius: 6px; }
  </style>
</head>
<body>
  <header class="site-header">
    <div class="logo">Acme</div>
    <nav>
      <a href="#">Products</a>
      <a href="#">Pricing</a>
      <a href="#">Blog</a>
    </nav>
    <a class="cta" href="#">Sign up</a>
  </header>
  <main style="padding: 20px;">
    <h1>Welcome</h1>
    <p>The page content starts here.</p>
  </main>
</body>
</html>

margin-inline-end: auto no logo empurra o menu e o botão para a outra ponta da barra. Remova o elemento <style> e você ainda tem um cabeçalho: é a tag que o torna um, não o fundo escuro.

header vs head vs h1

Três nomes parecidos que fazem trabalhos diferentes:

Elemento	Onde	Visível	Quantos
`<head>`	Direto dentro de `<html>`, antes de `<body>`	Não: guarda `<title>`, `<meta>`, `<link>`	Exatamente um
`<header>`	Dentro de `<body>`	Sim: conteúdo introdutório de uma página ou seção	Quantos quiser
`<h1>` a `<h6>`	Em qualquer lugar de `<body>`	Sim: um título	Quantos quiser

O <head> abaixo define o título da página que o navegador mostra na aba. Tudo o que você vê na prévia vem de <body>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>This text is in the head</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <header style="border: 2px solid #2563eb; padding: 0 12px;">
    <h1>This h1 is inside a header</h1>
    <p>The header is visible content.</p>
  </header>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = 'document.title from the head: ' + document.title;
  </script>
</body>
</html>

Um header muitas vezes contém um título, mas não é obrigatório, e um título não precisa de um header em volta.

Headers dentro de artigos

<header> introduz o article ou section mais próximo, não só a página. Uma lista de posts de blog em que cada post tem o seu próprio header é válida e comum:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article headers</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 14px; margin-bottom: 10px; }
    article header { border-bottom: 1px solid #e5e7eb; }
    article h2 { margin: 12px 0 4px; }
    .meta { color: #6b7280; font-size: 14px; margin: 0 0 10px; }
  </style>
</head>
<body>
  <article>
    <header>
      <h2>Why tabs beat spaces</h2>
      <p class="meta">By Sam, <time datetime="2026-09-20">Sep 20</time></p>
    </header>
    <p>A short argument.</p>
  </article>
  <article>
    <header>
      <h2>Why spaces beat tabs</h2>
      <p class="meta">By Lee, <time datetime="2026-09-22">Sep 22</time></p>
    </header>
    <p>A shorter reply.</p>
  </article>
</body>
</html>

Para os leitores de tela, só o header do nível da página (um que não está dentro de article, aside, main, nav ou section) vira o landmark banner. Os headers dos artigos são grupos comuns, então você não acaba com vários banners.

Cabeçalho fixo

position: sticky mantém o header no topo enquanto o conteúdo embaixo dele rola. Role dentro da caixa abaixo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky header</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .viewport { height: 220px; overflow-y: auto; border: 2px solid #e5e7eb; }
    header {
      position: sticky; top: 0; z-index: 1;
      background: #2563eb; color: #fff; padding: 10px 14px; font-weight: 600;
    }
    .content p { margin: 0; padding: 14px; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="viewport">
    <header>I stay at the top</header>
    <div class="content">
      <p>Row 1</p><p>Row 2</p><p>Row 3</p><p>Row 4</p>
      <p>Row 5</p><p>Row 6</p><p>Row 7</p><p>Row 8</p>
    </div>
  </div>
</body>
</html>

Três detalhes fazem funcionar: top: 0 (sticky não faz nada sem um deslocamento), uma cor de fundo (senão as linhas aparecem através dele) e z-index para que o conteúdo posicionado não seja pintado por cima dele. Numa página real, a caixa que rola é a própria página, então o header fica direto no <body>.

Um header com position: fixed também fica parado, mas sai do fluxo da página, então o conteúdo desliza por baixo dele e precisa de padding no topo. O sticky mantém o seu espaço no layout.

O que pode ir num header

Um header pode conter quase qualquer conteúdo: títulos, uma imagem de logo, um <nav>, um formulário de busca, um botão. Ele não pode conter outro <header> nem um <footer>, e não pode ficar dentro de um <footer>, de um <address> ou de outro <header>.

<header>
  <a href="/"><img src="logo.svg" alt="Acme home"></a>
  <nav aria-label="Main">...</nav>
  <form role="search">...</form>
</header>

Quando o logo é um link para a página inicial, o seu texto alt deve dizer para onde o link vai ("Acme home"), porque é isso que o leitor de tela anuncia.

Erros comuns

Confundir <header> com <head>. Metadados vão no <head>; conteúdo visível nunca vai.
Usar <header> em todo título. Um título sozinho não precisa de um header em volta. Use <header> quando há um grupo de conteúdo introdutório.
Um cabeçalho fixo sem fundo. O texto da página aparece rolando através dele. Defina um background.
Sticky que não fica preso. Um ancestral com overflow: hidden ou overflow: auto vira a caixa de rolagem do sticky, então o header fica preso dentro dessa caixa (ou não fica preso). Verifique os ancestrais.
Colocar o menu do site numa <div> dentro do header. Use <nav> para que quem usa leitor de tela possa pular até ele.

Perguntas frequentes

O que é a tag header no HTML?

<header> é um elemento semântico para conteúdo introdutório: o logo e o menu do site no topo da página, ou o título e a autoria no topo de um artigo. É uma caixa block normal, sem estilo padrão.

Qual a diferença entre head e header no HTML?

<head> é a parte invisível do documento, com o <title>, as tags <meta> e os links de folhas de estilo, e existe exatamente um. <header> é conteúdo visível dentro do <body>, e uma página pode ter vários.

Uma página pode ter mais de um elemento header?

Sim. Uma página normalmente tem um cabeçalho do site, e cada <article> ou <section> pode ter o seu próprio <header> para o título e as informações. Só um header que não está dentro de article, aside, main, nav ou section conta como o banner da página para os leitores de tela.

O nav deve ficar dentro do header?

Pode ficar, e muitas vezes fica quando o menu principal está no topo da página. Colocar <nav> fora de <header> também é válido; escolha o que combina com o seu layout.

Como fazer o header ficar no topo ao rolar a página?

Dê a ele position: sticky; top: 0; mais uma cor de fundo e um z-index, para que o conteúdo role por baixo. O sticky só funciona enquanto o pai do header for mais alto que ele, e um ancestral com overflow: hidden impede que ele fique preso à página.

Conceitos relacionados