Editor HTML em tempo real

Das três abas ao documento do navegador

O realce de sintaxe, a numeração de linhas, a correspondência entre delimitadores, o recolhimento de blocos e o preenchimento automático ajudam a navegar pelo arquivo, mas não demonstram que o código funciona. Copiar arquivo ativo leva apenas a aba escolhida; copiar HTML completo compõe o documento. Importação local aceita arquivos até o limite de 2 MiB. Imagens vizinhas continuam precisando de endereços acessíveis: importar HTML não importa a pasta inteira.

HTML organiza a estrutura, CSS a apresentação e JavaScript o comportamento comum do navegador. Um trecho como <main><h1>Notas</h1></main> recebe uma estrutura de documento. Um HTML completo mantém cabeçalho e corpo; o CSS da aba entra no cabeçalho e JavaScript próximo ao fim do corpo. Estilos e scripts já presentes permanecem no arquivo importado. Copiar o mesmo código para outra aba pode duplicar o comportamento.

Editar, visualizar e testar são etapas diferentes. Escreva ou formate o código, observe sua aparência e depois exercite uma interação com evidências. Executar usa o rascunho atual. Com execução automática desligada, a visualização pode continuar mostrando um estado anterior durante a edição. O automatismo ajuda em experimentos de layout confiáveis; execução deliberada ajuda com um evento incompleto ou efeito colateral. Formatar atua na aba ativa e melhora leitura, não correção.

Escolha o modelo pelo padrão necessário. Blank HTML5 e Semantic Article ajudam com estrutura; Responsive Landing, CSS Grid Dashboard e Flexbox Pricing isolam layouts. Interactive Card e JavaScript Counter mostram eventos. CSS Animation inclui uma regra de movimento reduzido. Accessible Form conecta rótulos e retorno de status. São pontos de partida, não certificações de qualidade após alterações.

Separar largura responsiva e zoom da visualização

O modo ajustado acompanha o painel; os modos fixos usam 390, 768 e 1280 pixels CSS. São larguras de layout, não celulares simulados. O zoom muda o tamanho aparente no editor. Ajuda a inspecionar uma composição larga, mas diminuí-la visualmente não prova que cabe numa janela estreita. Comece em 100%, compare os modos e teste seus pontos de quebra com ferramentas do navegador.

Uma regra em 720 pixels pode mostrar três colunas em 768 e uma em 390 sem revelar um erro em 721. Teste títulos longos, estados vazios e mensagens de validação, não apenas o modelo organizado. Um elemento filho de largura fixa, uma URL sem quebras ou muito preenchimento podem transbordar apesar da grade responsiva. Remova uma restrição por vez e execute novamente.

Comparar largura responde a uma questão de disposição. Não testa toque, teclado virtual, densidade de pixels, desempenho ou outro motor. Confira o exportado com teclado, texto ampliado e aparelhos reais. Tela cheia oferece espaço; outra aba facilita observar o resultado. Nenhuma dessas ações publica a página.

Investigar falhas com Console e Verificações

Num documento completo, confira <!doctype html>, idioma, UTF-8, viewport responsivo e título significativo. Ajuste o idioma ao texto, não mantenha automaticamente o inglês do modelo. Também são indicados saltos de títulos, tipos de botão ausentes e eventos embutidos. Limpar console retira mensagens antigas sem mudar código; faça isso antes de uma ação específica.

Se um botão não responde, confirme permissão de scripts e execução do rascunho atual. Procure o primeiro erro após uma nova execução. Um querySelector retornando null costuma indicar seletor diferente do ID ou elemento ausente. Registre um pequeno valor perto da falha, não um objeto confidencial inteiro. O console limitado recebe mensagens comuns, erros e promessas rejeitadas; não substitui depurador com pontos de parada ou rastreamento completo.

As verificações examinam o documento combinado: dados documentais ausentes, IDs duplicados, imagens sem alt, campos sem rótulo, ações sem nome e links suspeitos. Um erro pede revisão do contexto; uma sugestão pode ser uma decisão de design. alt="" pode ser correto para decoração, mas imagem informativa exige descrição útil. Vários H1 não se tornam inválidos só porque se recomenda um título principal claro.

O guia W3C sobre rótulos de formulário explica a importância de um rótulo visível associado ao controle. Uma dica que desaparece durante a digitação não o substitui. Após corrigir, percorra o formulário com Tab e confira foco e mensagens. Essas verificações não comprovam contraste, ordem de leitura, uso com leitor de tela ou conformidade HTML completa. Complemente com validação e testes de acessibilidade baseados em tarefas.

Confira o peso das requisições antes de refinar o layout. Para recursos externos confiáveis, abra as ferramentas completas de rede do navegador antes de recarregar o exemplo. Compare uma carga sem arquivos em cache com outra repetida. Examine requisições que falharam, bytes transferidos, imagens e bibliotecas grandes e a origem das requisições dependentes. A referência de rede do Chrome distingue o tamanho transferido do tamanho maior do recurso descomprimido. Um HTML pequeno pode depender de vários megabytes de imagens ou scripts. Remova um recurso desnecessário ou reduza uma imagem grande demais e repita a mesma comparação. Uma prévia rápida graças ao cache não comprova bom desempenho numa conexão lenta.

Observe quando o conteúdo aparece e se muda de posição. A orientação sobre CSS que bloqueia a renderização explica por que uma folha necessária pode atrasar a primeira apresentação com estilos; o tamanho baixado não é o único custo. Use as ferramentas de desempenho do navegador para examinar o carregamento e execuções longas de JavaScript: Console e Verificações não substituem um perfilador. Se um título salta quando chega uma imagem, fonte ou conteúdo incorporado, siga a orientação sobre mudanças de layout. Reserve o espaço previsto com valores corretos de width/height ou aspect-ratio e teste novamente durante a carga. Registre dependências e condições ao encaminhar o exemplo. Esse caso reduzido não reproduz o cache e as respostas do servidor final nem o desempenho de todos os aparelhos.

Resolver recursos externos de forma consciente

Recursos aceita URLs HTTP ou HTTPS para folhas de estilo e scripts prontos para navegador, além de uma URL base. Informe um endereço por linha. Com https://example.org/demo/, images/logo.png aponta para esse diretório; /images/logo.png começa na raiz da origem. O padrão HTML explica a resolução. A base determina endereços, não uma pasta de upload, e não disponibiliza arquivos do computador na internet.

Se faltar uma fonte ou imagem importada, confira a URL antes de refazer o CSS. Pode depender de outro diretório, autenticação, bloqueio de rede ou restrição do servidor. Habilitar rede permite tentativas, não garante respostas. Scripts têm permissão separada: JavaScript externo também precisa ser autorizado a executar.

Um arquivo de CDN pronto para navegador pode servir a um exemplo focado. Nome de pacote npm, JSX, TypeScript, Sass ou PHP não se tornam executáveis aqui. Não há instalação de pacotes, compilação, banco de dados ou intermediário de API privada. Projetos com frameworks e autenticação precisam de ambiente adequado e testes com as políticas reais do site final.

O que a fronteira da visualização protege?

As regras WHATWG do sandbox descrevem uma origem isolada para o iframe sem permissão de mesma origem. A visualização não concede essa permissão. Scripts e rede começam desligados e são separados; importar também desliga execução automática. Para layout estático, ambos podem ficar desligados. Um contador confiável pode precisar de scripts sem requisições externas.

Isolamento limita acesso, não avalia confiança. Um laço pode consumir recursos, um script desenhar uma tela falsa de login e recursos liberados enviar pedidos aos seus servidores. Não digite credenciais na visualização. Os limites de console reduzem rajadas comuns, mas não garantem que código hostil nunca trave a aba.

A aba separada mantém iframe e permissões escolhidas. HTML completo baixado é diferente: contém código e recursos sem as restrições de execução do editor. Abrir diretamente pode executar scripts. Revise antes de abrir ou enviar, sobretudo material de origem desconhecida.

Preservar o arquivo certo para continuar

Projeto JSON mantém título, abas, URL base e listas de recursos. HTML completo é o documento combinado, não um pacote offline de todas as imagens e bibliotecas remotas. Reimportá-lo coloca tudo na aba HTML, sem reconstruir a divisão original. Guarde JSON para edição futura e HTML para quem precisa abrir o resultado.

Para depurar, prefira HTML não minificado. A versão minificada remove comentários e compacta código compatível; compare o resultado e mantenha o original. Rascunhos são locais ao perfil, não backup na nuvem ou histórico de versões. Armazenamento pode ser negado ou apagado. Diante de rascunho danificado, preserve o necessário antes de reiniciar; salvar ou redefinir deliberadamente pode substituí-lo.

Compartilhar inclui projeto comprimido no fragmento da URL, com código e recursos. Não é segredo com controle de acesso nem página hospedada em produção. Destinatários podem inspecionar e encaminhar o link. Projetos grandes podem ultrapassar a limitação; baixe JSON. A importação recebe HTML/HTM e JSON compatível dentro do limite, não pastas inteiras de arquivos.

Por que a estrutura documental continua importante

O relato do CERN sobre o nascimento da Web remete ao trabalho de Tim Berners-Lee em 1989 para compartilhar informação conectada. A ideia documental continua útil: títulos expressam relações, links têm destinos relevantes e formulários um propósito. Caixas bonitas podem compor um documento difícil de entender.

Em um exemplo de documentação, decida o que o leitor precisa descobrir antes do layout. Prefira botão nativo para ação e link para navegação. Explique colunas de tabela em vez de depender apenas da cor. Essas escolhas tornam o exemplo claro e mais fácil de levar para outro ambiente.

Uma entrega útil registra código, última largura testada, navegador, permissões e resultado esperado. Distingue um contador que respondeu aqui de um aplicativo pronto para hospedagem. O experimento rápido mantém seu valor sem prometer comportamento de servidor, segurança de produção ou todas as combinações de aparelhos.