Início › Ferramentas › Visualizador de HTML
Visualizador de HTML
Às vezes você só quer saber como um trecho de HTML vai ficar: um e-mail marketing, um bloco que alguém enviou, um teste de estilo. Abrir um editor, criar um arquivo e atualizar o navegador a cada mudança toma tempo. Este visualizador mostra o resultado ao lado do código, enquanto você edita.
A visualização roda isolada (sandbox): o código não acessa esta página nem seus dados. Nada é enviado para servidores.
O código roda dentro de uma área isolada (sandbox), sem acesso à página ao redor, o que o torna seguro para olhar trechos que você não conhece.
Como usar
- Escreva ou cole o HTML na caixa da esquerda, ou clique em Abrir arquivo .html.
- O resultado aparece na área da direita poucos instantes depois de você parar de digitar.
- Para testar scripts, marque a opção de permitir JavaScript. Faça isso apenas com códigos de confiança.
- Ajuste o código e acompanhe o efeito.
Exemplo: testando um trecho com estilo
Cole um código como <h1 style="color:green">Oi</h1> e veja o título aparecer em verde. Você pode incluir uma tag <style> com regras de CSS e testar o layout completo de uma seção.
Se o HTML depender de arquivos externos (imagens locais, folhas de estilo do seu computador), eles não serão carregados, porque a visualização é isolada. Use endereços completos (https) para recursos online.
Como a isolação funciona
O resultado é exibido em um iframe com o atributo sandbox. Por padrão, ele bloqueia scripts, formulários que enviam dados, janelas pop-up e o acesso a esta página. Ao marcar a opção de JavaScript, apenas a execução de scripts é liberada, e o código continua sem acesso ao restante do site.
O que esta ferramenta não faz
Ela não valida o HTML nem corrige erros: o navegador exibe o que consegue interpretar. Também não salva seu código. Se for uma peça importante, copie para um arquivo antes de sair da página.
Dicas
- Comece com
<!doctype html>e a tag<meta charset="utf-8">para que acentos apareçam corretamente. - Para ver como o layout se comporta em telas pequenas, inclua
<meta name="viewport" content="width=device-width, initial-scale=1">. - Evite colar códigos de origem desconhecida com o JavaScript liberado.
Perguntas frequentes
É seguro colar qualquer código aqui?
Com JavaScript desligado (padrão), sim: a visualização é isolada. Com o JavaScript ligado, rode apenas códigos em que confia.
Por que minhas imagens não aparecem?
Imagens do seu computador não carregam na visualização isolada. Use endereços online (https) ou incorpore a imagem no próprio código.
Meu código é salvo?
Não. Ele fica só no seu navegador, enquanto a página está aberta.
Funciona no celular?
Sim, mas editar código é bem mais confortável em um computador.
Outras ferramentas
Tem um negócio na região?
A Daqui Sites cria o site do seu comércio ou consultório, cuida da hospedagem e dos ajustes.
Conheça o serviço