Elemento code

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento code representa a un fragmento de código de computadora, que puede ser cualquier texto legible para computadoras. Entre muchos otros ejemplos, puedes encontrar dentro del elemento code, una parte de un programa en cualquier lenguaje de programación, un documento HTML o XML, un conjunto de declaraciones CSS, los contenidos de un archivo de configuración, etc.

El elemento code se coloca generalmente dentro de pre para aprovechar las ventajas de sus características: los espacios y los quiebres de línea en el código son respetados en la versión representada del documento.

Ejemplos

Nuestro primer ejemplo muestra un uso básico del elemento code dentro de una línea de texto.

<p>Deberías declarar la función así: <code>function cambiarColor(elemento, evento) { ... }</code>, donde el contenido de la función es representado por los puntos suspensivos.</p>

Deberías declarar la función así: function cambiarColor(elemento, evento) { ... }, donde el contenido de la función es representado por los puntos suspensivos.

El segundo ejemplo contiene un trozo de texto en el cual una función completa en Javascript es mostrada. La función se encuentra apropiadamente encerrada en el elemento code, lo cual provee la información semántica acerca de lo que ésta representa (código de computadora).

Adicionalmente, el código de la función también se encuentra dentro del elemento pre con el fin de incluir los beneficios de este elemento al escribir la función: los espacios y los quiebres de línea en el código son respetados en la versión representada del documento. El uso de estos dos elementos juntos es una práctica muy común al crear documentos con fragmentos de código.

<p>...y así es como la función cambia el color del elemento o el de sus padres cuando el evento es disparado:</p>
<pre><code>function cambiarColor(elemento, evento) {
  if (typeof event != 'undefined') event.preventDefault();
  if (typeof $(elemento).data('transparentBackground') == 'undefined' || $(elemento).data('transparentBackground')) {
    $(elemento).css({backgroundColor: '#a3cd52'});
    $(elemento).data('transparentBackground', 0);
  } else {
    $(elemento).css({backgroundColor: 'transparent'});
    $(elemento).data('transparentBackground', 1);
  }
}
</code></pre>

...y así es como la función cambia el color del elemento o el de sus padres cuando el evento es disparado:

function cambiarColor(elemento, evento) {
  if (typeof event != 'undefined') event.preventDefault();
  if (typeof $(elemento).data('transparentBackground') == 'undefined' || $(elemento).data('transparentBackground')) {
    $(elemento).css({backgroundColor: '#a3cd52'});
    $(elemento).data('transparentBackground', 0);
  } else {
    $(elemento).css({backgroundColor: 'transparent'});
    $(elemento).data('transparentBackground', 1);
  }
}

Nota cómo el elemento code es contenido por el elemento pre. Esto se debe a que el primero es un elemento de tipo phrasing (en versiones previas, de línea) y no puede contener elementos de tipo flow (en versiones previas, de bloque) como pre.

Atributos

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.