How to define a piece of computer code in HTML?

Last Updated : 19 Jun, 2024

The <code> element in HTML is used to display computer code, ensuring it is displayed with a fixed-width font for proper alignment and readability. Unlike basic heading tags, the <code> tag maintains the correct formatting of the code, including spaces and line breaks.

HTML offers various methods for text formatting, the <code> tag is essential for accurately presenting programming code on web pages.

Syntax:

<code> Contents... </code>

Example 1: The example shows how to define a piece of computer code in HTML5.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>
        How to define a piece of code in HTML
    </title>
</head>

<body>
    <h2>How to define a piece of code in HTML</h2>
    <pre>
            <code>
                function sayHello() {
                    console.log("Hello Geeks");
                }
                sayHello();
            </code>
        </pre>
</body>

</html>

Output:

Example 2: The example shows how to define a piece of computer code in HTML5.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>
        How to define a piece of code in HTML
    </title>
</head>

<body>
    <h2>How to define a piece of code in HTML</h2>
    <pre>
            <code>
                class GFG {
                    static main() {
                        console.log("Hello, World");
                    }
                }
                GFG.main();
            </code>
        </pre>
</body>

</html>

Output: