You can’t be a blogger and not know some basic HTML. I’m going to show you how to format a blog post and become a blog post formatting master and provide readers with a Better UX.
- 4 minutes read
Blog Post Formatting using Basic HTML for Better UX

Using HTML for blog post formatting isn’t hard and considering first impressions count, especially when it comes to your website and blog, do you not think it’s about time you picked up some basic HTML? Visitors to your blog make instant, subconscious decisions based on feel, formatting and the overall user experience of your website.

Don’t worry, though. There are things you can do to sway the scale in your favour and improve the chances of your readers staying a little bit longer by optimising your blog and formatting your articles with basic HTML.

In this article, you are going to learn how to use HTML to format your blog articles like a pro and keep your readers on your website for longer.

What is HTML?

blog post formatting

Are you wondering what is HTML?

HTML or HyperText Markup Langauge is the language of the internet and is used to give structure and meaning to content on a webpage.

When you format a blog post using HTML, you provide your content with a structure that makes it easy to scan and digest.

HTML tags are used to display different types of content on your website, such as images, videos, sound, text and more.

It may seem complicated and confusing when you look at HTML but, it actually follows some straightforward rules.

If you are wondering what makes things look pretty on the internet, that’s is cascading style sheets (CSS). CSS is like HTML’s non-identical twin.

Bonus: Learn how to style your website with our CSS3 Guide for Absolute Beginners.

How to use Basic HTML to Format Blog Posts

It doesn’t matter if you have a blog on WordPress or Wix, it’s essential you learn how to use HTML to format blog posts so you can provide a great website user experience (UX) to your users and increase the engagement rate of your website.

How to read HTML

How to read HTML diagram

Does this HTML look like gibberish when you look at it? Let’s break it down and take a look at the components of an HTML tag and how to read HTML.

There are many different HTML tags available and the spec is always being updated but don’t worry, you don’t need to learn them all.

Three Rules to use when writing HTML tags

If you follow these three rules when using basic HTML to format your blog posts, you will never write invalid code again.

  1. An HTML tag can be changed inside < pointy > brackets.
  2. Content goes between two HTML tags
  3. When you want to end or close off a HTML tag, include the backslash

Common HTML tags used by bloggers

It would take up a lot of space (and time) showing you Every HTML tag in existence so, I will pick the Most Common HTML tags used by bloggers and list them below for you to blog post formatting requirements.

HTML Markup usedOutput
Headings <h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Paragraph <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Bold <b>This text is now bold</b> This text is now bold
Underline <u>This text is now underlined</u> This text is now underlined
Italic<i>This text is now italic</i>This text is now italic
Link to a website<a href="https://whisperlouder.com">Whisper Louder</a>Whisper Louder
Bullet Points <ul>
 <li>Item One</li>
 <li>Item Two</li>
 <li>Item Three</li>
</ul>
  • Item One
  • Item Two
  • Item Three
Numbered List <ol>
 <li>Item One</li>
 <li>Item Two</li>
 <li>Item Three</li>
</ol>
  1. Item One
  2. Item Two
  3. Item Three

5 Ways to Use HTML to Provide a Better UX

There used to be a time when content spoke to robots instead of humans. Google knew this for a long time and has incrementally rolled out updates to their ranking algorithm that improves their ability to detect a users search intent.

As well as being able to determine what a user is searching for more accurately, Google's search robots have become smart when detecting the user experience of a website or blog. This means that poorly executed blog post formatting can leave you dead in the water.

Heres five ways you can use HTML for a better UX

  1. Use Blockquotes to highlight key information and cites
  2. Use more bullets and numbered lists, Readers love them
  3. Use italics to emphasise speech
  4. Use bold to make content scannable
  5. Use images to break up content

People don't have as much time as they used to anymore, and they want their content to be easily digestible. While it's nice to think that your users read every line of your articles, this is rarely the case - The average person spends just 37 seconds reading a blog post despite the average length of most articles now being 1142 words.

Final Thought

I want to leave you with one question I hope will really get you thinking about how you format your blog articles in the future.

How much of this article did you really read?

Or, did you flick through it and look at key elements formatted with basic HTML tags such as bullet lists, numbered lists, headings and bold text?

Leave a Reply