HTML code

La etiqueta <code> en HTML es utilizada para mostrar código informático o contenido de programación dentro de un documento HTML. El contenido dentro de esta etiqueta se muestra generalmente en una fuente monoespaciada y se espera que sea escrito en un lenguaje de programación.

La etiqueta <code> es una etiqueta de formato de bloque, lo que significa que ocupa todo el ancho disponible y crea una nueva línea después de ella. También puede ser utilizada junto con la etiqueta <pre> para preservar los espacios en blanco y las tabulaciones dentro del contenido.

Ejemplo:

<code> function greeting() { console.log("Hello, World!"); } </code>
Lenguaje del código: HTML, XML (xml)

Nota: El contenido dentro de la etiqueta code debe ser escrito en un lenguaje de programación válido, sino no funcionaría como se espera.

Ejemplo de uso

Un ejemplo común de uso de la etiqueta <code> en HTML es en un tutorial de programación o un artículo técnico, donde se desea mostrar fragmentos de código para ilustrar un concepto o una técnica específica.

Por ejemplo, si estamos creando un tutorial sobre cómo crear una función en JavaScript, podríamos utilizar la etiqueta <code> para mostrar el código de la función:

<p>Para crear una función en JavaScript, utilice la palabra clave <code>function</code> seguida del nombre de la función y los paréntesis de los argumentos:</p> <code> function myFunction(arg1, arg2) { // cuerpo de la función } </code>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, el código dentro de la etiqueta <code> se muestra en una fuente monoespaciada y se destaca para indicar que es código informático.

También se puede utilizar la etiqueta <pre> junto con <code> para preservar los espacios en blanco y las tabulaciones dentro del contenido.

Ejemplo:

<pre> <code> function greeting() { console.log("Hello, World!"); } </code> </pre>
Lenguaje del código: HTML, XML (xml)

En este caso se ve mejor formateado el código con espacios y tabulaciones.

Atributos

La etiqueta <code> en HTML no tiene muchos atributos específicos, pero los siguientes son algunos de los atributos más comunes y útiles que se pueden utilizar con esta etiqueta:

  • class: Este atributo permite asignar una o varias clases CSS al elemento <code>, lo que permite aplicar estilos personalizados al contenido.
  • id: Este atributo permite asignar un identificador único al elemento <code>, lo que permite aplicar estilos personalizados mediante un selector CSS.
  • lang: Este atributo permite especificar el lenguaje de programación que se utiliza en el contenido dentro de la etiqueta <code>. Esto puede ser útil para los navegadores o aplicaciones que utilizan herramientas de análisis de lenguaje para mejorar la accesibilidad o la funcionalidad.
  • style: Este atributo permite especificar estilos CSS inline para el elemento <code>, lo que permite aplicar estilos personalizados sin necesidad de utilizar hojas de estilo externas.

En general, la etiqueta <code> en HTML es una etiqueta de formato de bloque, lo que significa que ocupa todo el ancho disponible y crea una nueva línea después de ella.

Si desea controlar el formato de las líneas y los espacios en blanco, es recomendable usar la etiqueta <pre> junto con <code>.

Ejemplos de atributos

Aquí hay algunos ejemplos de cómo se pueden utilizar los atributos comunes de la etiqueta <code> en HTML:

  • Utilizando el atributo class para aplicar estilos personalizados mediante una hoja de estilo externa:
<p>Este es un ejemplo de código en JavaScript:</p> <code class="javascript-code">console.log("Hello, World!");</code>
Lenguaje del código: HTML, XML (xml)
  • Utilizando el atributo id para aplicar estilos personalizados mediante un selector CSS:
<p>Este es un ejemplo de código en Python:</p> <code id="python-code">print("Hello, World!")</code>
Lenguaje del código: HTML, XML (xml)
  • Utilizando el atributo lang para especificar el lenguaje de programación:
<p>Este es un ejemplo de código en C++:</p> <code lang="cpp">#include <iostream> int main() { std::cout << "Hello, World!" << std::endl; return 0; }</code>
Lenguaje del código: HTML, XML (xml)
  • Utilizando el atributo style para aplicar estilos CSS inline:
<p>Este es un ejemplo de código en SQL:</p> <code style="color: #006400;">SELECT * FROM users;</code>
Lenguaje del código: HTML, XML (xml)

En todos los ejemplos anteriores se están utilizando atributos para darle formato al código, pero es importante tener en cuenta que deben ser utilizados en conjunto con una hoja de estilo o un formateador de código para que se vea mejor.