Como converter Word para HTML limpo

A resposta curta

HTML limpo quer dizer que as tags descrevem o que o conteúdo é (um título, um parágrafo, uma lista, uma tabela, um link) e nada sobre a aparência que ele tinha no Word. Sem nomes de fonte, sem tamanhos em pontos, sem cores, sem classes como MsoNormal, sem spans vazios. Esse tipo de HTML se adapta à folha de estilos do seu site e continua fácil de editar depois.

O Word não consegue gerar isso sozinho, porque a exportação dele tenta reproduzir a página exatamente como está. Um conversor baseado na estrutura lê o documento ao contrário: vê qual estilo cada parágrafo usa e associa esse estilo a uma tag. Solte um .docx no conversor abaixo, deixe Converter para em HTML, confira a pré-visualização ao lado do código e aperte Copiar ou Baixar.

Por que o HTML do próprio Word é tão bagunçado

O Word oferece Página da Web e Página da Web Filtrada no Salvar como. As duas tentam fazer o HTML parecer a página impressa, então escrevem cada detalhe visual no código. Um único parágrafo curto pode virar várias linhas de marcação, com uma classe, um atributo style com a família da fonte, o tamanho e o espaçamento, e spans aninhados a cada mudança de formatação.

Copiar do Word e colar num sistema de gerenciamento de conteúdo faz algo parecido pela área de transferência: o editor recebe o HTML do Word e mantém parte ou todos esses estilos. O resultado é um texto que não combina com o resto do site, fontes que mudam de um parágrafo para outro e páginas difíceis de editar, porque a formatação invisível sempre volta.

O que é mantido e o que é descartado

O conversor mantém tudo o que tem significado e deixa de fora tudo o que só controla a aparência:

• Mantido: títulos dos estilos Título 1 a Título 6 do Word, o estilo Título (como h1) e Subtítulo (como h2), parágrafos, negrito e itálico (como strong e em), listas com marcadores e numeradas com seus níveis, tabelas, links, notas de rodapé, citações com o estilo Citação e imagens.
• Descartado: fontes, tamanhos de fonte, cores, realce, alinhamento, espaçamento entre linhas, margens da página, cabeçalhos e rodapés da página e os comentários do Word.
• Imagens: com Incluir imagens marcado, elas são embutidas no HTML como data URIs, e o código funciona sozinho. Desmarque para ter um código mais leve quando você for enviar as imagens ao CMS separadamente.
• Página HTML completa: marque para receber um arquivo completo, com doctype, conjunto de caracteres e título, que abre sozinho no navegador. Deixe desmarcado quando for colar o conteúdo numa página que já existe.

Prepare o documento para o resultado mais limpo

O resultado só pode ser tão estruturado quanto o documento. A surpresa mais comum é um título que sai como parágrafo normal em negrito. Isso acontece quando alguém deixou o texto grande e em negrito na mão, em vez de usar um estilo de título; o Word mostra como título, mas o arquivo diz que é um parágrafo normal.

• Use os estilos prontos do Word: selecione a linha e escolha Título 1, Título 2 e assim por diante na galeria de Estilos da guia Página Inicial.
• Use listas de verdade. Linhas que começam com um traço ou número digitado viram parágrafos, não itens de lista; use os botões Marcadores e Numeração.
• Evite parágrafos vazios para dar espaço. Cada Enter numa linha vazia vira um parágrafo vazio.
• Mantenha as tabelas simples: uma linha de cabeçalho, sem células mescladas se der para evitar e sem tabelas usadas só para diagramação.
• Estilos personalizados sem equivalente em HTML são convertidos como parágrafos normais, e o conversor avisa com uma nota curta abaixo do resultado.

Colar o HTML no WordPress, Shopify, Nuvemshop e outros editores

A maioria dos editores tem uma visualização de código ou HTML. Mude para ela antes de colar; se você colar HTML na visualização normal, o editor mostra as tags como texto. No editor de blocos do WordPress, adicione um bloco HTML personalizado, ou abra o menu do bloco e escolha Editar como HTML. No editor clássico e nos editores de descrição de lojas como Shopify e Nuvemshop, use o botão Texto, Código ou Mostrar HTML.

Como o código não tem estilos embutidos, o texto passa a usar na hora as fontes, tamanhos e cores do seu tema. Se um nível de título parecer grande demais para o seu design, troque a tag (de h2 para h3, por exemplo) em vez de acrescentar um estilo, para que a estrutura da página continue correta para buscadores e leitores de tela.

Para modelos de e-mail, HTML limpo é um bom ponto de partida, mas muitos programas de e-mail precisam de estilos embutidos para ficar consistentes. Acrescente esses estilos na sua ferramenta de e-mail, não no Word.

Problemas comuns

• O arquivo é .doc, não .docx: o conversor lê só .docx. Abra o arquivo no Word ou no LibreOffice, salve como .docx e tente de novo.
• Os títulos sumiram: eles foram formatados na mão. Aplique os estilos de título no Word e converta outra vez.
• O HTML ficou enorme: as imagens embutidas ocupam a maior parte, e data URIs são cerca de um terço maiores que o arquivo da imagem. Desmarque Incluir imagens e envie as imagens separadamente.
• Caixas de texto, formas e SmartArt sumiram ou ficaram fora de ordem: são objetos de desenho, não texto no fluxo do documento. Passe o texto importante para parágrafos normais antes de converter.
• Caracteres especiais e acentos aparecem errados depois de colar: salve ou sirva o HTML como UTF-8. A opção de página completa já traz a declaração UTF-8.

Privacidade e segurança

Contratos, propostas e documentos internos não deveriam ser enviados para conversores desconhecidos. Aqui o .docx é aberto e convertido no seu navegador, e o documento nunca sai do seu aparelho. Depois que a página foi aberta uma vez, ela também funciona sem internet.

O HTML gerado passa por uma lista de tags permitidas, então scripts, atributos de evento e links javascript: nunca chegam ao resultado, mesmo que o documento os tivesse.