Jun | 01 | 2007

Make Your Blog Posts Readable

Posted by Sophia as Blog Tutorial, Tips, Writing

Blog posts are different from paper-based readables in that they’re relatively uncomfortable to read (especially the longer ones). Not every one of your visitors is likely to sit through everything you have to say. Statistically, people only skim the length of the page in order to decide whether the piece is useful to them or not. Also make sure they’re still easy to read if your visitors have enough patience to take in every single word (so they won’t have a headache after).

The key idea here is to divide your paragraphs and sentences into easily digestible chunks. Second, HTML is your friend: I’ll be mentioning several tags you can put to good use. Off we go:

Make a meaningful title, introduction, and conclusion

The title should properly summarize the whole post. Don’t hesitate to make them catchier if need be, but keep them logical and truthful. (“How to Lose Weight By Doing Nothing” should be backed up properly if you really mean it!)

Your introduction, on the other hand, should hook your reader immediately as it is also the first thing he sees. Finally, your conclusion must make your reader remember what he just read.

Divide your post into logical sections and use headers to label each one

This should come easy if you start writing your post based on a preconceived outline. Rather than using <strong>, <b>, <i>, <em> use HTML headers <h1>, <h2>, <h3>, <h4>, <h5> <h6>. The larger the number, the lower the rank. Lower-rank headings should always fall under higher-rank headings. Remember to keep your headings parallel!

Add anchors and link to them

You can make people scoot over to a section of your text using a “local link”. Just name your sections using the id attribute and link to them. For example:

<h3 id="section1">Section 1</h3>
<p>Refer to <a href="#section2">Section 2</a> for details...</p>

<h3 id="section2">Section 2</h3>
<p>As mentioned in <a href="#section1">>Section 1</a>...</p>

Use lists whenever you can

If you can simplify your paragraphs or sentences into a list of parallel ideas, use a list. For example:

Why I Don't Want To Go To School Today
<ul>
     <li>My dog ate my homework.</li>
     <li>I have a bad cold.</li>
     <li>The cafeteria food stinks.</li>
</ul>

Use <ul> for unordered lists and <ol> for ordered lists. Another type of list is the definition list, which helps you define a set of terms systematically. For example:

A Mini L33T Dictionary
<dl>
     <dt>LOL</dt>
     <dd>Laugh Out Loud</dd>
     <dt>JOO/J00</dt>
     <dd>You</dd>
     <dt>ROTFL</dt>
     <dd>Rolling On The Floor Laughing</dd>
</dl>

Add illustrations to drive the point home

You can never go wrong with adding a meaningful picture to your post. Whether it’s a pie chart, a photo, or a caricature, so long as it’s makes sense within the context of the piece, insert it! Make sure the image is in the proper place and is also readable (it shouldn’t be too small or too big for the page).

(Learn how you to find free stock photos and how to use the image tag’s attributes.)

Emphasize and distinguish important words and phrases in your text

Here are several important HTML tags that can help make your text more meaningful:

  • <em> and <strong> to stress important words
  • <blockquote> and <q> to quote text (<blockquote> for multiple paragraphs, <q> for inline quotes)
  • <cite> to refer to the body of work (article, book, movie, website) you have quoted
  • <dfn title="meaning"> to identify a term the first time it is mentioned (e.g. they call it a blog)
  • <abbr title="unabbreviated text"> and <acronym title="acronym meaning"> to identify and spell out acronyms (e.g. NASA)
  • <code> to distinguish computer code (<var> for variables in computer code, <samp> for output in computer code)

I seem to have mentioned a lot of HTML tags in this post. Don’t be intimidated! The easiest way to understand and feel at ease with markup is to use it more often. That, coupled with a very readable post, should keep your visitors coming back for more.

Related Articles

Comments (11)

11 Responses

  1. Benj Espina

    01|Jun|2007

    Blog Tutorials is just so full of synergy (trackbacks and all).

    The bullets are starting to kill me. haha

  2. jangelo

    01|Jun|2007

    Yeah, ‘em dern bullets. Actually, we’re trying to resolve some formatting issues, including bullets.

  3. Geo

    01|Jun|2007

    Cool tips. I like the and tags the most. I never knew such things exist. :P

  4. Geo

    01|Jun|2007

    Eh? The tags didn’t show in my previous message. Anyway, I was referring to the dfn and acronym tags

  5. Ia Lucero

    01|Jun|2007

    Geo, if you don’t use the tags to enclose text, they don’t show up. :)

  6. Geo

    01|Jun|2007

    Haha my bad. Man, I really need to learn webbie stuff. This is a good place to learn some basic stuff though.

  7. Ia Lucero

    01|Jun|2007

    Okay, here’s a tip, if you want to display tags that you don’t want to “use”, you need to know the HTML character entity for HTML less than and greater than signs, as in, &ltTAG&gt. Less than and greater than signs are some of the “reserved words/symbols” in HTML, if you catch my drift. ;)

  8. Geo

    02|Jun|2007

    Reserved words… now I get it. Thanks :)

  9. Ia Lucero

    03|Jun|2007

    I was hoping you would. ;) Hurrah for both of us.

  10.   Tweaking your blog’s HTML? Avoid these horrible tags! by Blog Tutorials

    17|Jul|2007

    [...] If you’ve been blogging for sometime now, you would have tinkered with HTML several times of already. In fact I’ve shown how you can use several HTML tags to make your posts more readable. [...]

  11. Writing Links 23 June 2007 : Get Paid to Write Online

    09|Nov|2007

    [...] Make your blog posts readable from BlogTutorials [...]

  


Our Features
  • Design and Themes

    Is Your Blog W3C Compliant?

    Last night I checked my personal blog’s code hoping I can proudly display the W3C Validated Button. Since I use Blogger and do not really do anything to clean up the code (beyond adding Alt-tags to the images I embed) I wasn’t surprised at all to find that my blog contained lots of errors – [...]

    Read on
    More Design and Themes Features
  • Software and Widgets

    Wordpress Plug-ins

    If you blog using Wordpress and can’t do something that you want done like adding Sphere-related content at the end of your blog posts you might be surprised to find out that there are already plug-ins available that make it happen.
    To find good Wordpress plug-ins all you need to do is search for “wordpress [...]

    Read on
    More Software and Widgets Features
  • Reviews

    A Friend In Need

    I’m helping out my friends from the UA&P – IShareHappiness Blog Team.
    Whenever you feel pessimistic, angry, troubled, frustrated, and depressed – what have you – you need someone to talk to. Someone who could help you be more optimistic and help make you feel that there is hope. Sometimes it’s hard to talk to someone [...]

    Read on
    More Blog Reviews
  • Monetization

    Review: Logical Media

    Logical Media is one of the innovative services that pay for ad placement within blogs. Do you have a blog and are you seeking a way to make additional money from the blog? Are you seeking a way to offset other programs with the use of ads? Through the registration with Logical Media, the blogger [...]

    Read on
    More Monetization Features
  • Marketing and Search Optimization

    Search Rank Drop and False Alarms

    Happy Holidays!
    What are the chances of someone being concerned about their blog’s search ranking dropping on Christmas Eve? I have no idea but then again if I’m writing about it right now then there’s probably someone somewhere around the world doing SEO at this very minute.
    If you have experienced a sudden drop in ranking, [...]

    Read on
    More Marketing and SEO Features
  • Blog Resources

    Advertise Here
    Audival
    Colorteck
    WordPress Themes

SUBSCRIBE

CATEGORIES

Bloggy Awards

Blogger Jobs

CONTRIBUTORS

RESOURCES

BLOG METRICS