How to properly display HTML

home » tutorials » How to properly display HTML

Instead of misusing and abusing the poor <textarea> tags use HTML entities and code and pre tags instead.

This is code displayed using a code tag and ASCII HTML codes.

<a href="http://babblative.com">Babblative.com</a> is <strong>my</strong> personal site.

It would look like this if you viewed the source:

&#60;a href=&#34;http://babblative.com&#34;&#62;Babblative.com&#60;/a&#62; is &#60;strong&#62;my&#60;/strong&#62; personal site.

And render as this if you removed the code tags and ASCII bits (to be replaced with HTML) completely:

Babblative.com is my personal site.

If you actually like the look of the textarea then you can style the code tag to look like it:


.scroller {
height:100px;
overflow:auto;
width:70%;
margin:0 auto;
border:1px solid #333;
padding:2px;
margin-bottom:5px;
}

.scroller code{
border:none;
}

Just because you can doesn’t mean you should. Why use DIV’s for a blockquote when there is a tag for quoting handy. Wait, two tags for quoting handy. Why use a DIV to indicate a heading when you could simply use the <h1> (and 2,3,4,5,6) tags?

The best part about using not using a textarea is that you can accidentely delete the code contained within and have to refresh the page. If you’re on a site with a particularly large header (aren’t they all?) with a slow connection (like myself) it can be bothersome. Although the temptation for writing mean things, capping them and spreading them around the internets is, well, tempting.