HTML boilerplate: uma estrutura inicial moderna, explicada linha a linha

Gerador de HTML boilerplate

HTML boilerplate: template comentado e gerador | We.Inc

Um boilerplate HTML5 moderno explicado linha a linha, mais um gerador para título, descrição, idioma, Open Graph, favicons, cor do tema e links de CSS ou JS. Copie ou baixe o index.html.

Um boilerplate HTML5 mínimo precisa de um doctype, um elemento html com o atributo lang, um head com o charset UTF-8, a meta tag viewport, um título e uma descrição, e depois um body. Linke o CSS com uma tag link no head e o JavaScript com uma tag script com defer. Gere o seu abaixo e baixe o index.html.

As linhas de que toda página precisa

Linha
Por quê

<!doctype html>
Ativa o modo padrão

<html lang="en">
Idioma para leitores de tela e tradução

<meta charset="utf-8">
Caracteres e símbolos corretos

<meta name="viewport" ...>
Escala adequada nos celulares

<title>
Texto da aba e título no resultado de busca

O gerador escreve um index.html completo e válido a partir de algumas opções: título e descrição da página, idioma, tags Open Graph para pré-visualização de links, um conjunto de favicons, cor do tema, dicas de preconnect e os links da sua folha de estilo e do seu script com o modo de carregamento que você escolher. Cada linha que ele pode gerar é explicada no template comentado mais abaixo.

Preencha o título, a descrição e o idioma, e ative os extras que quiser.
Escolha como o seu script carrega: defer, module ou async. A pré-visualização do arquivo se atualiza conforme você avança.
Copie a marcação ou baixe como index.html, pronto para abrir em um navegador ou editor.
Leia a versão comentada abaixo para entender cada linha antes de publicar.

Mantenha a meta charset dentro dos primeiros 1024 bytes do arquivo. Colocá-la em primeiro lugar no head é a forma mais simples de garantir isso.
Escreva um título e uma descrição únicos para cada página. Os buscadores costumam mostrá-los como título e trecho do resultado.
Evite maximum-scale=1 ou user-scalable=no na tag viewport. Bloquear o zoom prejudica quem precisa de texto maior.
Carregue os scripts com defer no head, em vez de no fim do body. O arquivo é baixado cedo e mesmo assim roda depois da análise do documento.
Use URLs absolutas no og:image. As redes sociais buscam a imagem a partir dos próprios servidores e não conseguem resolver um caminho relativo.

Perguntas frequentes

Como linkar um arquivo CSS no HTML?

Adicione <link rel="stylesheet" href="styles.css"> dentro do head. O href é relativo ao arquivo HTML, então css/styles.css aponta para uma pasta css ao lado dele. Folhas de estilo no head bloqueiam a renderização por um instante, e isso é intencional: evita um flash de conteúdo sem estilo.

Onde a tag script deve ficar?

No head, com defer, por exemplo <script src="app.js" defer></script>. O navegador baixa o arquivo em paralelo com a análise e o executa quando o documento termina de ser analisado, na ordem. Scripts type="module" já são adiados automaticamente. Use async só para scripts independentes, como os de analytics.

Preciso da meta tag X-UA-Compatible?

Não. Ela só afetava versões antigas do Internet Explorer, que não tem mais suporte da Microsoft. Os boilerplates atuais deixam essa tag de fora.

De quais arquivos de favicon eu realmente preciso?

Um favicon.ico na raiz do site para ferramentas antigas e rastreadores, um ícone SVG para navegadores modernos e um PNG apple-touch-icon de 180 por 180 pixels para a tela inicial do iOS cobrem quase todos os casos. Um web app manifest adiciona ícones maiores se você quiser que o site seja instalável.

Qual a diferença entre defer e async?

Os dois baixam sem bloquear o parser. O defer espera a análise terminar e mantém os scripts na ordem do documento. O async executa cada script assim que ele chega, em qualquer ordem, o que pode quebrar scripts que dependem uns dos outros ou do DOM.

O que vai no head

O head guarda informações sobre a página, não conteúdo: conjunto de caracteres, viewport, título, descrição, links para folhas de estilo, ícones e tags de pré-visualização social. Nada dele aparece no corpo da página.
A ordem importa um pouco. Primeiro o charset, depois o viewport, então o título e a descrição. Coloque as dicas de preconnect antes das folhas de estilo que precisam delas para que a conexão comece o mais cedo possível.

Open Graph e pré-visualização de links

Quando alguém compartilha a sua URL em um aplicativo de mensagens ou rede social, o card de pré-visualização vem de og:title, og:description, og:image e og:url. Sem eles, as plataformas tentam adivinhar, muitas vezes mal.
Uma imagem de 1200 por 630 pixels funciona nas principais redes. twitter:card definido como summary_large_image pede ao X a versão grande do card.

O boilerplate, linha a linha

Um index.html moderno e completo

Tudo de que uma página em produção costuma precisar, e nada além disso. A tabela abaixo explica cada linha.

O que cada linha faz

Linha
O que faz
Obrigatória?

<!doctype html>
Diz ao navegador para usar o modo padrão em vez do quirks mode
Sim

<html lang="en">
Declara o idioma da página para tecnologias assistivas, hifenização e tradução
Sim

<meta charset="utf-8">
Codificação de caracteres para que acentos, símbolos e emoji apareçam corretamente
Sim

<meta name="viewport" content="width=device-width, initial-scale=1">
Impede que os celulares mostrem uma página de desktop reduzida
Sim

<title>
Aba do navegador, favoritos e geralmente o título no resultado de busca
Sim

<meta name="description">
Muitas vezes usada como trecho na busca
Altamente recomendada

<link rel="canonical">
A URL preferida quando a página pode ser acessada por várias
Recomendada

<meta name="theme-color">
Colore a barra do navegador em alguns navegadores móveis
Opcional

<link rel="icon"> e apple-touch-icon
Ícone da aba e ícone da tela inicial
Recomendada

Meta tags og: e twitter:
Título, texto e imagem para a pré-visualização de links compartilhados
Recomendada

<link rel="preconnect">
Abre uma conexão com outra origem antes de ela ser necessária
Opcional

<link rel="stylesheet">
Carrega o seu CSS
Se você tiver CSS

<script defer>
Carrega JavaScript sem bloquear a análise e executa depois dela
Se você tiver JS

<main>
Marca o conteúdo principal para tecnologias assistivas
Recomendada

Como linkar CSS no HTML

Três formas de adicionar CSS

Um arquivo externo é o padrão porque o navegador o guarda em cache entre as páginas. Um bloco style serve para regras específicas da página; o atributo style serve para valores pontuais.

Caminhos relativos explicados

A maioria das folhas de estilo quebradas é um caminho errado. Procure um 404 no painel de rede das ferramentas de desenvolvedor.

Como linkar JavaScript do jeito certo

Opções de carregamento de script

Marcação
Bloqueia a análise?
Executa quando
Mantém a ordem?

<script src="a.js">
Sim
Imediatamente ao ser encontrado
Sim

<script src="a.js" defer>
Não
Depois da análise, antes do DOMContentLoaded
Sim

<script src="a.js" async>
Não (pausa por um instante para executar)
Assim que termina de baixar
Não

<script type="module" src="a.js">
Não
Como o defer
Sim

Tags script recomendadas

Módulos ganham strict mode, escopo próprio e suporte a import. O nomodule permite servir uma alternativa para navegadores muito antigos, se você ainda precisar.

Gerador de boilerplate

Título da página

Código do idioma

en, fr, es-MX

Descrição

URL da página (canonical e og:url)

Caminho da folha de estilo (em branco para nenhuma)

Caminho do script (em branco para nenhum)

Carregamento do script

Tags Open Graph e Twitter

Conjunto de favicons

Preconnect ao Google Fonts

og:image (URL absoluta)

Cor do tema

Copiar HTML

Baixar index.html

Comece grátis · Sem cartão de crédito