Elementos HTML para Código de Computador
Aprenda os elementos HTML code, kbd, samp, var e pre: o significado semântico de cada um, quando usá-los e o padrão de bloco de código multilinha.
O HTML oferece uma pequena família de elementos para marcar texto proveniente de um computador: código-fonte, coisas que você digita, saída de programas e variáveis. Todos são exibidos em fonte monoespaçada por padrão, mas não são intercambiáveis — cada um carrega um significado diferente. Escolher o elemento correto informa aos navegadores, mecanismos de busca e, especialmente, aos leitores de tela que tipo de texto de computador está sendo exibido.
Esta página explica quando e como usar cada elemento:
<code>— um fragmento de código de computador<kbd>— texto que o usuário digita no teclado<samp>— saída de amostra de um programa<var>— uma variável ou marcador de posição<pre>— texto pré-formatado que preserva espaços em branco e quebras de linha- O padrão canônico
<pre><code>para blocos de código multilinha
Por que a semântica importa
Como essas tags têm aparência quase idêntica na tela, é tentador usar qualquer uma que você se lembrar. Resista a isso. O estilo visual é apenas um padrão — você pode alterá-lo com CSS a qualquer momento. O que você não pode mudar tão facilmente é o significado.
Um leitor de tela pode anunciar o conteúdo de <kbd> e <samp> de formas diferentes, os mecanismos de busca usam a marcação para entender uma página, e outros desenvolvedores que leem seu HTML dependem dessas tags para saber se Ctrl + C é uma combinação de teclas (<kbd>) ou uma string impressa pelo programa (<samp>). Use o elemento que corresponde ao significado e estilize-o como preferir.
A tag HTML <code>
A tag HTML <code> marca um fragmento inline de código de computador — um nome de função, uma tag, uma propriedade CSS, um comando de shell, entre outros. Ela não significa "variável"; para variáveis, use <var>. Os navegadores exibem o conteúdo de <code> em fonte monoespaçada.
Por si só, <code> é para trechos curtos e inline. Para blocos multilinha, envolva-o em <pre> (veja abaixo).
Exemplo da tag HTML <code>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The <code>console.log()</code> function prints a message.</p>
<p>Set the value with the <code>color</code> CSS property.</p>
</body>
</html>A tag HTML <var>
A tag <var> define uma variável em uma expressão matemática ou em um contexto de programação — por exemplo, x e y em uma equação, ou o nome de um parâmetro em prosa. É o elemento correto para variáveis (um ponto de confusão comum com <code>). Os navegadores geralmente a renderizam em itálico.
Exemplo da tag HTML <var>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p><var>x</var> = <var>y</var> + 5</p>
</body>
</html>A tag HTML <kbd>
A tag <kbd> marca entrada de teclado — texto ou teclas que o usuário deve digitar ou pressionar. Use-a para atalhos (Ctrl + V), comandos que o leitor deve inserir e teclas individuais. É renderizada em fonte monoespaçada por padrão.
Exemplo da tag HTML <kbd>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>The kbd example</h2>
<p>You can paste the document by pressing <kbd>Ctrl + V</kbd>.</p>
</body>
</html>A tag HTML <samp>
A tag <samp> marca a saída de amostra de um programa ou script de computador — o texto que o programa imprime de volta, em oposição ao código em si (<code>) ou ao que você digita (<kbd>). É exibida em fonte monoespaçada por padrão.
Uma forma útil de lembrar a diferença: <kbd> é o que entra, <samp> é o que sai.
Exemplo da tag HTML <samp>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Type <kbd>ls</kbd> and the shell prints <samp>file1.txt file2.txt</samp>.</p>
</body>
</html>A tag HTML <pre>
A tag <pre> define texto pré-formatado. Ao contrário do HTML normal, o navegador mantém cada espaço, tabulação e quebra de linha exatamente como escritos no código-fonte, e renderiza o conteúdo em fonte monoespaçada. Isso torna <pre> ideal para arte ASCII, tabelas de largura fixa e — mais frequentemente — blocos de código onde a indentação e as quebras de linha devem ser preservadas.
Por si só, <pre> não carrega o significado de "isto é código"; ela controla apenas a formatação. Para expressar que o texto pré-formatado é código, combine-a com <code>.
Exemplo da tag HTML <pre>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre>
This text
keeps its spacing
and line breaks.
</pre>
</body>
</html>Blocos de código multilinha com <pre> e <code>
Para um bloco de código-fonte que abrange várias linhas, o padrão canônico e recomendado é aninhar <code> dentro de <pre>. O <pre> preserva os espaços em branco e as quebras de linha; o <code> adiciona o significado semântico de que o conteúdo é código. Juntos, eles formam a maneira padrão de exibir um bloco de código em HTML.
Exemplo de <pre> com <code>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre><code>function greet(name) {
return "Hello, " + name;
}
greet("World");</code></pre>
</body>
</html>Observe que o conteúdo de <code> começa imediatamente após a tag de abertura e termina imediatamente antes da tag de fechamento. Quaisquer espaços ou quebras de linha deixados entre <pre> e <code> também seriam renderizados, pois <pre> preserva todos os espaços em branco.
Escolhendo o elemento correto
| Elemento | Significado | Uso típico |
|---|---|---|
<code> | Um fragmento de código | Um nome de função, tag ou comando inline |
<kbd> | Entrada de teclado | Atalhos e texto que o usuário digita |
<samp> | Saída de amostra de programa | Texto que um programa imprime de volta |
<var> | Uma variável | x em uma equação, um nome de parâmetro |
<pre> | Texto pré-formatado | Blocos multilinha; preserva espaços em branco |