How to Display HTML Code in a Blog Post

Sometimes when you are creating a page, you want to include the code that you used to be able to share with others.
For example, if you wanted to know what the specific HTML tags are to create headings and paragraphs, I couldn't just type them in because the program would interpret them as code and process them as such.
So, how to display HTML code as text? or How do I quote HTML code on my blog?
This comes in to play when you want to give someone a blogger award like the one below.

And, now I want to share that code with you.
But in order to do so, I must change some parts of the code to a different piece of code. If you want coding elements to appear as text, you must provide the code equivalent of the characters.

<p>
</p>
<img src="http://www.scrapboxusa.com/ImagesWeb/210x210_Ad_Rachelle_ani_20100712b.gif" border="0" />
<p>
</p>

To make the above code appear as text and not be immediately interpreted as another command to display the above picture I had to make some changes to the code. When a browser happens upon the bracket symbol it knows to begin code interpretation. The way around that is to feed the browser the code that displays instead the symbol as text. This is done by replacing the symbol with its code equivalent.

Replace "<" with "&lt;" (without the quotes, and yes, that is a lowercase "L")
Replace ">" with "&gt;" (again, without the quotes.)

Additionally, I found via this forum, that it is good coding practice to enclose the code you want to appear as text with the <code> tags. This way, if your page is ever translated, some browsers will just skip over the section and not waste time trying to translate a section not intended nor needed.

Here is a great resource page for any web programming language.
http://www.w3schools.com/default.asp

A final note, the <p> and </p> tags just create a paragraph break. If you don't want the extra paragraph break you can omit them. If you wanted a line break, use a "b" instead of the "p".