HTML - <code> Tag

Quiz

Introduction to <code> Tag

The HTML <code> tag is used to define a piece of computer code within a webpage. It is a semantic tag that represents a block of code and by default it is displayed in a monospace font to differentiate it from other text.

The <code> tag is often used in documentation, tutorials wherever its necessary to display code snippets. It is not only used to mark up inline code, but also used in combination with other elements such as <pre> for pre-formatted text or <samp> for sample output.

Syntax

Following is the syntax of HTML <code> tag −.

<code>...</code>

Attributes

HTML code tag supports Global and Event attributes of HTML.

Example : Basic Code Snippet

Let's look at the following example, where we are going to consider the basic usage of the <code> tag.

<!DOCTYPE html>
<html>
<style>
    body{
        text-align:center;
        color:#1d8348;
        font-family:verdana;
    }
</style>
<body>
<p>Welcome Everyone</p>
<code>let x = 1+2;</code>
</body>
</html>

Example : Pre-formatted Code Block

Consider the following example, where we are going to use the <pre> tag along with the <code> tag.

<!DOCTYPE html>
<html>
<style>
    body {
        text-align: center;
        color: #1d8348;
        font-family: verdana;
    }
</style>
<body>
    <pre><code>function a() {
  console.log("Hello, Namaste");
}</code></pre>
</body>
</html>

Example : Using with HTML Elements

In the following example, we are going to use the <code> tag inside the paragraph.

<!DOCTYPE html>
<html>
<style>
    body {
        text-align: center;
        color: #1d8348;
        font-family: verdana;
    }
</style>
<body>
<p>To insert a img in HTML, use the <code><img src = "--" alt = "--"></code> tag.</p>
</body>
</html>

Supported Browsers

Tag
code	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm

Print Page