Sweet ‘n Simple HTML: Use those codes for Comments

Surely no one can call you a ‘dummie’ if you have one or two html tricks up your sleeves.  You may have noticed that  many comment boxes state:

“  some HTML allowed: img code em strong ul ol li “

This gives you the go-ahead to use html codes to make your comments stand out even more.  This post gives samples for these seven sweet and simple tags.

Each example shows what you type directly into the comment form and how it appears after you press the Submit button.

Add an image

Every want to add a photo to a BlogCatalog  discussion? What about inserting one in a comment you leave on someone’s blog? Just use the ‘img‘ tag, substituting your image url in the src=” ” attribute. Your image must exist already on a publicly accessible host.  Unless there is a preview feature, you will not see the image until you submit the comment. So make sure it’s not that photo you keep forgetting to destroy!

EXAMPLE -To show our logo image:

Hi everyone this our header logo
<img src=”http://bloggingwithsuccess.net/wp-content/uploads/2009/03/logo-bws1.png”>

This is what readers see:

Hi everyone this our header logo

Add preformatted html code

Sometimes you want to show html code in the comment. This tag tells the website editor to not use it as html, but display the text version. Everything between the opening code and end tag is ignored.  This requirement is common in tuturial posts, where you want the tags to be plain text that readers can copy and paste into their html editors.

EXAMPLE -  I want to tell a discussion group how to add an image:

Use this tag to display your logo, substituting your url for mine:
<code>
<img src=”http://bloggingwithsuccess.net/wp-content/uploads/2009/03/logo-bws1.png”>
</code>

This is what readers see:

Add Emphasis to selected words

The two codes ‘em’ and ’strong’ work the same way to add ‘emphasis’ or ’strongness’ to words in your text.  The rest of us call this italics and bold!

EXAMPLE -Emphasize and strengthen certain words:

I could not <em>emphasis</em> this any more, you must be <strong>stronger</strong> in your approach!

This is what readers see:

Add numbered or bulleted lists

Not many of us will use this, but here the mechanics are the same. First decide if you want your points in an ordered (‘ol’) or unordered (‘ul’) list. Each requires a matching end tag and line items for the list (‘li’).

EXAMPLE -an unordered list with 2 elements:

My list consists of <ul>
<li>First things first</li>
<li>Second things next</li>
</ul>

This is what readers see:

That’s it. You’ll be smart to learn a few of these tricks.  For more detail,  read our background on CSS/HTML for the beginners. Give it a try and let us know how it worked.