On

The <pre> and <code> HTML elements are both used to display code or preformatted text, but they serve distinct purposes and have key differences.


1. <pre> (Preformatted Text)

The <pre> tag is used to preserve whitespace and line breaks exactly as written in the HTML source. It is ideal for displaying block-level content like code snippets, ASCII art, or structured data.

 

Key Features:

  • Preserves Whitespace: Spaces, tabs, and line breaks are displayed exactly as in the source code.
  • Block Element: Creates a block-level container (like a paragraph or div).
  • Default Styling:
    • Uses a monospace font.
    • Adds whitespace around the content.

 

Use Cases:

  • Displaying multi-line code blocks.
  • Showing structured text (e.g., tables, ASCII diagrams) that requires precise spacing.

 

Example:

html
 
<pre> function greet() { console.log("Hello, World!"); } </pre>

 

Rendered Output:

javascript
 
function greet() { console.log("Hello, World!"); }



2. <code> (Code Text)

The <code> tag is used to represent inline code or snippets of programming in text. It’s more general-purpose and does not preserve whitespace or line breaks by default.

 

Key Features:

  • Inline or Block Use:
    • By itself, <code> is an inline element (fits within a paragraph).
    • Can be wrapped inside <pre> for block-level formatting.
  • Does Not Preserve Whitespace: By default, multiple spaces or line breaks are collapsed into a single space.
  • Default Styling:
    • Uses a monospace font.
    • No additional spacing or padding.

 

Use Cases:

  • Highlighting inline snippets or variables in documentation.
  • Wrapping short pieces of code or text identifiers.

 

Example:

html
 
<p>The function <code>console.log()</code> prints messages to the console.</p>

 

Rendered Output: 

The function console.log() prints messages to the console.

 

 

Differences in Summary

Feature <pre> <code>
Purpose Displays preformatted text or code blocks. Displays inline or short snippets of code.
Whitespace Preserves all whitespace and line breaks. Collapses whitespace and ignores line breaks by default.
Display Block-level element. Inline element (unless styled or used with <pre>).
Styling Monospace font with padding and spacing. Monospace font only (no extra spacing).
Use Case Multi-line code blocks, ASCII art. Inline code snippets, variable names.

 

 

Combining <pre> and <code>

For best practices, use both tags together when displaying block code. The <pre> preserves formatting, while <code> semantically indicates that the content is code.

 

Example:

html
 
<pre><code> function greet() { console.log("Hello, World!"); } </code></pre>

 

This approach ensures accessibility, semantic correctness, and styling consistency.

 

 

CSS Code for pre and code for best output

/* Shared styling for both pre and code */
pre, code {
    font-family: "Roboto Mono", "Source Code Pro", Consolas, Monaco, "Courier New", Courier, "Liberation Mono", monospace;
    font-size: 16px;
    line-height: 1.6;
    background-color: #f8f8f8;
    color: #000000; 
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-x: hidden;
}

/* Specific adjustments for pre (block-level elements) */
pre {
    display: block;
    margin: 10px 0;
}

/* Specific adjustments for code (inline elements) */
code {
    display: inline;
    padding: 2px 4px;
    border: none;
    border-radius: 3px;
}