Tag HTML <code>
A tag <code> é usada para inserir linhas de código de programa. Descrição da tag, atributos e exemplos de uso.
A tag <code> é usada para marcar um fragmento de código de computador — o nome de uma variável, uma chamada de função, um trecho de código-fonte de programa ou qualquer texto que o usuário deva digitar ou ler como código. No navegador, o conteúdo é exibido em uma fonte monoespaçada (uma fonte em que todos os caracteres têm a mesma largura). A tag <code> é um elemento inline por padrão.
A tag <code> é semântica: ela informa aos navegadores, tecnologias assistivas e mecanismos de busca que o texto incluído é código, não prosa. Esse significado é o motivo para utilizá-la — o estilo monoespaçado é apenas a apresentação padrão, que pode ser substituída com CSS.
Esta página explica como <code> se comporta sozinha, por que código de várias linhas precisa ser envolvido em <pre>, a armadilha de escaping de HTML que você encontrará ao tentar exibir colchetes angulares, a convenção de realçadores de sintaxe e quando não usar <code>.
Sintaxe
A tag <code> vem em pares. O conteúdo é escrito entre as tags de abertura (<code>) e fechamento (</code>).
Exemplo da tag HTML <code>:
Tag HTML <code>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Ordinary text.</p>
<code>Line of program code.</code>
<p>Continuation of the ordinary text.</p>
</body>
</html>Execute o exemplo acima com o editor Experimente: o texto <code> fica na mesma linha que os parágrafos ao redor, renderizado em uma fonte monoespaçada, exatamente como qualquer outro elemento inline.
Por que <code> sozinha recolhe espaços em branco
Como a maioria dos elementos HTML, <code> segue as regras normais de espaço em branco: sequências de espaços, tabulações e quebras de linha são recolhidas em um único espaço. Isso funciona bem para um único token (<code>let x = 10;</code>), mas falha no momento em que você cola um trecho de várias linhas:
<code>
function greet(name) {
return "Hello, " + name;
}
</code>No navegador, isso é renderizado como uma única linha longa — function greet(name) { return "Hello, " + name; } — porque cada quebra de linha e o recuo são comprimidos em espaços simples.
Para preservar quebras de linha e recuo, envolva o <code> em um elemento <pre> ("preformatado"). <pre> mantém os espaços em branco exatamente como escritos, e o <code> dentro dele mantém o significado semântico. <pre><code>…</code></pre> é o par padrão para qualquer bloco de código com mais de uma linha.
Exemplo da tag HTML <code> colocada dentro de uma tag HTML <pre>:
Exemplo da tag HTML <code> dentro de uma tag HTML <pre>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre>
<code>
body {
color: yellow;
font-size: 16px;
line-height: 1.5;
}
</code>
</pre>
</body>
</html>Escapando <, > e & dentro de <code>
Uma tarefa muito comum é exibir HTML em si dentro de um bloco <code> — mas o navegador não sabe que o seu <div> deve ser exibido em vez de executado. Se você escrever um literal < ou >, o navegador tenta analisá-lo como uma tag e o seu exemplo desaparece silenciosamente. O mesmo vale para &, que inicia uma referência de caractere.
Você deve substituir esses caracteres pelas suas entidades HTML:
| Caractere | Entidade | Significado |
|---|---|---|
< | < | menor que |
> | > | maior que |
& | & | e comercial |
Portanto, para exibir o texto <a href="#"> você escreve:
<code><a href="#"></code>E para mostrar if (a && b):
<code>if (a && b)</code>Esquecer de escapar & é o erro mais sutil: © será renderizado como o símbolo © em vez do texto literal. Na dúvida, escape todo <, > e &.
Exemplo da tag HTML <code> com propriedades CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.code-style {
font-size: 20px;
line-height: 28px;
background-color: lightblue;
color: darkslategray;
}
</style>
</head>
<body>
<p>Ordinary text.</p>
<code class="code-style">Line of program code.</code>
<p>Continuation of the ordinary text.</p>
</body>
</html>A classe language-* para realçadores de sintaxe
O <code> simples não tem noção de qual linguagem de programação contém, portanto não consegue colorir palavras-chave, strings e comentários por si só. Bibliotecas de realce de sintaxe como Prism e highlight.js resolvem isso com uma convenção de nome de classe: você adiciona uma classe language-<name> ao elemento <code> (geralmente dentro de um <pre>), e a biblioteca percorre a página, lê a classe e aplica as cores corretas.
<pre><code class="language-js">
const greet = (name) => `Hello, ${name}`;
</code></pre>Aqui language-js diz ao realçador para tratar o conteúdo como JavaScript. Outros valores comuns são language-css, language-html e language-python. A classe é puramente informacional para o realçador — o elemento <code> ainda carrega seu significado semântico mesmo que nenhum realçador esteja carregado. (Observe o => no trecho acima: mesmo dentro de um bloco realçado, você ainda escapa > para que a função de seta seja exibida corretamente.)
Quando não usar <code>
<code> é para conteúdo que é genuinamente código. Não a use apenas porque deseja uma fonte monoespaçada:
- Entrada de teclado que o usuário deve pressionar → use
<kbd>, por exemplo<kbd>Ctrl</kbd> + <kbd>C</kbd>. - Saída de programa / resultados de amostra → use
<samp>. - Uma variável ou espaço reservado em matemática ou texto → use
<var>. - Texto monoespaçado puramente decorativo sem significado de código → use um
<span>e estilize-o com CSS. Usar<code>aqui é enganoso para leitores de tela e mecanismos de busca.
Escolher o elemento certo mantém a marcação honesta: a tag descreve o que o texto é, enquanto o CSS decide como ele parece.
Tags relacionadas
<pre>— preserva espaços em branco; envolva<code>nela para blocos de várias linhas.<kbd>— entrada de teclado digitada pelo usuário.<samp>— saída de amostra de um programa.<var>— um nome de variável ou espaço reservado.
Atributos
A tag <code> suporta os Atributos Globais e os Atributos de Evento.
Por exemplo, você pode usar o atributo title para adicionar uma dica de ferramenta: <code title="Variable declaration">let x = 10;</code>.