Add Code Tag to Your Webpage
Working with Text
In this lesson, we will learn how to use the code tag in HTML.
What is Code Tag in HTML
The code tag is an HTML element used to define a piece of computer code. It is generally used to display code snippets on a web page or highlight a specific code section.
The syntax for the code tag is straightforward. It requires an opening and closing code tag, and the code snippets are placed between these two tags.
Here's an example of how to use <code> tag in HTML:
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Code Tag Example</title>
</head>
<body>
<p>Here is an example of a for loop in JavaScript:</p>
<pre>
<code>for (var i = 0; i < 10; i++) {
console.log(i);
}</code>
</pre>
</body>
</html>Note: In the above example, we used a code tag within the pre tag to preserve the format of the code snippet.
Attributes of Code Tag
Here are the attributes we can use with the code tag:
- id
- class
- style
- title
id
The id attribute is used to assign a unique name to an element on a web page. We can assign an id to the <code> tag and use it to apply a specific style to that particular tag.
Example
<code id="htmlcode"><img src="image.jpg" alt="Image"></code>In the above example, we assign an id attribute to the code tag with a value htmlcode. In CSS and JavaScript, we can use the name htmlcode to access the specific code tag whose id value is set to the name htmlcode.
Note: The id attribute can be used on any tag to assign a unique tag name. It must be unique for each tag, meaning we can't use the same id name for another tag in an HTML document.
class
The class attribute is used to define a group of elements and to apply a specific style to that group. We can define a class for the code tags and use it to apply a specific style to all the code tags that belong to a particular class.
Example
<code class="samplecode"><img src="image.jpg" alt="Image"></code>
<code class="samplecode">for (var i = 0; i < 10; i++) {
console.log(i);
}</code>In the above example, both code tags have the same class name, samplecode. If any CSS style is applied to the class name samplecode, it will be applied on both code tags.
Note: The class attribute can be used on any tag to assign a group name to the tag.
style
The style attribute can be used to apply inline css styles to the code tag. We will learn how to apply inline css style using the style attribute later in our CSS tutorial.
Example
<code style="color: red">for (var i = 0; i < 10; i++) {
console.log(i);
}</code>The style="color: red" will change the font color of the code tag to red.
title
The title attribute can be used to add a tooltip or additional information to the code tag, which will only appear when the user places the mouse cursor on the code.
Example
<code title="This is an example of for loop in javascript.">for (var i = 0; i < 10; i++) {
console.log(i);
}</code>