Editor de HTML e CSS

Como usar o editor HTML

Use este editor para pequenos layouts estáticos, tabelas ou experiências com CSS. O texto claro nos campos HTML e CSS é um exemplo; a primeira prévia mostra o resultado. Ao focar um campo de exemplo, ele fica vazio para digitar. Se sair dele vazio, o exemplo claro retorna sem restaurar resultados anteriores nem ativar a exportação.

Digite seu próprio HTML e CSS. É possível colar um fragmento ou um documento HTML completo. O editor reconstrói um documento estático com os elementos aceitos, sem preservar metadados. Depois de começar a editar, apenas sua entrada real é usada; o exemplo claro de outro campo vazio não é misturado ao trabalho. Seu texto permanece ao trocar de campo.

O que a prévia mostra

A prévia é uma página isolada. Ela mostra o HTML compatível e seu CSS sem aplicar estilos ao próprio editor. É possível verificar textos, títulos, listas, tabelas, controles comuns de formulário e layouts CSS. Conteúdos maiores podem ser rolados dentro da prévia. A largura acompanha o painel: não é um simulador de dispositivo de tamanho fixo.

JavaScript, eventos, páginas incorporadas, SVG, players e recursos externos são removidos ou bloqueados. Links não navegam e formulários não são enviados. Imagens, fontes, folhas de estilo e imports CSS remotos não carregam. Imagens PNG, JPEG, GIF e WebP incorporadas em base64 são aceitas. Um aviso informa os elementos ou atributos removidos; referências externas no CSS são bloqueadas pela política do documento. O código original continua nas caixas para revisão.

Dois exemplos pequenos

Digite o HTML e o CSS abaixo para ver “Hello” como um título verde-escuro. Altere o texto entre as tags para mudar as palavras ou a cor CSS para mudar a aparência.

Para uma lista, use <ul><li>Plan</li><li>Review</li></ul> com li { margin-bottom: 8px; }. Aparecem dois itens com marcadores e espaço após cada um. Isso ajuda a testar um bloco pequeno antes de levá-lo ao seu projeto.

HTML: <h1>Hello</h1>
CSS:  h1 { color: #166534; }

Copiar e baixar

Copiar HTML e Baixar HTML usam o mesmo documento estático atual da prévia. O arquivo UTF-8 page.html reúne a marcação compatível, o CSS e uma política restritiva de conteúdo. Abra-o em um navegador para visualizar ou em um editor de texto para inspecionar o código. É um rascunho estático independente, não um site hospedado ou uma aplicação com scripts funcionando.

Limpar remove seu HTML, CSS e resultado, com confirmação quando há código digitado. Os campos vazios voltam a exibir exemplos claros, que não são dados salvos. A digitação usa a edição normal do navegador. A página avisa antes de sair após mudanças, mas não salva rascunhos automaticamente. Baixe o HTML estático para guardar o resultado aceito.

Limites e solução de problemas

O limite conjunto é de 100.000 caracteres, 3.000 nós HTML e 64 níveis aninhados. Se for excedido, a entrada permanece visível enquanto prévia e exportação ficam desativadas. Reduza o conteúdo para continuar. Uma entrada vazia não tem arquivo para baixar.

Navegadores costumam corrigir tags sem fechamento e ignorar declarações CSS inválidas. Esta ferramenta não valida padrões: uma prévia visível não prova que o código seja válido, acessível ou pronto para produção. Verifique seletores, sintaxe e dependências de recursos externos bloqueados. Para um diagnóstico completo, use as ferramentas de desenvolvimento do seu próprio projeto.

Perguntas frequentes