HTML Topics
- HTML Intro
- HTML Basic
- HTML Editors
- HTML CSS
- HTML Tags
- <!--...-->
- <!DOCTYPE>
- <a>
- <abbr>
- <address>
- <area>
- <article>
- <aside>
- <audio>
- <b>
- <base>
- <bdi>
- <bdo>
- <bgsound>
- <blink>
- <blockquote>
- <body>
- <br>
- <button>
- <canvas>
- <caption>
- <cite>
- <code>
- <col>
- <colgroup>
- <data>
- <datalist>
- <dd>
- <del>
- <details>
- <dfn>
- <dialog>
- <div>
- <dl>
- <dt>
- <em>
- <embed>
- <fieldset>
- <figcaption>
- <figure>
- <footer>
- <form>
- <h1> to <h6>
- <head>
- <header>
- <hgroup>
- <hr>
- <html>
- <i>
- <iframe>
- <img>
- <input>
- <ins>
- <kbd>
- <label>
- <legend>
- <li>
- <link>
- <main>
- <map>
- <mark>
- <menu>
- <meta>
- <meter>
- <nav>
- <noscript>
- <object>
- <ol>
- <optgroup>
- <option>
- <output>
- <p>
- <param>
- <picture>
- <pre>
- <progress>
- <q>
- <rp>
- <rt>
- <ruby>
- <s>
- <samp>
- <script>
- <search>
- <section>
- <select>
- <small>
- <source>
- <span>
- <strong>
- <style>
- <sub>
- <summary>
- <sup>
- <svg>
- <table>
- <tbody>
- <td>
- <template>
- <textarea>
- <tfoot>
- <th>
- <thead>
- <time>
- <title>
- <tr>
- <track>
- <u>
- <ul>
- <var>
- <video>
- <wbr>
- HTML Deprecated Tags
- HTML Events
- HTML Event Attributes
- HTML Global Attributes
- HTML Attributes
- HTML Comments
- HTML Entity
- HTML Head
- HTML Form
- HTML IndexedDB
- HTML Drag & Drop
- HTML Geolocation
- HTML Canvas
- HTML Status Code
- HTML Language Code
- HTML Country Code
- HTML Charset
- MIME Types
HTML listing tag
Photo Credit to CodeToFun
🙋 Introduction
In the early days of HTML, several tags were designed to handle different types of content. The <listing>
tag was one such element used for displaying preformatted text, especially code.
This guide will explore the <listing>
tag, its current status, and best practices for modern web development.
🤔 What is <listing> Tag?
The <listing>
tag was originally used to display preformatted text, particularly code listings. Text within a <listing>
tag would be displayed in a monospaced font, preserving whitespace and line breaks.
🚫 Deprecated Status:
The <listing>
tag is now deprecated in HTML 4.01 and obsolete in HTML5. This means that while it might still work in some browsers, it is no longer recommended for use and may not be supported in future versions.
💡 Syntax
The basic syntax of the <listing>
tag is as follows:
<listing>
Your preformatted text or code here.
</listing>
🧰 Attributes
The <listing>
tag does not support any attributes. It simply formats the enclosed text as preformatted content.
📚 Common Use Cases
Historical Use:
In the past, the
<listing>
tag was used to display blocks of code or other text that required fixed-width formatting and preserved whitespace.index.htmlCopied<listing> function exampleFunction() { return "Hello, World!"; } </listing>
Modern Use (Discouraged):
While you might still encounter the
<listing>
tag in older codebases, its use is discouraged in modern web development.
🖥️ Browser Support
Given its deprecated status, browser support for the <listing>
tag varies:
- Google Chrome: Partially supported (rendered as <pre>).
- Mozilla Firefox: Partially supported (rendered as <pre>).
- Microsoft Edge: Partially supported (rendered as <pre>).
- Safari: Partially supported (rendered as <pre>).
- Opera: Partially supported (rendered as <pre>).
- Internet Explorer: Partially supported (rendered as <pre>).
However, relying on deprecated tags can lead to inconsistent behavior across browsers.
🏆 Best Practices
- Avoid Using <listing>: Due to its deprecated status, refrain from using the
<listing>
tag in new projects. - Use <pre> and <code>: For preformatted text and code blocks, use the <pre> and <code> tags instead.
🔄 Alternatives
<pre> Tag:
The <pre> tag is a modern, supported alternative for displaying preformatted text.
index.htmlCopied<pre> function exampleFunction() { return "Hello, World!"; } </pre>
<code> Tag:
For inline code, the <code> tag is the appropriate choice.
index.htmlCopied<p>Use the <code>console.log()</code> function to print messages to the console.</p>
Combined Use:
For displaying blocks of code, combine <pre> and <code> for better semantics and styling.
index.htmlCopied<pre> <code> function exampleFunction() { return "Hello, World!"; } </code> </pre>
🎉 Conclusion
The <listing>
tag is a relic of early HTML, now deprecated and obsolete. Modern web development practices favor the use of <pre> and <code> for presenting preformatted text and code.
By adopting these modern tags, you ensure better compatibility and maintainability of your web projects.
👨💻 Join our Community:
Author
For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.
Buy me a coffee to make codetofun.com free for everyone.
Buy me a Coffee
If you have any doubts regarding this article (HTML listing Tag), please comment here. I will help you immediately.