Copiar o HTML de uma página parece simples, mas muita gente fica confusa quando o código copiado não corresponde ao que está vendo na tela.
Isso acontece porque existem duas versões do HTML de qualquer página, e os dois métodos principais de cópia acessam versões diferentes. Entender essa distinção antes de escolher o método evita retrabalho e frustração.
A diferença que muda tudo: código-fonte vs DOM vivo
Código-fonte é o HTML que o servidor enviou ao navegador. É estático, é o que foi escrito pelo desenvolvedor, e é o que o Ctrl+U mostra. Em sites construídos com HTML puro ou com WordPress sem renderização do lado do cliente, o código-fonte é o que você precisa.
DOM vivo é o HTML que o navegador montou depois de processar o código-fonte, executar os scripts e renderizar os componentes. Em sites com React, Vue, Angular ou qualquer carregamento via JavaScript, o conteúdo que você vê na tela não existe no código-fonte. Ele foi gerado depois. Para copiar isso, só o DevTools resolve.
Antes de escolher o método, pense: o conteúdo que quero copiar já está no código-fonte, ou apareceu depois que a página carregou?
Método 1: Ctrl+U para copiar o código-fonte completo
O atalho Ctrl+U abre uma nova aba com o HTML exato que o servidor enviou. É o método mais rápido para sites estáticos.
Como usar:
- Abra a página no navegador
- Pressione Ctrl+U (Windows/Linux) ou Cmd+Option+U (Mac)
- Uma nova aba abre com o código-fonte completo
- Pressione Ctrl+A para selecionar tudo e Ctrl+C para copiar
Se quiser copiar apenas parte do código, use Ctrl+F para buscar um elemento específico e selecione manualmente.
Quando usar: para sites com HTML estático, landing pages simples, sites construídos sem frameworks JavaScript modernos.
Quando não usar: para sites que carregam conteúdo via JavaScript. O Ctrl+U vai mostrar o esqueleto da página com scripts, não o conteúdo final renderizado.
Método 2: DevTools para copiar o DOM vivo
O DevTools do Chrome (e de todos os navegadores modernos) mostra o HTML processado depois da execução dos scripts. É o método certo quando você precisa do conteúdo exatamente como aparece na tela.
Como abrir o DevTools:
- F12 em qualquer sistema operacional
- Ctrl+Shift+I (Windows/Linux) ou Cmd+Option+I (Mac)
- Botão direito em qualquer área da página > Inspecionar
Como copiar um elemento específico:
- Abra o DevTools
- Clique no ícone de seta no canto superior esquerdo do DevTools (ou Ctrl+Shift+C)
- Clique no elemento que quer copiar na página
- O elemento fica destacado na aba Elements
- Clique com botão direito sobre ele > Copy > Copy outerHTML
Como copiar o HTML completo da página pelo DevTools:
- Abra o DevTools e vá para a aba Elements
- Localize a tag
<html>no topo da árvore (geralmente a primeira linha) - Clique com botão direito sobre ela > Copy > Copy outerHTML
- Isso copia o DOM completo, incluindo tudo que foi gerado por JavaScript
Para saber mais sobre os comandos para visualizar o HTML direto pela barra de endereços, veja como funciona o comando para ver código HTML.
Atalhos por navegador
| Ação | Chrome | Firefox | Edge | Safari (Mac) |
|---|---|---|---|---|
| Ver código-fonte | Ctrl+U | Ctrl+U | Ctrl+U | Cmd+Option+U |
| Abrir DevTools | F12 | F12 | F12 | Cmd+Option+I |
| Inspecionar elemento | Ctrl+Shift+C | Ctrl+Shift+C | Ctrl+Shift+C | Cmd+Option+I |
| Buscar no código-fonte | Ctrl+F | Ctrl+F | Ctrl+F | Cmd+F |
O que fazer com o HTML copiado
O HTML copiado de uma página real raramente está formatado de forma legível. Algumas ferramentas ajudam a organizar e validar.
Formatadores: o HTML Formatter recebe o código colado e devolve com indentação correta. Facilita muito a leitura.
Validador W3C: o validador oficial do W3C verifica se o HTML copiado segue os padrões da web. Útil para estudar a qualidade do código.
Playgrounds: CodePen e JSFiddle permitem colar HTML, CSS e JavaScript e ver o resultado renderizado. São excelentes para testar partes do código copiado.
Sobre direitos autorais ao copiar HTML
Copiar o HTML de uma página para fins de estudo, aprendizado ou inspeção técnica é uma prática comum e aceita. O que não é permitido é reproduzir o conteúdo, design ou estrutura de um site como se fosse seu.
A documentação técnica do Chrome DevTools explica como inspecionar qualquer elemento de uma página, o que é uma prática de desenvolvimento normal. O problema não está em ver o código, mas no que você faz com ele.
Perguntas frequentes
Por que o código que copiei está diferente do que vejo na tela?
Porque o site usa JavaScript para gerar conteúdo depois que a página carrega. O Ctrl+U mostra o HTML enviado pelo servidor, mas não inclui o conteúdo criado pelos scripts. Para capturar o conteúdo como ele aparece na tela, use o DevTools e copie o outerHTML da tag html.
Qual a diferença entre Ctrl+U e inspecionar elemento?
O Ctrl+U abre o código-fonte original, enviado pelo servidor. O inspetor de elementos (DevTools) mostra o DOM processado, que inclui alterações feitas por JavaScript após o carregamento. Para sites estáticos os dois são iguais. Para sites com frameworks modernos, o DevTools é o único que mostra o HTML real.
Como copiar só um elemento específico da página?
Abra o DevTools com F12, clique na seta de inspeção (Ctrl+Shift+C), clique no elemento desejado na página, clique com botão direito no elemento destacado na aba Elements e escolha Copy > Copy outerHTML.
O CSS é incluído quando copio o HTML?
Não. Ao copiar o HTML, você copia apenas a estrutura e o conteúdo. Os estilos geralmente estão em arquivos CSS externos. Para que o código funcione visualmente, é necessário também copiar ou referenciar os arquivos CSS usados na página.
Como copiar o HTML de uma página que bloqueia o botão direito?
Mesmo em páginas com bloqueio de botão direito via JavaScript, o DevTools funciona porque opera em nível de navegador, não de página. Abra com F12 e use a aba Elements normalmente.
Como copiar o HTML pelo celular?
No celular, acesse o código-fonte digitando view-source: antes da URL na barra de endereços do Chrome. Para ver o DOM completo com DevTools em dispositivos móveis, é necessário usar a depuração remota conectando o celular ao computador.
