HTML <listing> Tag

What You’ll Learn

By the end of this tutorial, you’ll understand what <listing> was for, why it is obsolete, and which modern tags to use instead.

What Is the <listing> Tag?

The listing element (<listing>) was an early HTML tag for displaying preformatted text — especially code listings. Text inside listing was rendered in a monospaced font with whitespace and line breaks preserved, similar to how <pre> works today.

The name listing refers to a “code listing” or text listing — not an HTML list like <ul> or <ol>. For actual lists, use <li> inside list containers.

📝 Syntax

Historically, listing wrapped preformatted content with opening and closing tags:

<listing>
Your preformatted text or code here.
</listing>

Syntax Rules

• Requires both opening and closing tags — not a void element.
• Preserved whitespace and line breaks inside the element.
• No standard attributes were defined for listing.
• Do not use in new HTML — use <pre> instead.

⚖️ <listing> vs <pre>

⚖️ <listing> vs List Tags

Do not confuse listing with list elements — they are unrelated despite similar names:

Examples Gallery

Legacy listing usage and the modern <pre> and <code> replacements you should use instead.

function exampleFunction() {
    return "Hello, World!";
}

<listing>
function exampleFunction() {
    return "Hello, World!";
}
</listing>

<pre>
function exampleFunction() {
    return "Hello, World!";
}
</pre>

function exampleFunction() {
    return "Hello, World!";
}

<p>Use the <code>console.log()</code> function to print messages.</p>

<pre>
  <code>
function exampleFunction() {
    return "Hello, World!";
}
  </code>
</pre>

♿ Accessibility

Modern code presentation is more accessible than legacy listing:

• Use semantic <code> — screen readers can identify inline code snippets.
• Wrap blocks in <pre><code> — clearer structure than obsolete listing.
• Ensure sufficient contrast — style code blocks with readable foreground and background colors.
• Allow horizontal scroll — use overflow-x: auto so long lines do not break layout on small screens.

💡 Best Practices