HTML Code Tag
The code tag in HTML is a phrase tag used to insert a piece of computer programming code. In HTML there is a separate tag named as <code> tag. Sometimes, there is a place in webpages where you want to format the text in such a way that your website, which is related to coding or Information Technology field, then you can display code in your website. That’s why we use the code tag. When we need to show computer code on web pages, we use the code tag.
The code is displayed in the monospace font, a default browser font. Primarily we use code tag when we want to show a single line in the webpage. For showing multi-line, we prefer to use the <pre> tag.
HTML <code> tag supports the Global attributes, which can be used to any HTML element.
HTML <code> tag also supports the Event attributes on which the browser takes action.
Syntax of HTML Code Tag
<code>Computer code</code>
Examples of HTML Code Tag
Example 1: This example has only a single line of code.
<html>
<head>
<title>code</title>
</head>
<body>
<p>This is a code.</p>
<code>var a=6; </code>
</p>
</body>
</html> Output: You can see the code with the monospace font, as shown in the image below.
Example 2: We have used multi-lines of Java programming code in this example.
<html>
<head>
<title>code</title>
</head>
<body>
<p>This is a Java Programming code.</p>
<code>import java.util.Scanner;
public class AddTwoNumbers {
public static void main(String[] args) {
int number1, number2, sum;
Scanner sc = new Scanner(System.in);
System.out.println("Enter First Number: ");
num1 = sc.nextInt();
System.out.println("Enter Second Number: ");
num2 = sc.nextInt();
sc.close();
sum = number1 + number2;
System.out.println("Sum of two numbers: "+sum);
}
}
</code>
</p>
</body>
</html>
Output: Although it is a multi-line code, we can see that it displays in a single line because we are using code tags for single-line code display.
Example 3: Use of <pre> tag.
<html>
<head>
<title>code</title>
</head>
<body>
<p>This is a Java Programming Code.</p>
<pre>import java.util.Scanner;
public class AddTwoNumbers {
public static void main(String[] args) {
int number1, number2, sum;
Scanner sc = new Scanner(System.in);
System.out.println("Enter First Number: ");
num1 = sc.nextInt();
System.out.println("Enter Second Number: ");
num2 = sc.nextInt();
sc.close();
sum = number1 + number2;
System.out.println("Sum of two numbers: "+sum);
}
}
</pre>
</p>
</body>
</html> Output: You can see code displays in multi-lines because we have used the <pre> tag in this example.
Example 4: We can also used CSS to highlight the code.
<!DOCTYPE html>
<html>
<head>
<title>Code</title>
<style>
.style {
font-size: 20px;
line-height: 28px;
background-color: rgb(177, 228, 245);
color: #f9e3e3;
}
</style>
</head>
<body>
<p>This is a code.</p>
<code class="style">The code goes here.</code>
<p>Happy coding!</p>
</body>
</html>Output: As you can see in the given image, the code looks attractive with the use of CSS.
Browser Supported
- Google Chrome
- Internet Explorer
- Microsoft Edge
- Mozilla Firefox
- Opera
- Safari