Código de computador HTML

Tutoriais e documentação mostram frequentemente comandos, nomes de propriedades e trechos HTML. Se colar esse texto num parágrafo normal, o navegador pode colapsar espaços e tratar < como o início de uma etiqueta real. O HTML oferece elementos pensados para texto de computador, para que os exemplos fiquem legíveis e seguros. Sem eles, uma página de ensino pode “comer” a indentação de um snippet ou, pior, transformar um exemplo de <p> numa etiqueta viva que altera o layout da própria lição. Esta sessão ensina a marcar código, teclas e saída de programa com o papel certo — e a codificar ângulos quando o exemplo é HTML dentro de HTML. Pense nestes elementos como rótulos semânticos: dizem ao navegador e a leitores de ecrã que aquele trecho não é prosa comum, e dão-lhe tipografia monoespaçada por predefinição quando isso ajuda a leitura.

O que são elementos de código de computador?

Estes elementos marcam texto que representa código, entrada de teclado ou saída de programa — não prosa ordinária. Ajudam o navegador a escolher uma fonte predefinida adequada (muitas vezes monoespaçada para code e pre) e dizem às ferramentas de acessibilidade que o intervalo está relacionado com computador. Continua a escrever os caracteres você mesmo; as etiquetas acrescentam significado e, com pre, preservam o layout. Em termos práticos, code destaca um token curto dentro de uma frase, pre congela espaços e quebras de linha num bloco, kbd assinala teclas reais que o utilizador carrega, e samp mostra o que um programa ou comando devolveu. Não escolha o elemento só porque “parece código”: escolha-o pelo papel do texto. Assim a página fica mais clara para humanos, para CSS que possa estilizar esses elementos, e para tecnologias assistivas que anunciam o tipo de conteúdo.

Resposta direta

Use code para um trecho curto dentro de uma frase. Use pre quando espaços e quebras de linha têm de permanecer. Um padrão comum de bloco é <pre><code>...</code></pre>. Marque teclas com kbd e saída de exemplo de programa com samp quando esses papéis forem reais. Quando o próprio exemplo é HTML, escreva < e > em vez de < e > crus, para o navegador não construir elementos vivos por acidente. Se memorizar só uma regra desta sessão, memorize esta: mostrar markup não é o mesmo que executar markup — e a codificação de entidades é a fronteira entre os dois. O resto (inline vs bloco, teclado vs saída) segue a mesma lógica de honestidade semântica.

Elementos num relance

Código inline

Quando menciona um token curto dentro de uma frase, envolva-o em code. Isso mantém a palavra visualmente distinta sem forçar um bloco inteiro. Em tutoriais, nomes de propriedades CSS, atributos HTML, comandos curtos e identificadores de API aparecem no meio de frases explicativas; code é o sítio certo para esses pedaços. O leitor consegue varrer a frase e encontrar o termo técnico de imediato, e o estilo predefinido (muitas vezes monoespaçado) reforça que não é uma palavra do dicionário comum. Reserve blocos pre para listagens com várias linhas — não para uma única palavra no meio de um parágrafo.

Ler o exemplo

• A frase é texto normal de parágrafo
• Só o nome da propriedade fica dentro de code
• Os leitores conseguem localizar o token técnico depressa
• Isto não é uma listagem multilinha — para isso, use pre
  Este padrão escala bem: pode ter várias ocorrências de code na mesma frase sem quebrar o fluxo da leitura. O erro comum é envolver a frase inteira em code ou usar pre para um único termo — ambos exageram o papel do elemento e tornam a página visualmente ruidosa.

Blocos com pre e code

pre significa pré-formatado: espaços e quebras de linha mantêm-se aproximadamente como os escreveu. Aninhar code dentro de pre é um padrão claro para um bloco de código. Em exemplos HTML, codifique os parênteses angulares. Sem pre, o HTML normal colapsa sequências de espaços e trata muitas quebras de linha como um único espaço — o que destrói a indentação que queria mostrar aos alunos. Com pre, a estrutura do snippet permanece legível. Combinar pre+code comunica duas ideias de uma vez: “isto é um bloco pré-formatado” e “o conteúdo é código”. Muitos guias de estilo e realçadores de sintaxe esperam exatamente este aninhamento.

Por que a codificação importa

Se escrever um <p> cru dentro da página do tutorial, o navegador pode criar um parágrafo real em vez de mostrar os caracteres <p>. Codificar como <p> apresenta o exemplo com segurança. A sessão Entidades aprofunda as referências de caracteres; aqui só precisa do hábito para parênteses angulares em demos HTML. O mesmo se aplica a <div>, <span>, <a href="..."> e qualquer outra etiqueta que queira mostrar sem ativar. Se colar markup cru “só para ver”, o documento da lição muda de forma: aparecem elementos extra, o layout desloca-se, e o aluno pensa que o exemplo estava errado quando o problema era a falta de codificação. Treine o reflexo: em exemplos HTML, < e > primeiro; depois confirme no browser que o texto aparece como pretendia.

Entrada de teclado e saída de exemplo

Use kbd quando descreve teclas que o utilizador carrega. Use samp quando mostra saída de exemplo de um programa ou comando. Seja honesto — não marque palavras ordinárias como kbd só para obter um aspeto monoespaçado. kbd comunica “isto é input do teclado”; samp comunica “isto é o que o programa imprimiu ou devolveu”. Se estiver a falar de um nome de ficheiro ou de uma propriedade CSS, code continua a ser a escolha certa. Misturar estes papéis confunde leitores e tecnologias assistivas. Em guias de atalhos, várias kbd em sequência (por exemplo Ctrl + S) leem-se naturalmente; numa linha de resultado de terminal, samp deixa claro que o texto é saída, não uma instrução.

Pratique no seu editor

1. Escreva uma frase que mencione a propriedade font-size dentro de code.
2. Adicione um bloco pre+code com duas linhas HTML curtas usando < e >.
3. Adicione uma linha de dica com kbd para um atalho de guardar.
4. Opcional: adicione uma linha samp para saída falsa de comando.
5. Guarde e abra — confirme que os espaços dentro de pre permanecem e que as etiquetas codificadas aparecem como texto.
6. Temporariamente cole um <div> cru no bloco sem codificar, recarregue, veja o problema, depois codifique-o.
   Este laboratório curto cobre os três padrões principais da sessão: inline, bloco seguro, e teclado/saída. Se o passo 6 não o surpreender, ótimo — já internalizou o risco. Se o layout “partir”, use esse momento como prova viva de por que a codificação não é opcional em demos HTML.

Erros que estragam exemplos

• Colocar código multilinha só em code sem pre — quebras de linha e indentação podem colapsar
• Colar <div> ou <p> crus na página sem codificar — tornam-se elementos vivos
• Usar pre para artigos longos de prosa normal (é para texto de computador pré-formatado, não ensaios)
• Marcar cada palavra técnica com kbd quando não é entrada de teclado
• Esquecer de fechar pre ou code, fazendo com que o texto seguinte fique preso no estilo pré-formatado
  Estes erros são comuns precisamente porque o navegador tenta “ajudar”: interpreta etiquetas, normaliza espaços e aplica estilos até ao fecho em falha. A cura é semântica + codificação: papel correto do elemento, e entidades para ângulos em exemplos HTML. Depois de corrigir uma vez um snippet que se tornou elemento vivo, raramente volta a colar markup cru sem pensar.

Resumo

• code marca texto curto de computador inline
• pre mantém espaços e quebras de linha para blocos
• Combinar pre e code é um padrão multilinha comum
• Codifique < e > em exemplos HTML como < e >
• kbd e samp cobrem entrada de teclado e saída de exemplo quando esses papéis encaixam
• Escolha o elemento pelo significado do texto, não só pelo aspeto predefinido da fonte
  Com estes hábitos, as páginas de tutorial mostram comandos e snippets sem destruir o layout nem executar markup de exemplo por acidente. Na sessão seguinte da trilha, continue a tratar o HTML de demonstração como texto a apresentar — seguro, legível e semanticamente honesto.