How To Format Comments

The purpose of this page is to show you how to use some basic html to format your comments. If you have any html skills you won’t need to read this page as you probably already know more html than I do. But if you’re new to this, I hope the following will help.

So why would you want to format your comments? Why can’t you just type your comment and press “Post”? Well, you can just do that. But sometimes, adding a little formatting can make your post easier to understand. For example, if you are replying to someone else’s post, you might want to quote the person you are replying to, and indent their text so it is clear which is their words that you are replying to and which is your reply. That makes it easier for anyone reading the post to understand the point you are making. And you obviously want people to understand your point, or you wouldn’t be bothering to comment, would you?

So here are some pieces of basic html code that will work in the comments.  You can even copy and paste the code displayed in the boxes below, if that makes it easier. 

NOTE: Please always hit the "Preview" button to check your comment before you hit "Post".  If you post a comment and have made a mistake in the html, your comment will not appear the way you wished it to.  If you make a mistake and still post your comment, you may email me and I can edit out mistakes if you ask me to, but I may not be available to do that quickly.  "Preview" is your friend.

Bold

To make text appear in bold, enter the following:

<b>This is Bold text</b>

This will display as:

This is Bold text

Note that all html is surrounded by these brackets: <>.  In the cased of the "bold" code, which is the letter "b", the brackets surround the "b" to give <b>.  Note that the <b> code starts the bold, but that </b> ends the bold code.  The end code is exactly the same as the code that starts it, but with the addition of a forward slash: "/". 

Please remember to end all your codes this way (with the /code), or the formatting will continue for the rest of your comment and the next person's comment too.  You don't want the rest of your comment to be in bold, do you?

Also, please note that there is no space between the characters in the </b>.  If you leave a space anywhere, it will not work. 

Italics

Italics are the same as bold, except you use the letter "i" instead of the "b".  Enter:

<i>This is Italic text</i>

This will display as:

This is Italic text.

Hyperlinks

If you just enter the url of the site you are referencing, it won't appear as a clickable link, and if it is too long it won't all appear.  It is much better to format your link so it displays as text.  The format for doing this is:

<a href="Insert URL here">Insert TEXT Here</a>

Insert the url and the text you wish to display in the places shown.  Use the example exactly as I have shown it above, including the " " quote marks around the url, and the space after the <a at the beginning.  Do not leave any additional spaces.

For example, if you wanted to show my post on "What The Bleep,"  with the text reading "What The Bleep Do We Know,"  you would enter:

<a href="http://skeptico.blogs.com/skeptico/2005/04/what_the_bleep_.html">What The Bleep Do We Know</a>

This will display as:

What The Bleep Do We Know.

Click the link and it will take you to the post at the url shown.

Quoting / Indenting

The code used here is "blockquote":

<blockquote>This is indented text, used for quoting someone else’s writing.</blockquote>

This will display as:

This is indented text, used for quoting someone else’s writing.

Bulleted Lists

The codes used here are “ul” and “li”:

<ul> <li>First Bulleted Item</li> <li>Second Bulleted Item</li> <li>Third Bulleted Item</li> </ul>

This will display as:

• First Bulleted Item
• Second Bulleted Item
• Third Bulleted Item

Numbered Lists

The codes used here are “ol” and “li”:

<ol> <li>First Numbered Item</li> <li>Second Numbered Item</li> <li>Third Numbered Item</li> </ol>

This will display as:

1. First Numbered Item
2. Second Numbered Item
3. Third Numbered Item

Combining Codes

You can combine html code - for example, bold and blockquote together.  I've recently started doing this when quoting a comment I'm replying to.  I find that this distinguishes the comment I'm replying to from an external article I might be quoting elsewhere.  For example:

<blockquote><b>This is BOLDED AND INDENTED text that I use for quoting someone else’s comment that I am replying to.</b></blockquote>

This will display as:

This is BOLDED AND INDENTED text that I use for quoting someone else’s comment that I am replying to.

Obviously you don't have to quote the post you are replying to in this way if you have a better way, but I find it works quite well.  Don't forget to end both the "b" and the "blockquote" codes with their individual "/" end tags.

If It Doesn't Work

If it doesn't display as you intended, you need to debug the code.  The most common errors are leaving spaces where they're not supposed to be (for example typing </ b> instead of </b>), and not closing a tag properly (for example ending a <b> tag with an </i> instead of a </b>).  Check it carefully - the error is there somewhere.

Other Ideas

The above techniques will work fine for short comments.  If you are planning to write many long comments, you might want to consider using a WYSIWYG writer such as Windows Live Writer which can be downloaded for free.  It's what I've been using recently to write all my posts, and it works pretty well.  Remember, the html allowed in blog comments is limited to (I think) just the examples I've given above.  Most more advanced html just won't work in comments.  If anyone knows of any other html I've missed that does work in the comments, please let me know and I'll add it to the description.

A final point - TO REPEAT - please check your results by pushing the "Preview" button before you post.  If you really mess it up you can email me and I can edit out any really bad errors, but it's better if you do it yourself, at the time you make the comment.

Return to Skeptico main page

Comments

[David Mackintosh]

<blockquote><b>This is BOLDED AND INDENTED text that I use for quoting someone else’s comment that I am replying to.</blockquote></b>

Strictly speaking, the tags should be closed so that they make matched, non-overlapping pairs; so for your example above it should really be

<blockquote><b>This is BOLDED AND INDENTED text that I use for quoting someone else’s comment that I am replying to.</b></blockquote>

If you don't do this, there is a chance that the comment may not be formatted as you'd like it in all browsers.

So what if you want to mix tags? For example, have some italicized text with non-italicized text following it, with some subset bolded, say like this:

This text is italicized; this text is both italicized and bolded; this text is just bolded; this text is neither.

This should be written to close the bold tag within the italicized tag, then re-bold outside it, like so:

<i>This text is italicized; <b>this text is both italicized and bolded;</b></i> <b>this text is just bolded;</b> this text is neither.

[Skeptico]

David;

Thanks - I didn't know that. It all looks the same in my browser, but I know that some browsers render differently. Anyway, I altered my example to agree with your correction, so that if anyone copies it they'll be copying the correct code.

[Skemono]

I just noticed... in the "Bulleted Lists" section, you correctly state that the "codes used here are 'ul' and 'li'", but your example uses 'ol' instead of 'ul'.

[Skeptico]

Skemono:

You're right - dammit! I added those two sections later and I guess I just copied over the code and forgot to edit it. Oops!

Fixed now. Thanks for spotting that.

[Alford Vassall Jr MD]

Off topic comment deleted by Skeptico.

Alford Vassall Jr MD, please read the Comment Guidelines

[King of Ferrets]

...I have absolutely no idea what that is. It's not linking a bunch of crap, so it's not spam. It's not an actual comment, since it doesn't actually say anything that even approaches coherence. What is it?

[Nico]

A small question, how do you cross out text?

[Skeptico]

Nico:

<strike>cross out</strike> will give you:

cross out

[Nico]

thanks

[Aryol Prefabrik Yapi]

Thanks for adding this info to your site some people really don't know how their comment should be.