So you’ve got a great idea for a blog and you’re looking how to execute it. You may not have the budget to hire a web designer and the option of creating a blog with an already made template can kill your creative buzz.
But creating a blog from scratch can seem pretty intimidating. But learning the basics behind HTML can help to tailor your site without the big price tag. Here are some basic tips you need to know to get started on your HTML journey.
Being a blog, the formatting of your text can make or break what people think of your blog. You want your readers to understand the content that you’re pushing out in a clear and formatted manner. Formatting your text helps to distinguish headings, paragraphs and line breaks.
|<b>Bold text here</b>||Bold text here|
|<i>Italic text here</i>||Italic text here|
|<u>Underlined text here</u>||Underlined text here|
To add headers in your blog posts, use the following codes. Keep in mind H1 is the biggest and H3 is the smallest.
|<h1>Heading 1 here</h1>||
Heading 1 here
|<h2> Heading 2 here</h2>||
Heading 2 here
|<h3>Heading 3 here</h3>||
Heading 3 here
You can also change the size of your font by replacing the size with a number between 1, being tiny, and 6 being quite large.
<font size=”4″>Text goes here</font>
Starting a new line
A tiny little code that has a very big impact on your HTML code. Make sure to use this line break to start a new line or two to start a new paragraph.
One of the most frustrating issues when blogging is when an object or text won’t align exactly how you intended it to. Avoid the stress by using one of the following codes:
|<p align=”left”>left object or text</p>||left object or text|
|<p align=”left”>centered object or text</p>||centered object or text|
|<p align=”left”>right object or text</p>||right object or text|
Links are an essential tool as they allow your readers to navigate smoothly throughout your blog. They are also crucial for search engine optimization.
To create a basic text link, replace the link and text into the code shown:
<a href=”http://www.yourlink.com“>Your linked text</a>
To create a link which opens in a new window or tab, use the following code:
<a href=”http://www.yourlink.com” target=”_blank”>Your linked text</a>
Adding an anchor to your link helps readers jump to a particular part of a page with ease. To add an anchor to your link, this can be added with two codes. First you need to place your anchor somewhere in your HTML code. For example if you wanted to link back to the top of the page, your anchor code would be:
Then you need to place the link in the section of the HTML where you want your readers to jump from. For example, at the bottom of the page:
<a href=”#backtotop“>Back to top</a>
Adding images to your blog is basic HTML knowledge for any bloggers. Adding images throughout your blog layout or posts can help add so much to a simple design.
A crucial aspect of any blog, images can make or break your blog for any visitor.
When adding images to your blog, there are a few options to explore what suits your blog best. If you don’t have budget to host your own images online, upload your image to PostImage, Tinypic or Photobucket or any other free hosting site first. Then copy the direct link and paste it into the following code:
If you would like your image to link to another page or website, use the following code with your own direct image link:
<a href=”http://websitelinkhere”><img src=”https://imagelinkhere.jpeg”>
A great way to highlight a quote or something important in a body of text. Insert the following code to add a blockquote:
<blockquote>”Insert quote here”</blockquote>
HTML & SEO
As a blogger you’ve probably heard the words search engine optimisation (SEO) being used before. It’s important to understand what SEO can do for your blog as your HTML can have a massive effect on your SEO. Read our beginners guide to get a full understanding before you start your blog.
Got some questions about HTML for bloggers? Drop your comments below.