Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

HTML listing tag

Posted in HTML Tutorial
Updated on May 17, 2024
By Mari Selvan
👁️ 13 - Views
⏳ 4 mins
💬 1 Comment
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:

index.html
Copied
Copy To Clipboard
<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

  1. 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.html
    Copied
    Copy To Clipboard
    <listing>
    function exampleFunction() {
        return "Hello, World!";
    }
    </listing>
  2. 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

  1. <pre> Tag:

    The <pre> tag is a modern, supported alternative for displaying preformatted text.

    index.html
    Copied
    Copy To Clipboard
    <pre>
    function exampleFunction() {
        return "Hello, World!";
    }
    </pre>
  2. <code> Tag:

    For inline code, the <code> tag is the appropriate choice.

    index.html
    Copied
    Copy To Clipboard
    <p>Use the <code>console.log()</code> function to print messages to the console.</p>
  3. Combined Use:

    For displaying blocks of code, combine <pre> and <code> for better semantics and styling.

    index.html
    Copied
    Copy To Clipboard
    <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:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

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

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy