Include Html Code Within a Blog Post

Posted on 05 December 2008 by the Author

Maintaining a blog is not a big deal. Most people know how to publish a post in a blog. I ever been using blogspot blogs for quiet a long time. Whenever we publish post, we can see the source code means html code for the posts. In blogspot we can see the html edit section also.

Some days before I was trying to publish a post regarding html code that gives a particular result. But whenever I tried to put that code in my post, it was showing the result. My aim was to show that particular html code group as a new post.

I know the result that will be getting after using the html code. But I want share the code with others by including Html Code with in a blog post. So what to Do? I know you people also may face this same problem.

So in the following section I am going to give you the very useful tip to Include Html Code Within a Blog Post

HTML Entities

HTML entities (also known as character entity references) enable you to use characters that aren’t supported by the document’s character encoding or your keyboard. For example, you can type © to output a copyright symbol.

You can also use numeric character references. Numeric character references can be defined with either a decimal or hexadecimal value (although decimal is more common). The numeric character reference for the copyright symbol is © (decimal) and © (hexadecimal).

A key benefit that numeric character references have over entities is that they can be used to specify any unicode character, whereas entities can only specify some.

Entity Example

Many web developers use entities for outputing HTML code to the browser (or at least, outputing one of the characters used by the HTML language).

Lets say you have a website about web design. And lets say you want to display the tag required for creating a horizontal rule 20% wide. Well, if you type the tag (<hr width=”20%” />) into your code, the browser is simply going to render it as it should be (rather than output the actual code example). Like this…


… you see, instead of displaying the code, the browser rendered the code.

What you should have typed in is this:

&lt;hr width="50%" /&gt;

The &lt; replaces the < and the &gt; replaces the >.

The following table lists HTML special characters that you can use.

To do this… Type this… Or this… Description
   &lsquo; left single quote
   &rsquo; right single quote
   &sbquo; single low-9 quote
   &ldquo; left double quote
   &rdquo; right double quote
   &bdquo; double low-9 quote
   &dagger; dagger
   &Dagger; double dagger
   &permil; per mill sign
   &lsaquo; single left-pointing angle quote
   &rsaquo; single right-pointing angle quote
   &spades; black spade suit
   &clubs; black club suit
   &hearts; black heart suit
   &diams; black diamond suit
   &#9733; black star
   &#9734; white star
   &oline; overline, = spacing overscore
   &larr; leftward arrow
   &uarr; upward arrow
   &rarr; rightward arrow
   &darr; downward arrow
   &trade; trademark sign
&#00;-
&#08;
unused
&#09; horizontal tab
&#10; line feed
&#32; space
!   &#33; exclamation mark
   &quot; &#34; double quotation mark
#   &#35; number sign
$   &#36; dollar sign
%   &#37; percent sign
&   &amp; &#38; ampersand
   &#39; apostrophe
(   &#40; left parenthesis
)   &#41; right parenthesis
*   &#42; asterisk
+   &#43; plus sign
,   &#44; comma
-   &#45; hyphen
.   &#46; period
/   &frasl; &#47; slash
0 - 9 &#48;-
&#57;
digits 0-9
:   &#58; colon
;   &#59; semicolon
<   &lt; &#60; less-than sign
=   &#61; equals sign
>   &gt; &#62; greater-than sign
?   &#63; question mark
@   &#64; at sign
A - Z &#65;-
&#90;
uppercase letters A-Z
[   &#91; left square bracket
\   &#92; backslash
]   &#93; right square bracket
^   &#94; caret
_   &#95; horizontal bar (underscore)
`   &#96; grave accent
a - z &#97;-
&#122;
lowercase letters a-z
{   &#123; left curly brace
|   &#124; vertical bar
/   &frasl; &#47; slash
°   &deg; &#176; degree sign
±   &plusmn; &#177; plus or minus
²   &sup2; &#178; superscript two
³   &sup3; &#179; superscript three
´   &acute; &#180; acute accent
µ   &micro; &#181; micro sign
   &para; &#182; paragraph sign
·   &middot; &#183; middle dot
¸   &cedil; &#184; cedilla
¹   &sup1; &#185; superscript one
º   &ordm; &#186; masculine ordinal
   &raquo; &#187; right angle quote
¼   &frac14; &#188; one-fourth
½   &frac12; &#189; one-half
¾   &frac34; &#190; three-fourths
¿   &iquest; &#191; inverted question mark

Related posts:

  1. Cool Widgets for Your Blog
    Widgets are a simple way to add some flare to...
  2. Hack Facebook Tutorial
    I see there are a lot of people who ask:...
  3. Wordpress Theme for Adsense Optimized
    As you know, one goal these people have in common...
  4. Free Download UBD Moneymaker Theme (WP Premium)
    The JohnChow’s theme designer (UniqueBlogDesign) has just recently released their...
  5. Buka Private Photo Friendster (EXPIRED!)
    >> Pertama-tama, buka profil friendster korban (dalam hal ini, saya...


3 Comments For This Post


  1. vetra99 Says:

    very useful and nice explanation. :)

  2. synchronize Says:

    thanks, nice tutorial ..
    love your blog! :lol:

  3. richard Says:

    thanks for your info.
    i’m always confused to make a tutorial post with a lot of code/script. :(


Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Advertise Here
Advertise Here



Exchange Link




Just copy & paste the code above on your blog/website and let me know, so i can link back your blog/website.

Visitors Stat




free counters

Make a Donation


Please donate cremonti.com

Please donate us to keep the blog stay alive!

Instant Message


Blog Statistic