Categories
Learn HTML

HTML: code tag

HTML: <code> tag

In this series of learning HTML, we will teach you how to use the HTML code tag with proper syntax and lots of examples. Let’s start on the HTML code tag.

Description of HTML code tag

The HTML <code> tag is used to define a piece of computer code or programming code in an HTML document. It is typically used to display programming code examples, such as HTML, CSS, or JavaScript, on a webpage.

The <code> tag is often used in conjunction with the <pre> tag, which is used to define preformatted text. When used together, the <code> tag will preserve white space and line breaks in the code, while the <pre> tag will display the code in a fixed-width font and maintain the formatting of the code.

Here is an example of how the <code> tag can be used:

<pre><code>
function greeting() {
console.log("Hello, world!");
}
greeting();
</code></pre>

In this example, the <code> tag is used to enclose a block of JavaScript code. The <pre> tag is used to define preformatted text, which ensures that the code is displayed in a fixed-width font with preserved white space and line breaks.

When the code is rendered in a web browser, it will appear like this:

function greeting() {
console.log("Hello, world!");
}
greeting();

Overall, the <code> tag is a useful tool for developers and programmers who want to display code examples on a webpage in a clear and easy-to-read format.

 

Syntax of HTML code tag

The HTML code tag is used to markup a piece of code or programmatic text. The syntax of the code tag is as follows:

<code>Code goes here</code>

Here, the code tag is an inline element that is used to markup a section of code. It can be used within a paragraph, heading, or any other block element.

The code tag can also be used in conjunction with other elements to provide additional information about the code, such as the programming language or the output. For example:

<pre><code class="language-javascript">
function addNumbers(a, b) {
return a + b;
}
</code></pre>

Here, the pre tag is used to preserve white space and line breaks, and the code tag is used to markup the JavaScript code. The class attribute is used to specify the programming language, which can be used by syntax highlighters to color the code.

Example without syntax highlighting:

<p>To print the message "Hello, World!" in Python, use the following code:</p>
<code>print("Hello, World!")</code>

This will create a paragraph with a code snippet that will print “Hello, World!” when run in Python.

The proper syntax for the HTML code tag is as shown below:

<body>
<code>Computer code goes here</code>
</body>












 






Global Attributes


The <code> tag is used in HTML to define a block of preformatted text, typically used for displaying computer code. The following are some global attributes that can be used with the <code> tag:


    

  1. class: This attribute specifies one or more classes that will be applied to the <code> tag. Classes are used to define styles for multiple elements with a single CSS rule.
    2. 

  2. id: This attribute specifies a unique identifier for the <code> tag. The ID can be used to target the element with CSS or JavaScript.
    3. 

  3. style: This attribute is used to define inline styles for the <code> tag. Inline styles override any styles defined in external stylesheets or in the <style> tag.
    4. 

  4. title: This attribute specifies a title for the <code> tag. The title is typically displayed as a tooltip when the user hovers over the element.
    5. 

  5. dir: This attribute specifies the direction of the text within the <code> tag, either “ltr” for left-to-right or “rtl” for right-to-left.
    6. 

  6. lang: This attribute specifies the language of the content within the <code> tag.
    7. 

  7. accesskey: This attribute specifies a shortcut key that can be used to activate or focus the <code> tag.
    8. 

  8. tabindex: This attribute specifies the tab order of the <code> tag. The tab order determines the order in which elements are focused when the user navigates using the keyboard.
    9. 



 







Event Attributes


In HTML, the <code> tag is used to define a block of preformatted text, typically used for displaying computer code. The following are some event attributes that can be used with the <code> tag:


    

  1. oncopy: This event is fired when the user copies the content of the <code> tag.
    2. 

  2. oncut: This event is fired when the user cuts the content of the <code> tag.
    3. 

  3. onpaste: This event is fired when the user pastes content into the <code> tag.
    4. 

  4. onkeydown: This event is fired when the user presses a key while the <code> tag is in focus.
    5. 

  5. onkeyup: This event is fired when the user releases a key while the <code> tag is in focus.
    6. 

  6. onkeypress: This event is fired when the user presses a key while the <code> tag is in focus and the key generates a character value.
    7. 



These event attributes can be used with JavaScript to perform certain actions when the specified event occurs on the <code> tag. For example, the oncopy event can be used to display a message to the user when they copy the content of the <code> tag.







 






Other Attributes


In HTML, the <code> tag is used to define a block of preformatted text, typically used for displaying computer code. The following are some attributes specific to the <code> tag:


    

  1. datetime: This attribute specifies a machine-readable date and time for the content within the <code> tag.
    2. 

  2. itemprop: This attribute is used to define a property name for the content within the <code> tag. This is used for semantic markup and search engine optimization.
    3. 

  3. itemscope: This attribute is used to indicate that the content within the <code> tag is part of a larger item.
    4. 

  4. itemtype: This attribute is used to define the type of item that the content within the <code> tag is a part of.
    5. 

  5. spellcheck: This attribute is used to enable or disable spell checking for the content within the <code> tag.
    6. 

  6. translate: This attribute is used to indicate whether the content within the <code> tag should be translated when the page is translated.
    7. 



These attributes can be used to provide additional information about the content within the <code> tag, such as its semantic meaning, its relationship to other content on the page, or how it should be displayed or processed by the browser.











 


 




Notes on HTML: code tag




Here are some important notes on using the <code> tag in HTML:


    

  1. The <code> tag should be used to enclose text that represents computer code or programming instructions, and not simply any text that should be displayed in a monospaced font.
    2. 

  2. The <code> tag is a non-semantic element, meaning that it does not convey any meaning or significance about the content it contains. If you want to provide semantic information about the code, you can use other elements such as <pre> or <samp>.
    3. 

  3. When using the <code> tag, it’s a good practice to also use the CSS property font-family: monospace; to ensure that the code is displayed in a monospaced font.
    4. 

  4. To display code with syntax highlighting, you can use third-party libraries or plugins that apply appropriate CSS styles to the code. Examples of popular syntax highlighting libraries include PrismJS, Highlight.js, and CodeMirror.
    5. 

  5. The <code> tag is often used in conjunction with the <pre> tag, which is used to enclose preformatted text, such as blocks of code or poetry. When used together, the <code> tag is used to mark up the code within the <pre> tag.
    6. 

  6. When using the <code> tag to display code snippets, it’s important to ensure that the code is well-formatted and easy to read. This can help make it easier for others to understand and use the code.
    7. 











 






Browser Compatibility


The HTML code tag has essential support with the following browsers:


    

  1. Chrome
    2. 

  2. Internet Explorer (IE)
    3. 

  3. Opera
    4. 

  4. Safari (WebKit)
    5. 

  5. Firefox (Gecko)
    6. 

  6. Android
    7. 

  7. Firefox Mobile (Gecko)
    8. 

  8. Edge Mobile
    9. 

  9. Opera Mobile
    10. 

  10. Safari Mobile
    11. 















 


Examples of HTML code tag


We will discuss the HTML code tag below, with some examples of how to use the code tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1.




    

  1. HTML5
    2. 

  2. HTML4
    3. 

  3. XHTML
    4. 





 








HTML5 Document


Here is an example of how to use the <code> tag in an HTML5 document:




<!DOCTYPE html>
<html>
<head>
<title>Example Code Tag Usage</title>
<style>
/* Define a monospace font for the code */
code {
font-family: monospace;
}
</style>
</head>
<body>
<h1>Example Code Tag Usage</h1>
<p>This is an example of how to use the <code><code></code> tag in HTML5:</p>
<pre><code>// Define a variable and assign it a value
var myVariable = "Hello, world!";

// Display the variable's value in the console
console.log(myVariable);</code></pre>
</body>
</html>




In this example, we first define the document type as HTML5 using <!DOCTYPE html>.


Next, we create an HTML document that contains a heading, a paragraph explaining the usage of the <code> tag, and a code block that uses the <code> and <pre> tags to display some example code. The example code defines a variable, assigns it a value, and then displays the value in the console using JavaScript.


To ensure that the code is displayed in a monospace font, we define a CSS rule for the <code> tag that sets the font-family property to monospace.


When we view this HTML document in a web browser, the code block will be displayed with a monospace font, making it easy to read and understand.










 


 


 


HTML 4.01 Transitional Document


Here is an example of how to use the <code> tag in an HTML 4.01 Transitional document:




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Example Code Tag Usage</title>
<style type="text/css">
/* Define a monospace font for the code */
code {
font-family: monospace;
}
</style>
</head>
<body>
<h1>Example Code Tag Usage</h1>
<p>This is an example of how to use the <code><code></code> tag in HTML 4.01 Transitional:</p>
<pre><code>// Define a variable and assign it a value
var myVariable = "Hello, world!";

// Display the variable's value in the console
console.log(myVariable);</code></pre>
</body>
</html>




In this example, we first define the document type as HTML 4.01 Transitional using the DOCTYPE declaration.


Next, we create an HTML document that contains a heading, a paragraph explaining the usage of the <code> tag, and a code block that uses the <code> and <pre> tags to display some example code. The example code is the same as in the previous example and defines a variable, assigns it a value, and then displays the value in the console using JavaScript.


To ensure that the code is displayed in a monospace font, we define a CSS rule for the <code> tag that sets the font-family property to monospace.


When we view this HTML document in a web browser, the code block will be displayed with a monospace font, making it easy to read and understand. Note that HTML 4.01 Transitional does not support some of the more recent HTML5 features, such as the datetime attribute mentioned earlier.




 


XHTML 1.0 Transitional Document


Here is an example of how to use the <code> tag in an XHTML 1.0 Transitional document:




<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Code Tag Usage</title>
<style type="text/css">
/* Define a monospace font for the code */
code {
font-family: monospace;
}
</style>
</head>
<body>
<h1>Example Code Tag Usage</h1>
<p>This is an example of how to use the <code><code></code> tag in XHTML 1.0 Transitional:</p>
<pre><code>// Define a variable and assign it a value
var myVariable = "Hello, world!";

// Display the variable's value in the console
console.log(myVariable);</code></pre>
</body>
</html>




In this example, we first declare the XML version and encoding using the <?xml> declaration.


Next, we create an XHTML document that contains a heading, a paragraph explaining the usage of the <code> tag, and a code block that uses the <code> and <pre> tags to display some example code. The example code is the same as in the previous examples and defines a variable, assigns it a value, and then displays the value in the console using JavaScript.


To ensure that the code is displayed in a monospace font, we define a CSS rule for the <code> tag that sets the font-family property to monospace.


When we view this XHTML document in a web browser, the code block will be displayed with a monospace font, making it easy to read and understand. Note that XHTML documents must be well-formed and conform to strict XML syntax rules, unlike HTML documents which can be more forgiving.




XHTML 1.0 Strict Document


Here is an example of how to use the <code> tag in an XHTML 1.0 Strict document:




<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Code Tag Usage</title>
<style type="text/css">
/* Define a monospace font for the code */
code {
font-family: monospace;
}
</style>
</head>
<body>
<h1>Example Code Tag Usage</h1>
<p>This is an example of how to use the <code><code></code> tag in XHTML 1.0 Strict:</p>
<pre><code>// Define a variable and assign it a value
var myVariable = "Hello, world!";

// Display the variable's value in the console
console.log(myVariable);</code></pre>
</body>
</html>




In this example, we first declare the XML version and encoding using the <?xml> declaration.


Next, we create an XHTML document that contains a heading, a paragraph explaining the usage of the <code> tag, and a code block that uses the <code> and <pre> tags to display some example code. The example code is the same as in the previous examples and defines a variable, assigns it a value, and then displays the value in the console using JavaScript.


To ensure that the code is displayed in a monospace font, we define a CSS rule for the <code> tag that sets the font-family property to monospace.


When we view this XHTML document in a web browser, the code block will be displayed with a monospace font, making it easy to read and understand. Note that XHTML 1.0 Strict is a more restrictive version of XHTML that does not allow certain elements and attributes that are allowed in the Transitional version.




XHTML 1.1 Document


Here is an example of how to use the <code> tag in an XHTML 1.1 document:




<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Code Tag Usage</title>
<style type="text/css">
/* Define a monospace font for the code */
code {
font-family: monospace;
}
</style>
</head>
<body>
<h1>Example Code Tag Usage</h1>
<p>This is an example of how to use the <code><code></code> tag in XHTML 1.1:</p>
<pre><code>// Define a variable and assign it a value
var myVariable = "Hello, world!";

// Display the variable's value in the console
console.log(myVariable);</code></pre>
</body>
</html>




In this example, we first declare the XML version and encoding using the <?xml> declaration.


Next, we create an XHTML document that contains a heading, a paragraph explaining the usage of the <code> tag, and a code block that uses the <code> and <pre> tags to display some example code. The example code is the same as in the previous examples and defines a variable, assigns it a value, and then displays the value in the console using JavaScript.


To ensure that the code is displayed in a monospace font, we define a CSS rule for the <code> tag that sets the font-family property to monospace.


When we view this XHTML document in a web browser, the code block will be displayed with a monospace font, making it easy to read and understand. Note that XHTML 1.1 is the latest version of XHTML and includes several changes and improvements over previous versions.