The Speed Coding

HTML <code> Tag


Define some text as computer code in a document:

<p>The HTML <code > button</code> tag defines a clickable button. </p>

<p>The CSS <code > background-color</code> property defines the background color of an element.</p>

More "Try it Yourself" examples below.

Definition and Usage

The <code> tag is used to define a piece of computer code. The content inside is displayed in the browser's default monospace font.

Tip: This tag is not deprecated. However, it is possible to achieve richer effect by using CSS (see example below).

Also look at:

Tag Description
<samp> Defines sample output from a computer program
<kbd> Defines keyboard input
<var> Defines a variable
<pre> Defines preformatted text

Browser Support

<code> Yes Yes Yes Yes Yes

Global Attributes

The <code> tag also supports the Global Attributes in HTML.

Event Attributes

The <code> tag also supports the Event Attributes in HTML.

More Examples


Use CSS to style the <code> element:

<head >
code {
  font-family: Consolas,"courier new";
  color : crimson;
  background-color : #f1f1f1;
  padding : 2px;
  font-size: 105% ;
</style >
<body >

<p > The HTML <code>button</code > tag defines a clickable button.</p>
<p > The CSS <code>background-color</code > property defines the background color of an element. </p>

</body >
</html >

Related Pages

HTML tutorial: HTML Text Formatting

HTML DOM reference: Code Object

Default CSS Settings

Most browsers will display the <code> element with the following default values:


code {
  font-family: monospace;