Elementos de Código de Computador HTML

Neste artigo, examinamos o código de computador HTML. O HTML inclui uma variedade de elementos para representar o código do computador e a entrada do usuário.

Para exibir mensagens de código, o computador usa formatação e estilos de texto exclusivos. Em um site, a tag de código é usada para exibir o código do computador . O HTML permite que você marque o código do computador com vários elementos.

Aqui está um exemplo básico de tag de código HTML:

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><br><code><br>x = 4;<br>y = 7;<br>z = x + y;<br></code><br><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Índice-

HTML <kbd> para entrada de teclado

Um elemento HTML chamado <kbd> representa a entrada do teclado. Os navegadores da Web mostram o conteúdo dentro de fontes monoespaçadas em código de computador HTML .
O texto a seguir é explicado como entrada de teclado em um documento:

Example

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<p>
You can save the document by pressing <kbd>Ctrl + S</kbd></p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está outro exemplo do elemento <kbd> para que você possa ver a diferença claramente:

Example: 

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<h2>kbd Element</h2>
<p>The normal tag looks like this</p>
<kbd>Kbd element looks like this</kbd>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

<!–

Anúncio

–><!–

mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]

–>

<code> Para código de computador

Quando falamos sobre código de computador HTML, a tag HTML <code> representa um código de computador — o código HTML interno mostra o conteúdo na fonte monoespaçada do navegador.

Você pode digitar algum texto em um documento como código de computador da seguinte maneira:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
<code>
x = 35;
y = 56;
z = x + y;
</code>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Não há quebra de linha ou preservador de espaço em branco no elemento de código como se trata de código de computador HTML. Isso pode ser corrigido colocando a tag <code> dentro de um pré-elemento:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<body>
<pre>
<code>
x = 56;
y = 65;
z = x + y;
</code>
</pre>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Outro exemplo do elemento <pre> é definido abaixo:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
<h3>Example of pre tag</h3>
<pre>
The following is written content
Pre tag ignores all tags within it
Displays the content with spaces, breaks, and lines
As originally presented.
</pre>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

HTML <samp> para saída do programa

O elemento HTML <samp> representa uma amostra de saída. O código de computador HTML é utilizado para mostrar o conteúdo interno. Um exemplo de saída de computador em um documento é:

Example

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<p>This is a text message from my computer:</p>
<p><samp>Error found -- File not found.<br>To continue Kindly press F1 key to
continue</samp></p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está outro exemplo do elemento <samp> para que você possa ver a diferença claramente:

Example: 

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<h2>Samp Element</h2>
<p>The normal tag looks like this</p>
<samp>samp element looks like this</samp>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

HTML <var> Para Variáveis

É usado para caracterizar o tag de variável <var> em expressões matemáticas ou de programação. Itálico é geralmente utilizado para o conteúdo interno.

O seguinte texto pode ser descrito como variáveis ​​em um documento:

Example: 

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<div class="variables">
<p>There are several ways to calculate the area of a square: 1/1 x <var>w</var> x <var>h</var>, depending on whether <var>w</var>
is a width, and <var>h</var> is the height.</p>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo do elemento <var> com <sup> para que você possa entender melhor:

Example: 

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<body>
<h2>The var Element</h2>
<p>An Algebra basic formula: <var>(a+ b)<sup>2</sup></var> = <var>a<sup>2</sup> + b<sup>2</sup> + 2ab.</var></p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Tags de código de computador HTML

Tag Visão geral
<kbd> A entrada do teclado é representada.
<pré> Texto pré-formatado.
<código> Descreve o código de programação em código de computador HTML.
<var> Variáveis ​​são representadas.
<samp> Saída de um computador.

Dica: confira nossa página de tags HTML para obter uma lista abrangente de todas as tags HTML.

Benefícios do uso de elementos de código de computador HTML

As vantagens de usar elementos de código de computador HTML são:

Legibilidade aprimorada: os elementos de código de computador HTML são projetados para exibir o código de uma maneira fácil de ler e entender.

Formatação consistente: o uso de elementos de código de computador HTML pode ajudar a garantir que o código seja formatado de maneira consistente em diferentes dispositivos e navegadores.

Acessibilidade: o uso adequado de elementos de código de computador HTML pode melhorar a acessibilidade para usuários que dependem de leitores de tela ou outras tecnologias assistivas.

Search Engine Optimization: Os elementos de código de computador HTML podem melhorar a otimização do mecanismo de busca (SEO), fornecendo uma indicação clara da finalidade do conteúdo para os mecanismos de pesquisa.

Amostras de código: os elementos de código de computador HTML são comumente usados ​​para exibir amostras de código, tornando mais fácil compartilhar e aprender com exemplos de código.

Se este artigo atendeu às suas necessidades educacionais, compartilhe-o com seus amigos clicando nos links abaixo.

Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.