#summary Technical details about <pre> and <textarea>.
#labels Documentation

= Technical details about <pre> and <textarea> =

== Problem description ==

The fundamental problem with using `<pre>` is inability to easily copy and paste code into it. In particular this applies to XML/HTML.

The problem with `<pre>` is that browsers parse HTML inside it where as in `<textarea>` they do not. For example:

{{{
<pre><b>Hello</b></pre>
}}}

Will render as *Hello*, where as 

{{{
<textarea><b>Hello</b></textarea>
}}}

will render as `<b>Hello</b>`.

If you try to get HTML from `<pre>` using `innerHTML` property, it's not going to look anything like what you have originally in the HTML file. With `<textarea>` however, a property `value` would return your HTML exactly the same way as you have provided it.

== Conclusion ==

This brings me to the final point. With `<textarea>` you can copy and paste source code without any alterations. *With `<pre>` you have to make sure your source code won't be recognized as HTML, which means you have to replace every opening triangular bracket `<` with it's HTML encoded version `&lt;`. This is enough to make `<pre>` work fine.*