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; }
| HTML code tag | Used to represent the computer code |
| Content categories | Flow content, phrasing content, palpable content. |
| Permitted content | Phrasing content. |
| Tag omission | None, both opening and closing tags are mandatory. |
| Permitted parents | Any HTML element that accepts phrasing content. |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | Any |
| DOM interface | HTML Element. The HTML Span Element interface for this element. |
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:
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.
Browser Support:
Related Articles:
- HTML Center Tag
- HTML Line Break Tag
- Basic HTML Definitions and Usages in the Real World
- HTML Big Tag
- HTML Aside Tag
The post HTML Code Tag appeared first on Share Point Anchor.
Top comments (0)