DEV Community

Share Point Anchor
Share Point Anchor

Posted on • Originally published at sharepointanchor.com on

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> 

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

Result:

Result

Download Sample File:

HTML-Code-TagDownload

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>

Enter fullscreen mode Exit fullscreen mode

Result:

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>

Enter fullscreen mode Exit fullscreen mode

Result:

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:

Browser Support

Related Articles:

The post HTML Code Tag appeared first on Share Point Anchor.

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up