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 tabela abaixo resume o atalho ou caminho principal em cada sistema operacional. Detalhamos os métodos completos nas próximas seções.
| Sistema | Atalho principal | Método completo |
|---|---|---|
| Windows | Ctrl+U | Abre o código-fonte em nova aba |
| Linux | Ctrl+U | Abre o código-fonte em nova aba |
| Mac | Cmd+Option+U | Abre o código-fonte no Safari, Chrome e Firefox |
| Android (Chrome) | Digitar view-source: antes da URL | Chrome removeu a opção do menu em 2020 |
| iPhone (Safari) | Extensão Web Inspector ou app View Source | Safari não tem opção nativa |
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.
Como copiar HTML pelo celular (Android e iPhone)
O celular exige um método diferente do computador porque não tem o atalho Ctrl+U ativo nem menu de contexto do desktop. No Android, digite view-source: antes da URL na barra de endereços do Chrome. No iPhone, instale uma extensão como Web Inspector ou um app dedicado como View Source. Cobrimos os detalhes em profundidade no artigo dedicado sobre como ver o código-fonte de um site pelo celular, mas o resumo prático é o seguinte.
No Android (Chrome, Samsung Internet, Edge, Brave):
- Toque na barra de endereços
- Digite
view-source:seguido da URL completa, exemploview-source:https://meusiteweb.com - A tela abre com o HTML formatado
- Segure o dedo sobre uma palavra e arraste as alças de seleção para copiar
No Firefox Android, o processo é ainda mais simples: toque no menu de 3 pontos > Página > Ver código-fonte. É o navegador Android mais direto para essa tarefa.
No iPhone (Safari), o caminho recomendado é instalar o app gratuito View Source da App Store. Depois de instalado, abra o site no Safari, toque no ícone de compartilhamento e escolha “View Source”. O código aparece formatado em segundos.
Para inspecionar elementos como no DevTools do desktop, o Kiwi Browser no Android é a única solução que traz o DevTools completo dentro do celular. No iPhone, é necessário conectar num Mac via cabo e usar o Safari desktop para debug remoto.
O Vídeo prático do canal Leo Maquiaveli | Tutoriais Digitais mostra processo completo de ver e copiar o código de qualquer site:
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.
Qual o atalho para copiar HTML no Mac?
No Mac, o atalho é Cmd+Option+U para abrir o código-fonte no Chrome, Firefox e Safari. Depois selecione tudo com Cmd+A e copie com Cmd+C. Se estiver no macbook usando teclado externo Windows, o Option é a tecla Alt e o Cmd é a tecla Windows. Para copiar apenas o DOM processado (conteúdo gerado por JavaScript), use Cmd+Option+I para abrir o DevTools do Safari ou Chrome no Mac.
Como copiar código HTML pelo celular?
No Android, digite view-source: antes da URL na barra de endereços do Chrome, Samsung Internet, Edge ou Brave. No Firefox Android existe opção nativa no menu. No iPhone, o Safari não tem função nativa, então é preciso instalar uma extensão como Web Inspector ou um app dedicado como View Source. Para inspecionar elementos como no computador, use o Kiwi Browser no Android ou debug remoto USB conectando o celular no computador.
Qual comando copia código HTML de uma página?
O comando depende do sistema operacional: Ctrl+U no Windows e Linux, Cmd+Option+U no Mac, e view-source: na barra de endereços no Android. Nenhum desses é atalho para copiar diretamente. Cada um abre uma nova aba com o código-fonte, e então você usa Ctrl+A (ou Cmd+A no Mac) para selecionar tudo e Ctrl+C (ou Cmd+C) para copiar. Para copiar o DOM processado incluindo alterações do JavaScript, o comando é F12 (abre o DevTools) e depois botão direito na tag html > Copy > Copy outerHTML.
