HTML - <code> Tag

HTML <code> tag is used to define a piece of computer code. Or, in other words, we can say that the <code> tag is used to insert variables, fragments of program code, etc. into an HTML document. By default, in the browser, the content text is displayed using the default monospace font. HTML provides many methods for text formatting, but the <code> tag is displayed with fixed letter size, font, and spacing.

Syntax

<code>...</code>

Attribute

HTML code tag supports Global and Event attributes of HTML.

Example of HTML code Tag

In the bellow examples we will see the use of code tag and also see the use of related tags that can be used rather than code tag like <samp>, <kbd>, <var> and <pre> tags. Also we will style our code tag using internal CSS.

Default style of code Element

In the following example, let’s see the usage of <code> tag in the HTML document.

<!DOCTYPE html>
<html>
<body>
   <h2>TutorialsPoint</h2>
   <p> Simply Easy Learning
      <code>HTML Tutorial</code> 
   </p>
</body>
</html>

Using code tag with other Replacment tags

In this example we will see the other similar tags which can be used as well. HTML code tag is not deprecated.

<!DOCTYPE html>
<html>
<body>
    <h3>
      Bellow we have used 4 other tags that 
      can be replacement of code tag
    </h3>
    <code>This is code Element</code>
    <br>
    <samp>This is samp Element</samp>
    <br>
    <kbd>This is kbd Element</kbd>
    <br>
    <var>This is var Element</var>
    <br>
    <pre>This is code Element</pre>
</body>
</html>

Specifying other Language in HTML

Considering the following example, we are creating an HTML document and using the <code> tag to display the one-line CPP program.

<!DOCTYPE html>
<html>
<body>
   <h2>CPP Program</h2>
   <code>int a, b, c; a = 20, b = 30, c = 40;</code>
</body>
</html>

Styling code Element using internal CSS

Let's look at the following example, where we are creating an HTML document using the <code> tag and CSS properties to style the content of the <code>.

<!DOCTYPE html>
<html>
<head>
   <style>
      code {
      color: red;
      font-family: verdana;
      }
   </style>
</head>
<body>
   <h2>TutorialsPoint</h2>
   <code>HTML Tutorial</code> 
</body>
</html>

Supported Browsers

Tag
code	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm