Os resultados são fornecidos apenas para fins informativos e podem conter erros. Verifique de forma independente as informações importantes. O uso desta ferramenta é por sua conta e risco.
O que esta ferramenta faz
O Gerador de Boilerplate HTML escreve o esqueleto inicial de uma página HTML5: a declaração <!DOCTYPE html>, um elemento <html> com o atributo lang, um <head> com o charset UTF-8 e o título da página, e um <body> com um título de seção. Altere o título ou o idioma e o código é atualizado na hora.
Três opções vêm ativadas por padrão e podem ser desligadas: a meta tag de viewport responsivo (necessária para que as páginas apareçam corretamente no celular), um link para style.css e uma tag script.js com o atributo defer, que baixa o script em paralelo e o executa depois que a página foi analisada. O título e o idioma são escapados, então caracteres como & ou < não causam problemas.
Quando usar
- Começar um protótipo, uma demo ou a reprodução de um bug que precisa de um arquivo HTML limpo.
- Ensinar a estrutura mínima de uma página HTML5 válida.
- Criar uma landing page estática antes de adicionar um framework.
- Conferir quais tags o head de uma página deve ter antes de adicionar as tags de SEO com o Gerador de Meta Tags.
Exemplo prático
Entrada
Título da página: My Page
Código do idioma: en
Viewport, style.css e script.js ativadosSaída
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My Page</h1>
<script src="script.js" defer></script>
</body>
</html>Perguntas sobre esta ferramenta
Por que o atributo lang é importante?
Leitores de tela o usam para escolher a pronúncia certa, os navegadores o usam para oferecer tradução e os mecanismos de busca o usam como sinal de idioma. Defina-o com o idioma principal do conteúdo, como en, fr ou he.
O que a meta tag de viewport faz?
Sem ela, os navegadores de celular renderizam a página como se a tela tivesse cerca de 980px de largura e depois a encolhem, deixando o texto minúsculo. width=device-width, initial-scale=1.0 diz a eles para usar a largura real da tela.
Por que o script é incluído com defer?
Com defer, o navegador continua analisando o HTML enquanto o script é baixado e só o executa quando o documento está pronto. Assim a página não fica bloqueada e o seu script pode procurar elementos com segurança.
O que devo adicionar em seguida?
Uma meta description e as tags de pré-visualização para redes sociais. O Gerador de Meta Tags e o Gerador de Tags Open Graph geram essas tags, e o Gerador de Robots.txt ajuda quando o site for ao ar.
Esta ferramenta é gratuita?
Sim, é grátis. Sem cadastro nem e-mail. Veja o resultado nesta página.
Como recebo o resultado?
Use a ferramenta nesta página. O resultado aparece aqui, sem envio por e-mail.