Suporte a Navegadores HTML5

Todo navegador evergreen — Chrome, Firefox, Safari e Edge — suporta os elementos semânticos do HTML5 nativamente há mais de uma década (desde aproximadamente 2013). Na web atual, isso raramente é algo em que você precisa pensar: você pode escrever <header>, <nav>, <article> e os demais, e eles simplesmente funcionam.

Esta página aborda dois tópicos relacionados. Primeiro, a pequena linha de CSS que historicamente garantia que os elementos semânticos fossem renderizados como blocos. Segundo — mantido aqui principalmente por contexto histórico — o polyfill HTML5Shiv, que antes era necessário para fazer esses elementos funcionarem no Internet Explorer 8 e versões anteriores. Finalizamos com a abordagem moderna para verificar as capacidades do navegador.

Por que Navegadores Mais Antigos Precisavam de Ajuda

Quando um navegador encontra um elemento que não reconhece, ele não o ignora — ainda o insere no DOM. A questão é como ele o renderiza. Por padrão, um elemento desconhecido é tratado como display: inline. Os novos elementos semânticos do HTML5, no entanto, são todos elementos de nível de bloco por design (como <div>). Assim, em um navegador que não conhecia, por exemplo, <section>, esse elemento seria disposto de forma inline em vez de como bloco, quebrando silenciosamente margens, larguras e empilhamento.

Há dois problemas distintos que um navegador antigo poderia ter:

Layout — o elemento existe, mas é renderizado inline em vez de bloco. Corrigido com uma regra CSS (abaixo).
Estilização — o Internet Explorer 8 e versões anteriores não conseguiam aplicar CSS a elementos que não reconheciam até que fossem "registrados" via JavaScript. Esse é o problema que o HTML5Shiv resolveu.

Elementos Semânticos como Elementos de Bloco

O HTML5 especifica vários novos elementos semânticos, e todos eles são elementos de nível de bloco. Veja a lista:

Para forçar esses elementos a renderizarem como blocos em um navegador mais antigo, defina a propriedade CSS display explicitamente. Os navegadores modernos já aplicam essa regra por conta própria, portanto não há problema em mantê-la:

header, section, footer, aside, nav, main, article, figure {
  display: block;
}

Observe que display: block por si só é suficiente para corrigir o layout. Por si só, não faz com que o Internet Explorer 8 consiga estilizar o elemento — essa limitação mais antiga exigia o shim JavaScript descrito a seguir.

HTML5Shiv (Legado)

Legado / histórico. O HTML5Shiv (também escrito "shim") era um pequeno arquivo JavaScript necessário apenas para o Internet Explorer 8 e versões anteriores, que não conseguia aplicar CSS a elementos desconhecidos. A Microsoft encerrou o suporte a essas versões, e o Internet Explorer em si chegou ao fim de vida em 2022. A menos que você tenha um requisito explícito e incomum de suportar o IE 8, você não precisa do HTML5Shiv hoje. Ele está incluído aqui apenas para contexto.

O shiv é colocado dentro do <head> e referenciado em uma tag <script>. Ele é envolvido em um comentário condicional exclusivo do IE (<!--[if lt IE 9]>) para que todos os outros navegadores o ignorem completamente.

Exemplo do HTML5Shiv:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <section>
      <h1>The most beautiful places in the world</h1>
      <article>
        <h2>Salar de Uyuni, Bolivia</h2>
        <p>The world's largest salt flats, spanning 4086 miles (10,582 sq. km), Salar de Uyuni is unlike anywhere else on earth.</p>
      </article>
      <article>
        <h2>Moraine Lake, Canada</h2>
        <p>Moraine Lake may be only half the size of its nearby neighbour Lake Louise, but it's even more scenic.</p>
      </article>
      <article>
        <h2>Iguazu Falls, Argentina/Brazil border</h2>
        <p>One of the modern natural wonders of the world, this chain of mini waterfalls is one of the planet's most awe-inspiring sights.</p>
      </article>
    </section>
  </body>
</html>

Experimente Você Mesmo »

A Abordagem Moderna: Detecção de Recursos

Os polyfills no estilo shiv corrigiam um elemento ausente para um navegador específico já descontinuado. A forma contemporânea de lidar com diferenças entre navegadores é a detecção de recursos: em vez de perguntar "qual navegador é este?", você pergunta "este navegador suporta o recurso que desejo?" e adapta adequadamente.

Em CSS, a at-rule @supports testa se um par propriedade/valor é compreendido antes de aplicar um bloco de estilos:

/* Use a grid layout only where the browser supports it */
@supports (display: grid) {
  .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

Em JavaScript, você verifica a API ou propriedade diretamente:

if ('IntersectionObserver' in window) {
  // Use IntersectionObserver
} else {
  // Provide a fallback
}

Esse padrão é mais confiável do que a detecção de versão, pois testa a capacidade real, e continua funcionando conforme novos navegadores e versões são lançados. Para elementos semânticos do HTML5 especificamente, nenhuma detecção é necessária nos navegadores evergreen atuais.

O Que Mais Ler

Introdução ao HTML5 — o que o HTML5 adiciona em relação às versões anteriores.
Elementos Semânticos no HTML5 — quando e como usar cada elemento estrutural.
Migração para HTML5 — convertendo um documento HTML 4 mais antigo para HTML5.

Prática

Quais destes navegadores suportam elementos semânticos do HTML5 nativamente (sem shiv necessário)?

Google Chrome atualFirefox atualSafari atualMicrosoft Edge atualInternet Explorer 8Internet Explorer 6