Posted on Feb 19, 2021 • Originally published at sharepointanchor.com on Feb 17, 2021

HTML <code> Code Tag

The Code tag in the HTML document is used to define an enclosed text as a computer code. By default, the content text is displayed using the monospaced font of the smaller size in the browsers.

Info: The code tag along represents a single code line. You can use the code tag with pre tag to create multiple lines of code.

Estimated reading time: 4 minutes

Syntax:

The code tag contains both starting code tag and closing code tag. The content is written between these two tags.

 <code>Text content </code>

HTML code Tag:

th, td{ padding: 20px; }

Sample of the HTML code Tag:

 <!DOCTYPE html> <html> <head> <title>Document Title</title> </head> <body> <h3>HTML Code tag:</h3> <p>This is the ordinary text.</p> <code>This text is enclosed within the HTML code tag.</code> </body> </html>

Result:

Download Sample File:

HTML-Code-Tag Download

Sample of the HTML code tag with pre Tag:

The pre-tag is used to display the code snippets because it always keeps the text formatting as it.

 <!DOCTYPE html> <html> <head> <title>Document Title</title> </head> <body> <h3>Sample of HTML <code> tag with<pre> tag</h3> <p>Here is the sample code for print Welcome Back </p> <pre> <code> #include<stdio.h> int main() { printf("Welcome Back!!"); } </code> </pre> </body> </html>

Result:

Use CSS Property with HTML code Tag:

 <!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .code-style { font-size: 20px; line-height: 30px; background-color: #C40655; color: #ffffff; } </style> </head> <body> <p>This is the ordinary text.</p> <code class="code-style">Line of the computer code.</code> <p>Continuation of the ordinary text.</p> </body> </html>

Result:

Attributes:

The code tag supports the global attributes and the event attributes.

Styling Methods for code Tag:

You can use the following properties to style an HTML code tag.

Properties to style the visual weight/emphasis/size of the text in code tag:

CSS font-style – This CSS property helps to set the font style of the text such as normal, italic, oblique, initial, inherit.
CSS font-family – This CSS property specifies a prioritized list of one or more font family names or generic family names for the selected element.
CSS font-size – This CSS property will help to set the size of the font.
CSS font-weight – This CSS property used to define whether the font should be bold or thick.
CSS text-transform – This CSS property will control the text case and capitalization.
CSS test-decoration – This CSS property specifies the decoration added to text such as text-decoration-line , text-decoration-color , text-decoration- style.

Styles to coloring the text in code Tag:

CSS color – This CSS property will specify the color of the text content and decorations.
CSS background-color – This CSS property helps to set the background color of an element.

Text layout styles for code Tag:

CSS text-indent – This CSS property is used to specify the indentation of the first line in a text block.
*CSS text-overflow * – This CSS property helps to describe how overflowed content that is not displayed should be signaled to the user.
CSS white-space – This CSS property describes how white-space inside an element is handled.
CSS word-break – This CSS property decides where the lines should be broken.

Other Properties for code Tag:

CSS text-shadow – This CSS property helps to add the shadow to text.
CSS text-align-last – This CSS property will set the alignment of the last line of the text.
CSS line-height – This CSS property defines the height of a line.
CSS letter-spacing – This CSS property helps to decide the spaces between letters/characters in a text.
CSS word-spacing – This CSS property specifies the spacing between every word.