Editor HTML Online (WYSIWYG): Escreva e Copie o Código

Editor HTML online: escreva como no Word, copie o código

Digite ou cole seu texto no editor visual, formate com a barra de botões e pegue logo abaixo o código HTML limpo, pronto para colar no seu site, CMS, loja virtual ou modelo de e-mail. O código é atualizado enquanto você escreve.

Tudo acontece no seu navegador: o texto não é enviado a nenhum servidor. O rascunho fica guardado só neste aparelho (no armazenamento local do navegador) e some quando você clica em “Limpar tudo”.

Como usar

1. Escreva ou cole o texto na área branca. Colar do Word, do Google Docs ou de uma página da web mantém títulos, negrito, itálico, links, listas e tabelas — e descarta o resto.
2. Formate com a barra: parágrafo e títulos (H1 a H4), negrito, itálico, sublinhado, tachado, listas, citação, link, código em linha, bloco de código, linha horizontal e alinhamento.
3. Copie o código com “Copiar HTML” ou baixe um arquivo .html completo, com <!DOCTYPE html> e codificação UTF-8.
4. Se preferir, edite o código direto na caixa e clique em “Aplicar ao editor” (ou Ctrl+Enter) para ver o resultado.

Atalhos de teclado: Ctrl+B (negrito), Ctrl+I (itálico), Ctrl+U (sublinhado), Ctrl+K (link), Ctrl+Z (desfazer) e Ctrl+Y (refazer). No Mac, use Cmd no lugar de Ctrl. Na barra de ferramentas, as setas do teclado passam de um botão para o outro.

O que é um editor WYSIWYG

WYSIWYG é a sigla de What You See Is What You Get — “o que você vê é o que você obtém”. É o tipo de editor em que você formata o texto olhando para o resultado, como num processador de texto, e não escrevendo as tags à mão. O programa cuida de traduzir cada ação em HTML: o botão de negrito vira <strong>, uma lista com marcadores vira <ul> com um <li> por item, e assim por diante.

O oposto é o editor de código, em que você digita <h2>Título</h2> e só vê o resultado depois de abrir a página. Esta ferramenta mostra os dois lados ao mesmo tempo, o que também ajuda quem está aprendendo HTML a entender que tag corresponde a quê.

Para que serve

• Campos de CMS e blogs que só aceitam HTML: WordPress no modo código, descrições em sistemas próprios, páginas de ajuda.
• Descrição de produto em lojas virtuais e marketplaces que permitem HTML básico (títulos, listas, negrito).
• E-mails e newsletters: montar o corpo do texto com a estrutura certa antes de levá-lo ao modelo.
• Converter Word ou Google Docs para HTML sem carregar junto a formatação do documento.
• Assinaturas, avisos e textos de rodapé que precisam de um link ou de um negrito e nada mais.

HTML semântico × estilos inline

Quando você copia um texto do Word e cola num campo HTML, o que vem junto costuma ser assim:

<p class="MsoNormal" style="margin-bottom:0cm;line-height:normal">
  <span style="font-size:12.0pt;font-family:'Calibri',sans-serif;color:black">
    <b>Promoção</b> válida até sexta.
  </span>
</p>

O editor entrega isto:

<p><strong>Promoção</strong> válida até sexta.</p>

A diferença não é só de tamanho. No primeiro caso, fonte, cor e espaçamento estão presos ao texto em atributos style (os chamados estilos inline) e brigam com o CSS do site onde o conteúdo for colado: o parágrafo aparece com outra fonte, outro tamanho, outra cor. No segundo, o HTML diz apenas o que cada trecho é — um parágrafo, um trecho com ênfase forte — e a aparência fica por conta da folha de estilos da página. Isso é HTML semântico.

O que a limpeza faz:

As tags mantidas são: h1 a h6, p, br, strong, em, u, s, a (com href), ul, ol, li, blockquote, code, pre, hr, tabelas (table, thead, tbody, tr, th, td, com colspan e rowspan) e img (com src e alt).

A única exceção aos estilos inline é o alinhamento: se você centralizar ou justificar um parágrafo pela barra, ele sai como style="text-align:center", porque o HTML atual não tem outra forma de registrar isso sem uma folha de estilos. Alinhamento que vem de texto colado é descartado.

E nos e-mails?

Em e-mail o costume é o contrário: como vários programas de e-mail ignoram ou limitam folhas de estilo, os modelos são feitos com estilos inline. O caminho prático é usar este editor para obter a estrutura limpa do texto e deixar que a ferramenta de envio (ou um “inliner” de CSS) aplique os estilos do modelo depois.

Segurança ao colar

Todo conteúdo que entra no editor — colado, arrastado, digitado na caixa de código ou recuperado do rascunho — passa por um filtro de lista branca: só as tags e atributos listados acima sobrevivem. Atributos de evento (onclick, onerror…) são descartados e links só podem usar http:, https:, mailto:, tel: ou caminhos relativos; endereços javascript: e data: são barrados. Assim, um trecho copiado de uma página maliciosa não executa nada aqui e não vai escondido para o seu site.

Isso não dispensa o seu sistema de filtrar o HTML que recebe: quem publica conteúdo de terceiros precisa sanitizar no servidor também.

Limites

• Sem imagens enviadas: o editor não hospeda arquivos. Imagens coladas só são mantidas quando apontam para um endereço http(s); imagens embutidas (data:) e arquivos locais do Word são descartados.
• Listas do Word: o Word costuma copiar listas como parágrafos com um marcador desenhado, não como <ul>. Nesses casos elas chegam como parágrafos; selecione-as e clique no botão de lista.
• Sem cores, fontes e tamanhos: é de propósito. Para isso, use CSS no seu site.
• Tabelas: são preservadas ao colar e podem ser editadas, mas a barra não cria tabelas — use o Gerador de Tabela HTML e cole o código.
• Tamanho: até 500 mil caracteres por colagem ou por código aplicado.
• Desfazer: aplicar o código ao editor, carregar o exemplo e limpar tudo zeram o histórico do Ctrl+Z.
• A edição usa o recurso contenteditable e os comandos de edição do próprio navegador (document.execCommand, marcado como obsoleto no padrão, mas ainda disponível nos navegadores atuais em 2026). Pequenas diferenças de comportamento entre Chrome, Firefox e Safari são esperadas; o código gerado passa pela mesma limpeza em todos.

Perguntas frequentes

Como converter um documento do Word para HTML?

Abra o documento, selecione o texto, copie e cole no editor acima. A estrutura (títulos, negrito, itálico, links, tabelas) é mantida e a formatação do Word (fontes, margens, classes Mso…) é descartada. Depois, clique em “Copiar HTML”.

O que significa “colar como texto puro”?

Com a opção marcada, toda formatação da origem é ignorada: entra só o texto, dividido em parágrafos nas linhas em branco. É útil quando o texto vem de um PDF ou de uma página cheia de formatação que você não quer aproveitar.

Por que meu código não tem cores nem fontes?

Porque o objetivo é gerar HTML semântico, que herda o visual do site onde for colado. Cores e fontes em atributos style são justamente o que faz um texto colado “desconfigurar” a página.

Posso editar o código HTML e ver o resultado?

Sim. Altere o código na caixa “Código HTML gerado” e clique em “Aplicar ao editor”. O código passa pelo mesmo filtro de segurança antes de ser exibido, então tags fora da lista permitida não aparecem.

Meu texto fica salvo?

Um rascunho é gravado automaticamente no armazenamento local do navegador, neste aparelho, e reaparece quando você volta à página. Ele não vai para a internet. Em navegação privada o rascunho pode não ser guardado. Para apagar, use “Limpar tudo”.

Qual a diferença entre <b> e <strong>?

Os dois aparecem em negrito, mas <strong> indica que o trecho é importante, enquanto <b> só chama atenção visualmente, sem peso extra de significado. O mesmo vale para <em> (ênfase) e <i>. O editor usa <strong> e <em>, que é o que a maioria dos CMS espera.

Veja também

• Formatador e Minificador de HTML
• Gerador de Tabela HTML
• Conversor de Markdown para HTML
• HTML Encode e Decode
• Contador de Palavras
• Bloco de Notas Online