Editor HTML Online

Continuar na ferramenta

Mais páginas desta ferramenta

modelo base html boilerplate

Modelo base de página HTML5 (boilerplate) para testar online

Cole um esqueleto HTML5 completo no painel HTML e o editor o trata como documento inteiro: ele não duplica doctype nem head, apenas encaixa o CSS e o JavaScript dos outros painéis nos lugares certos.

As cinco linhas que toda página precisa

O esqueleto mínimo tem um doctype html, que põe o navegador em modo padrão em vez do modo de compatibilidade; a tag html com o atributo lang, que informa o idioma a leitores de tela e tradutores; um meta charset utf-8, para que acentos e símbolos sejam lidos corretamente; um meta viewport com width=device-width e initial-scale=1, sem o qual celulares desenham a página em 980 px e a reduzem; e um title, que aparece na aba. Quando o painel HTML recebe só um trecho, a ferramenta monta essas linhas por conta própria, com o lang igual ao idioma da interface e o title escapado, para que um título com sinais de menor não quebre a página.
Se você já tem a página completa, o editor a reconhece quando o painel começa com doctype ou com a tag html (comentários antes são permitidos). Nesse caso o script que repassa o console é inserido logo depois da abertura do head, o CSS do painel CSS entra antes do fechamento do head, para vencer regras anteriores de mesma especificidade, e o JavaScript entra antes do fechamento do body. Se faltar o head, a ferramenta cria um vazio no lugar certo. O arquivo baixado pelo botão Baixar segue a mesma montagem, só que sem o script do console.
Um boilerplate de verdade, como o de projetos grandes, acrescenta mais: meta description, ícone, folhas de reset e metadados sociais. Para esses campos use o gerador de meta tags do site e cole o resultado dentro do head do seu documento. O que importa para um teste rápido é o esqueleto acima, e o editor garante que ele seja montado sempre do mesmo jeito.

Como a ferramenta monta o documento

Trecho no painel HTML

Entrada: <h1>Oi</h1>
Saída esperada: doctype + html lang + charset + viewport + title + body

Tudo isso é gerado em volta do trecho.

Meta viewport gerado

Entrada: trecho de página
Saída esperada: width=device-width, initial-scale=1

Faz as media queries responderem à largura da prévia.

Documento completo reconhecido

Entrada: <!DOCTYPE html><html>...
Saída esperada: sem doctype duplicado

O painel é usado como está, e os outros painéis são encaixados nele.

Documento sem head

Entrada: <html><body>x</body></html>
Saída esperada: head vazio criado após <html>

O CSS e o runtime precisam de um head para entrar.

Título com sinais especiais

Entrada: </title><script>
Saída esperada: </title><script>

O title é escapado e não consegue fechar a tag nem abrir um script.

FAQ da ferramenta completa

Como testar HTML, CSS e JavaScript online sem instalar nada?

Escreva nos três painéis e a prévia atualiza na hora. Não precisa de conta, servidor nem arquivo: o navegador monta uma página com o seu HTML no corpo, o CSS numa tag style e o JavaScript no fim do corpo, e executa tudo num iframe isolado. O console mostra o que o código imprimir.

Meu código tem acesso aos dados deste site?

Por que alert, confirm e prompt não abrem janela?

Como compartilhar o que eu escrevi?

O link de compartilhamento envia meu código a algum servidor?

Posso usar bibliotecas por CDN e chamar APIs com fetch?

Como baixar a página como arquivo HTML?

A prévia travou. O que fazer?

Posso colar uma página HTML completa?

O que escrevo fica salvo?

Perguntas frequentes

Qual é o HTML5 mínimo válido?

Doctype, uma tag html com lang, um head com charset e title, e um body. O viewport não é exigido pela especificação, mas é essencial para páginas que serão vistas no celular.

Por que o doctype importa?

Sem ele os navegadores entram em modo de compatibilidade, com regras antigas de caixa e de tamanho de fonte. Com o doctype html a página é renderizada em modo padrão.

O editor altera o meu head?

Só acrescenta: o script do console depois da abertura e o CSS do painel antes do fechamento. O restante do seu head permanece como escrito, e o arquivo baixado não leva o script do console.

Próximos passos

As cinco linhas que toda página precisa

O esqueleto mínimo tem um doctype html, que põe o navegador em modo padrão em vez do modo de compatibilidade; a tag html com o atributo lang, que informa o idioma a leitores de tela e tradutores; um meta charset utf-8, para que acentos e símbolos sejam lidos corretamente; um meta viewport com width=device-width e initial-scale=1, sem o qual celulares desenham a página em 980 px e a reduzem; e um title, que aparece na aba. Quando o painel HTML recebe só um trecho, a ferramenta monta essas linhas por conta própria, com o lang igual ao idioma da interface e o title escapado, para que um título com sinais de menor não quebre a página.

Se você já tem a página completa, o editor a reconhece quando o painel começa com doctype ou com a tag html (comentários antes são permitidos). Nesse caso o script que repassa o console é inserido logo depois da abertura do head, o CSS do painel CSS entra antes do fechamento do head, para vencer regras anteriores de mesma especificidade, e o JavaScript entra antes do fechamento do body. Se faltar o head, a ferramenta cria um vazio no lugar certo. O arquivo baixado pelo botão Baixar segue a mesma montagem, só que sem o script do console.

Um boilerplate de verdade, como o de projetos grandes, acrescenta mais: meta description, ícone, folhas de reset e metadados sociais. Para esses campos use o gerador de meta tags do site e cole o resultado dentro do head do seu documento. O que importa para um teste rápido é o esqueleto acima, e o editor garante que ele seja montado sempre do mesmo jeito.

Como a ferramenta monta o documento

Trecho no painel HTML

Entrada: <h1>Oi</h1>
Saída esperada: doctype + html lang + charset + viewport + title + body

Tudo isso é gerado em volta do trecho.

Meta viewport gerado

Entrada: trecho de página
Saída esperada: width=device-width, initial-scale=1

Faz as media queries responderem à largura da prévia.

Documento completo reconhecido

Entrada: <!DOCTYPE html><html>...
Saída esperada: sem doctype duplicado

O painel é usado como está, e os outros painéis são encaixados nele.

Documento sem head

Entrada: <html><body>x</body></html>
Saída esperada: head vazio criado após <html>

O CSS e o runtime precisam de um head para entrar.

Título com sinais especiais

Entrada: </title><script>
Saída esperada: </title><script>

O title é escapado e não consegue fechar a tag nem abrir um script.

FAQ da ferramenta completa

Como testar HTML, CSS e JavaScript online sem instalar nada?

Meu código tem acesso aos dados deste site?

Por que alert, confirm e prompt não abrem janela?

Como compartilhar o que eu escrevi?

O link de compartilhamento envia meu código a algum servidor?

Posso usar bibliotecas por CDN e chamar APIs com fetch?

Como baixar a página como arquivo HTML?

A prévia travou. O que fazer?

Posso colar uma página HTML completa?

O que escrevo fica salvo?

Perguntas frequentes

Qual é o HTML5 mínimo válido?

Doctype, uma tag html com lang, um head com charset e title, e um body. O viewport não é exigido pela especificação, mas é essencial para páginas que serão vistas no celular.

Por que o doctype importa?

Sem ele os navegadores entram em modo de compatibilidade, com regras antigas de caixa e de tamanho de fonte. Com o doctype html a página é renderizada em modo padrão.

O editor altera o meu head?

Só acrescenta: o script do console depois da abertura e o CSS do painel antes do fechamento. O restante do seu head permanece como escrito, e o arquivo baixado não leva o script do console.