HTML <code> Code Tag
Tags: learnhtml, htmlc
Published: 2021-02-19 06:58:01

---
title: HTML <code> Code Tag
published: true
date: 2021-02-17 07:08:39 UTC
tags: LearnHTML,HTMLC
canonical_url: https://sharepointanchor.com/learn-html/html-code-tag/
---

The **Code tag** in the [HTML](https://sharepointanchor.com/learn-html/ "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**.

<svg aria-hidden="true" focusable="false" data-icon="clock" width="20" height="20" fill="none" stroke="currentColor" style="display:inline-block;vertical-align:-0.1em" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>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:
<style> th, td{ padding: 20px; } </style>

| 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](https://sharepointanchor.com/learn-html/ "HTML") element that accepts phrasing content. |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | Any |
| DOM interface | [HTML](https://sharepointanchor.com/learn-html/ "HTML") Element. The [HTML](https://sharepointanchor.com/learn-html/ "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:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Result-17.png)<figcaption>Result</figcaption>

<script async src="//jsfiddle.net/Share_Point_Anchor/974wxsum/embed/html,result/"></script>

### Download Sample File:

[HTML-Code-Tag](https://sharepointanchor.com/wp-content/uploads/2021/02/HTML-Code-Tag.html)[Download](https://sharepointanchor.com/wp-content/uploads/2021/02/HTML-Code-Tag.html)

### 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:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/result1.png)<figcaption>Result</figcaption>

## 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:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Result-with-css.png)<figcaption>Result</figcaption>

## 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](https://sharepointanchor.com/learn-html/ "HTML") code tag.

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

- **[CSS](https://sharepointanchor.com/learn-css/ "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:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Browser-Support-3.png)<figcaption>Browser Support</figcaption>

### Related Articles:

- **[HTML Center Tag](https://sharepointanchor.com/learn-html/html-center-tag/)**
- **[HTML Line Break Tag](https://sharepointanchor.com/learn-html/html-br-line-break-tag/)**
- **[Basic HTML Definitions and Usages in the Real World](https://sharepointanchor.com/learn-html/basic-html-definitions-and-usages-in-real-world/)**
- **[HTML Big Tag](https://sharepointanchor.com/learn-html/html-big-tag/)**
- **[HTML Aside Tag](https://sharepointanchor.com/learn-html/html-aside-tag/)**

The post [HTML Code Tag](https://sharepointanchor.com/learn-html/html-code-tag/) appeared first on [Share Point Anchor](https://sharepointanchor.com).