How to Show HTML Code in Blogger Posts

You'll likely want to display HTML tags in your Blogger post if you want to write an article that illustrates how to use HTML. However, if you insert HTML tags directly into the Blogger post, the code you want to show either will disappear as it's interpreted instead or you'll get errors telling you that the tags aren't allowable.

Luckily, there are a couple of workarounds for this: 1) using a container created with the textarea form element to hold your code or 2) using HTML escape characters.

Inserting a textarea Form Element Into Your Blogger Post

I find the quickest and easiest way to insert HTML for display in a Blogger post is to place it in a textarea form element like so:



I produced the box containing the code by switching from "Compose" mode to "Edit HTML" mode in the Blogger editor and inserting the following HTML code:

<textarea cols="35" rows="1"> YOUR TEXT AND HTML HERE ... </textarea>

Using HTML Escape Characters
Next I will provide an example below of how use HTML escape characters to display HTML code in a Blogger post. (To match up HTML tags with their associated escape code, see this listing of HTML escape characters.)

To produce the less than and greater than symbols that enclose HTML tags, you would use &lt; and &gt;, respectively.

So a literal typing of code to produce <p> — the HTML opening paragraph tag — would look like &lt;p&gt;. As you can see, using escape characters is cumbersome and would be complicated if you're trying to display a lot of markup code.

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.