HTML code Tag: How to Mark Up Code Snippets

The <code> tag in HTML shows short code, command names, or output. Use it to display text that the browser must not render or execute.

Understand the <code> Tag in HTML

The <code> tag shows a short code snippet inside a document. It marks text as part of a program. This helps the reader see it as code, not regular content.

The browser renders this tag in a monospace font. This sets it apart from other text.

The syntax looks like this:

<code>your code here</code>

Use this tag to wrap short parts of code. Do not use it for long sections or full files.

You use the code element for the following reason:

• Function names
• Short code examples
• Inline snippets
• Terminal commands

Do not use it to hold full blocks of code. Use <pre> for that.

<code> vs <pre> vs <samp>

The below is a list of items that shows a brief definition for each one:

• The <code> tag shows code as part of the content. It helps the reader know it is code.
• The <pre> tag keeps space and line breaks. It keeps the format as you type it.
• The <samp> tag shows sample output. It helps the user see results from a program.

Here is the use case:

• <code>: Show small code inside a line of text.
• <pre>: Show multi-line code blocks.
• <samp>: Show what the user sees after code runs.

Inline vs Block Code Display with <code> Tag in PHP

Inline Code with <code>:

Inline code appears within a paragraph. The flow stays in one line. Use inline code to show function names, variables, or values.

<p>Call the <code>str_replace</code> function in PHP.</p>

This shows the PHP function in the sentence. The reader can spot it fast.

Here is another example:

<p>Use <code>$data</code> to store the result.</p>

This shows a PHP variable in line with the text.

Block Code with <code>:

Use block code to show full examples. Wrap the <code> tag inside <pre>. The <pre> tag keeps the layout.

Here is an example:

<pre>
  <code>
    <?php echo "Flatcoding Tutorials!"; ?>
  </code>
</pre>

This shows a simple PHP script. It keeps the new line and space.

Here is another example:

<pre>
  <code>
    <?ph
      for ($i = 0; $i < 5; $i++) {
        echo $i . "\n";
      }
    ?>
  </code>
</pre>

This shows a PHP loop. The browser shows it exactly as typed.

How to Style Inline <code> Tag and Block <code> in HTML

Style Inline Code

You can set color, background, and font. Use display: inline. For example:

<style>
  code {
    background: #eee;
    color: #000;
    font-size: 14px;
  }
</style>
<p>Use <code>array_merge</code> to combine arrays.</p>

This adds light gray background and sets font color.

Here is another example:

<style>
  code {
    padding: 2px 4px;
    border-radius: 4px;
    font-family: monospace;
  }
</style>
<p>Set the value with <code>$total</code>.</p>

This adds padding and rounded corners.

Style Block Code

Use pre code to apply block-level styles.

<style>
  pre code {
    background: #f4f4f4;
    padding: 10px;
    display: block;
    overflow-x: auto;
  }
</style>
<pre><code><?php echo "Done"; ?></code></pre>

This keeps spacing and adds scroll for long lines.

<style>
  pre code {
    border-left: 5px solid #ccc;
    font-size: 13px;
  }
</style>
<pre><code><?php $x = 5; echo $x; ?></code></pre>

This adds a left border to highlight the block.

Nest <code> Inside Other Elements

You can place <code> inside text or list items. It works in most inline or block tags.

Here is an example:

<p>To set a value, write <code>$x = 5</code> in PHP.</p>

This shows the code inside a paragraph.

Here is another example:

<li>Use <code>echo</code> to print output in PHP.</li>

This shows the code inside a list item.

Browser Support for the <code> Tag

All major browsers support <code>. It works without extra setup.

You do not need fallback code for most users. Old browsers still render the text.

Wrapping Up

In this article, you learned what the <code> tag does and how it works. You also saw how to use and style it in different ways.

Here is a quick recap:

• Use <code> to mark small code pieces.
• Use <pre> for full blocks of code.
• Use <samp> for output from code.
• Style code with CSS to control the look.
• Use <code> inside lists or paragraphs.
• Browsers support <code> with no issues.

FAQs

<pre><code>
echo "Hi";
</code></pre>

Similar Reads