HTML tag that causes other tags to be rendered as plain text

Question

I'd like to add an area to a page where all of the dynamic content is rendered as plain text instead of markup. For example:

  <myMagicTag>
      <b>Hello</b> World
  </myMagicTag>

I want the <b> tag to show up as just text and not as a bold directive. I'd rather not have to write the code to convert every "<" to an "<".

I know that <textarea> will do it, but it has other undesirable side effects like adding scroll bars.

Does myMagicTag exist?

Edit: A jQuery or javascript function that does this would also be ok. Can't do it server-side, unfortunately.

Answer 1

You can do this with the script element (bolded by me):

The script element allows authors to include dynamic script and data blocks in their documents.

Example:

<script type="text/plain">
This content has the media type plain/text, so characters reserved in HTML have no special meaning here: <div> ← this will be displayed.
</script>

(Note that the allowed content of the script element is restricted, e.g. you can’t have </script> as text content (it would close the script element).)

Typically, script elements have display:none by default in browser’s CSS, so you’d need to overwrite that in your CSS, e.g.:

script[type="text/plain"] {display:block;}

Answer 2

The tag used to be <XMP> but in HTML 4 it was already deprecated. Browser's don't seem to have dropped its support but I would not recommend it for anything beyond quick debugging. The MDN article about <XMP> lists two other tags, <plaintext> and <listing>, that were deprecated even earlier. I'm not aware of any current alternative.

Whatever, the code to encode plain text into HTML is pretty straightforward in most programming languages.

Note: the term similar means exactly that—all three are designed to inject plain text into HTML. I'm not implying that they are synonyms or that they behave identically—they don't.