Saltar al contenido

HTML Elementos de código de computadora

La computadora tiene un formato y estilo de texto especiales para mostrar los mensajes relacionados con el código. Existen diferentes elementos de código de computadora en HTML.

La etiqueta HTML <code>

La etiqueta HTML <code> inserta fragmentos de código de programa, variables, etc. en un documento HTML. En el navegador, el código se muestra en una fuente monoespaciada de tamaño más pequeño.

Ejemplo de la etiqueta HTML <code>:

Ejemplo de la etiqueta HTML <code>

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>This is an ordinary text.</p>
    <code>This is a program code.</code>
    <p>This is the continuation of the ordinary text.</p>
  </body>
</html>

La etiqueta HTML <var>:

La etiqueta <var> define una variable en una expresión matemática o un contexto de programación.

Ejemplo de la etiqueta HTML <var>:

Ejemplo de la etiqueta HTML <var>:

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p><var>x</var> = <var>y</var> + 5</p>
  </body>
</html>

La etiqueta HTML <kbd>:

La etiqueta <kbd> especifica una entrada de teclado. Se utiliza cuando necesitamos mostrar texto que debe ser ingresado en el teclado del usuario.

Ejemplo de la etiqueta HTML <kbd>:

Ejemplo de la etiqueta HTML <kbd>

html
<!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>

La etiqueta HTML <samp>

La etiqueta <samp> contiene la salida de un programa de computadora o un script. Por defecto, se muestra en una fuente monoespaciada.

Ejemplo de la etiqueta HTML <samp>:

Ejemplo de la etiqueta HTML <samp>:

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>This is an ordinary text. <samp>But this is a sample text.</samp> Here is another ordinary text.</p>
  </body>
</html>

Práctica

¿Qué etiquetas se utilizan en HTML para mostrar código de computadora?

¿Te resulta útil?

Vista previa dual-run — compárala con las rutas Symfony en producción.