Tags de código

Como marcar trechos de código, teclado e saída de programa em HTML.

Mostrando código dentro da página

Quando você quer exibir comandos, atalhos ou saída de programa, existem algumas tags que ajudam a dar significado a esse conteúdo.

Tag <code>

Usada para marcar um trecho de código.

<p>Use a tag <code>&lt;h1&gt;</code> para criar títulos.</p>

Tag <pre>

Mantém espaços e quebras de linha.

<pre>
linha 1
linha 2
linha 3
</pre>

Usando juntas

<pre><code>
const nome = "João";
console.log(nome);
</code></pre>

Outras tags úteis

  • <kbd> para entrada do teclado;
  • <samp> para saída de programa;
  • <var> para variável.

Exemplo:

<p>Pressione <kbd>Ctrl</kbd> + <kbd>S</kbd> para salvar.</p>
<p>Saída: <samp>Arquivo salvo com sucesso</samp></p>