When writing instructions for HTML, how do you show the HTML in your post without having the browser “read” it?

When you are typing instructions for how to do something on your blog, it’s extremely helpful to show the actual HTML tags that your readers will need to find and change. Sometimes, though, this is easier said than done. Let’s see if we can help you out.

Typepad

The easiest way I know of to make HTML code show up in your post instead of being read by the browser is to type it in the Compose Post tab. Anything you type in the Compose Post tab (the WYSIWYG editor) will show up in your post. Any HTML you type in the Edit HTML tab will be processed as HTML.

For example, if I type this code directly in my Compose Post tab I get this:

<blockquote style=”border: 2px solid #666; padding: 10px; background-color: #ccc;”> This is some quoted text.</blockquote>

If I type the same code directly in my Edit HTML tab I get this:

This is some quoted text.

Blogger

No matter whether you type your HTML into the Compose tab or the Edit HTML tab it will be processed as HTML and will not show up properly for your readers. There is a work-around, though. You can wrap that snippet of code in
<pre> and </pre> tags OR
<textarea> and </textarea> OR
<code> and </code>

In addition,

&lt; and &gt;

are the HTML for the < and > signs. That way it will display with the < > and the text, but the browser will not read it as code.

WordPress

As with Typepad, putting HTML code into a post under the Visual tab will reproduce the code exactly— except that double and single quotation marks will be converted to “smart” or “curly” quotation marks.  When cut-and-pasted, these quotations marks can sometimes prohibit the code from functioning.

To remedy this, you can use the HTML converter listed in the Blogger instructions above and paste the resulting code in the Code tab.  Inputting HTML code into a post under the Code tab will make WordPress interpret that code as HTML rather than printing it as is.