askvity

How Do You Display Code on a Web Page in HTML?

Published in HTML Code Display 4 mins read

To display code on a web page in HTML while preserving its formatting and indicating it as computer code, you primarily use the <pre> and <code> HTML tags.

Understanding the Key HTML Tags

According to the provided reference, to display HTML code in a browser, you can use the <pre> and <code> HTML tags. These two tags serve distinct but often complementary purposes when presenting code snippets or programming examples on a website.

Let's break down what each tag does:

  • <pre> Tag: This tag is used for preformatted text. It tells the browser to render the text exactly as it is written in the HTML source code, preserving whitespace (like spaces and line breaks). This is crucial for code because indentation and line breaks are often part of the code's structure and readability. Text inside <pre> is typically displayed in a monospaced font.
  • <code> Tag: This tag is used to define a piece of computer code. It's a semantic tag, meaning it doesn't necessarily change the visual appearance on its own (though browsers usually render it in a monospaced font), but it informs browsers, search engines, and accessibility tools that the enclosed text is code.

Using <pre> and <code> Together

The reference highlights that you can use both tags. This is the most common and recommended approach for displaying multi-line code blocks because it combines the semantic meaning (<code>) with the essential formatting preservation (<pre>).

  • The <pre> tag preserves the formatting of the code, including whitespace, while the <code> tag indicates that the content is computer code.

By nesting the <code> tag inside the <pre> tag (<pre><code>...</code></pre>), you get the best of both worlds:

  1. The text is displayed with its original indentation and line breaks thanks to <pre>.
  2. The text is semantically marked up as code thanks to <code>, which can be useful for SEO and accessibility, and also allows for styling specific to code blocks (like syntax highlighting via CSS or JavaScript).

Practical Examples

Here are examples demonstrating how to use these tags:

1. Using <pre> alone (Preserves formatting):

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

2. Using <code> alone (Semantic meaning, less useful for multi-line blocks):

<p>The `&lt;p&gt;` tag is used for paragraphs.</p>
<p>Use the <code>console.log()</code> function in JavaScript.</p>

Note: When displaying HTML tags themselves within <code>, you often need to use HTML entities like &lt; for < and &gt; for > to prevent the browser from interpreting them as actual tags.

3. Using <pre> and <code> together (Recommended for multi-line code blocks):

<pre>
<code>
def calculate_area(radius):
  pi = 3.14159
  area = pi * (radius ** 2)
  return area
</code>
</pre>

Benefits of Using <pre><code>

Employing the <pre><code> combination offers several advantages:

  • Readability: Code is displayed clearly with proper indentation and structure, making it easy for visitors to read and understand.
  • Accessibility: Screen readers and other assistive technologies can better interpret the content when it's semantically marked as code.
  • SEO: Search engines can potentially understand that the content is code, which might be relevant for indexing tutorials or technical documentation.
  • Styling: You can easily apply CSS rules to style the code block specifically, including adding background colors, borders, or implementing syntax highlighting.

Summary of Tags

Tag Purpose Key Feature Typical Font
<pre> Preformatted Text Preserves Whitespace Monospaced
<code> Defines Computer Code Semantic Meaning Monospaced
<pre><code> Displays multi-line code with formatting Combines both Monospaced

By utilizing the <pre> and <code> tags correctly, you ensure that code examples on your web page are presented clearly, accurately, and accessibly.

Related Articles