Skip to content
Related Articles

Related Articles

HTML <code> Tag
  • Difficulty Level : Basic
  • Last Updated : 09 Feb, 2021
GeeksforGeeks - Summer Carnival Banner

The <code> tag in HTML is used to define the piece of computer code. During the creation of web pages sometimes there is a need to display computer programming code. It could be done by any basic heading tag of HTML but HTML provides a separated tag which is <code>. 

The code tag is a specific type of text which represents computer output. HTML provides many methods for text-formatting but <code> tag is displayed with fixed letter size, font, and spacing.

Some points about <code> tag: 

  • It is mainly used to display the code snippet into the web browser.
  • This tag styles its element to match the computer’s default text format.
  • The web browsers by default use a monospace font family for displaying <code< tags element content.

Syntax: 

<code> Contents... </code>

The below examples illustrates the HTML code Tag.



Example 1: 

HTML




<!DOCTYPE html>
<html>
 
<body>
    <pre>
<!--code Tag starts here -->
      <code>
#include<stdio.h>
int main() {
    printf("Hello Geeks");
}
<!--code Tag starts here -->
      </code>
    </pre>
</body>
 
</html>

Output:

Example 2: 

HTML




<!DOCTYPE html>
<html>
 
<body>
    <pre>
<!--code Tag starts here -->
        <code>
        class GFG
        {
            // Program begins with a call to main()
            // Print "Hello, World" to the terminal window
            public static void main(String args[])
            {
                System.out.println("Hello, World");
            }
        }
<!--code Tag ends here -->
        </code>
     </pre>
 
</body>
 
</html>

Output: The program which is written inside the <code> tag has some different font size and font type to the basic heading tag and paragraph tag.

Note: <pre> tag is used to display code snippets because it always keeps the text formatting as it.
Supported Browsers: 

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :