Blog Post Formatting using Basic HTML for Better UX
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.Warning: DOMDocument::loadHTML(): htmlParseStartTag: invalid element name in Entity, line: 47 in /var/www/html/wp-content/themes/repurpose/functions.php on line 319
Warning: DOMDocument::loadHTML(): Unexpected end tag : h4 in Entity, line: 51 in /var/www/html/wp-content/themes/repurpose/functions.php on line 319
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 |
How to use HTML to Format Blog Posts |
How do I read HTML? |
Three Rules to use when writing HTML tags |
Common HTML tags used by bloggers |
7 Ways to Use HTML to Provide a Better UX |
What is HTML?
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
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.
- An HTML tag can be changed inside
<
pointy>
brackets. - Content goes between two HTML tags
- 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 used | Output | |
---|---|---|
Headings |
<h1>Heading 1</h1> | Heading 1Heading 2Heading 3Heading 4Heading 5Heading 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> |
|
Numbered List |
<ol> |
|
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
- Use Blockquotes to highlight key information and cites
- Use more bullets and numbered lists, Readers love them
- Use italics to emphasise speech
- Use bold to make content scannable
- 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.
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?