Rendering HTML inside textarea
With an editable div you can use the method document.execCommand (more details) to easily provide the support for the tags you specified and for some other functionality...
#text {
width: 500px;
min-height: 100px;
border: 2px solid;
}<div id="text" contenteditable="true"></div>
<button onclick="document.execCommand('bold');">toggle bold</button>
<button onclick="document.execCommand('italic');">toggle italic</button>
<button onclick="document.execCommand('underline');">toggle underline</button>This is not possible to do with a textarea. You are looking for a content editable div, which is very easily done:
<div contenteditable="true"></div>
jsFiddle
div.editable {
width: 300px;
height: 200px;
border: 1px solid #ccc;
padding: 5px;
}
strong {
font-weight: bold;
}<div contenteditable="true">This is the first line.<br>
See, how the text fits here, also if<br>there is a <strong>linebreak</strong> at the end?
<br>It works nicely.
<br>
<br><span style="color: lightgreen">Great</span>.
</div>