standard logo    Personal Education

Home > Programming > HTML > Displaying Code on a Web Page

Note:
This page is a note for me. If it is helpful to you, great.

Because web browsers are designed to interpret HTML tags, it isn't easy to show web code on a web page. I have typically resorted to faking a tag's left bracket (<) by writing &lt;p> to fool the browser to show a paragraph tag (<p>), for example. Without that trickery, my Firefox browser would attempt to start a new paragraph right in the middle of that last sentence!

Reminder: &lt; is an example of an HTML entity. HTML Entities are special characters, most of which are not found on the keyboard.

Another way to expose the code of an underlying script involves using a <textarea> element. I found a recommendation to use the combination of a form and textarea as an effective code display method.

The biggest benefit is that the code need not be reworked in any way. Whatever characters are needed will simply display as-is.

It is necessary to set the row and column numbers of the text area to fit the code to show or there will be scrollbars to accommodate the excess code. The default textarea size is pretty small. The textarea object has a resizing capability built into it, so if I miss the size, a person can adjust the text area size on their own by dragging the bottom right corner of the text area inside the browser window. Go ahead, try it.

There is a drawback! Although the text area can display all the HTML tags, the textarea is live. You can accidentally type into it! I expect, I won't be using this textarea method.