Blog/HTML Etiquette

I hope you all like what I’ve done with the place. I found a little extra time, here and there, and got a few ideas, and learned a few tricks for generating icons… and Voila!

Now that we have a pretty (in my humble opinion) good look to our site, I think it would be swell to have our posts reflect the same level of formatting polish.

Due to Blogger’s special little quirks, and the fact that most better services are not free, there have to be two forks in this guide—one for posts, and one for comments. This is due to the fact that the “Convert Line Breaks” setting is applied to both posts and comments. I find this to be quite perplexing, especially since Blogger doesn’t allow the use of paragraph (<p></p>) tags in comments—thus necessitating the need for converting line breaks… unless we want to end each paragraph of a comment with two <br> tags.

So, here’s my quick and handy guide to making your post formatting spot-on:

In posts:
Posts should use paragraph tags, as this will ensure proper formatting, and aid in the indexing of the pages for search engines, etc. Because of the “Convert Line Breaks” setting, there can be no “hard returns” after you close a paragraph, else there be an extra, awkward space after each:

Example:
<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>

Displays like this:

This is my first paragraph.

This is my second paragraph.

While:
<p>This is my first paragraph.</p><p>This is my second paragraph.</p>

Displays as the text should be formatted:

This is my first paragraph.

This is my second paragraph.

Additionally, items such as <ul>s and <ol>s need to follow the same rules: no hitting enter after closing a tag. Blogger will insert spaces, and make everything look awkward.

Another useful tip for quoting people is to use the <blockquote></blockquote> tags. This makes a handy little indentation on either side of a quote, which does an excellent job of differentiating between your own content and someone else’s. I can, taking it a step further, add styling to this through the stylesheet—so that all you have to do is use the <blockquote> tags, and it can appear in a different size, italics, and lighter color (just as an example).

Lastly, I would like to establish a rule either for or against styling our own posts. I have no strong feelings one way or another… but if individual style aren’t going to be ruled out, I want to develop styles for everyone who wants one, so instead of:

<p style="color: #ff7700; font-size: 123%; font: 'Trebuchet MS', Georgia, Times New Roman, Times, serif;">Here’s my personal style.</p>

Displaying:

Here’s my personal style.

You can just use:
<p class="myStyle">Here’s my personal style.</p>

And it can still display:

Here’s my personal style.

Now, on to comments:
For the most part, people aren’t having any problems with comments. There have been a few.

Comments are where the “Convert Line Breaks” rule works in our favor: hitting enter twice will put one blank line between our paragraphs in comments. The use of bold, italics and underline tags (<b>, <i>, <u>, respectively) is allowed in comments, but little else, from my exploration.

If I find new and better ways to format comments, I’ll be sure to come out with another how-to for them.