Menu

HTML code Tag

HTML code Tag

The HTML <code> tag is used to enclose the programming related terms to show them differently in an HTML document. When we create webpages with programming-related or computer-related content, then to show some specific coding terms like some function name, or any variable name, etc, we can use the <code> tag.

In this tutorial too, you will see that wherever we have specified the <code> tag, the styling for it is different, that is because it is enclosed within the <code> tag.

  • The <code> tag is used to display enclosed text in a monospaced font, such as courier.
  • If you want to display the programming code in multiple lines, then you can place the <code> tag inside the <pre> tag, or simply use the <pre> tag.
  • Also, this is an inline element.

HTML <code> Tag - Syntax and Usage

The <code> tag requires the start(opening) tag and end(closing) tag.

Required syntax for the same is given below:

<code>
    some text
</code>

HTML <code> Tag Basic Example

Below we have a basic example of the <code> tag:

<!doctype html>
<html>
    <head>
        <title>
            HTML code tag Example
        </title>
        <style>
            code {
                background-color: #DDD;
                padding:4px;
                color: #6a67ce;
            }
        </style>
    </head>
    <body>
        <p>In HTML, we use the <code>&lt;script&gt;</code> tag to add JavaScript tag.</p>
        <p>In JavaScript, we can use the <code>getElementById()</code> function to refer to any HTML document with a given <code>id</code> attribute.</p>
        <p>In the text above, you can see the usage of <code>&lt;code&gt;</code> tag.</p>
    </body>
</html>

In the code example above, we have provided some styling too for the <code> tag to highlight the test enclosed in it.

HTML <code> Tag Attributes

This element does not have any specific attributes although this element supports Global attributes and Event attributes.

AttributesDescription
classindicates a class name for the <code> tag
idindicates a unique id for the <code> tag
styleindicates an inline style for the <code> tag
titleindicates a title for the <code> tag

Default CSS style for HTML <code> tag

Most of the Browsers use these default CSS Settings:

code {
    font-family: monospace;
}

Browser Support For HTML <code> tag

Following browsers support this attribute:

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 2+
  • Apple Safari 1+
  • Opera 4+