Blog

HTML Coding Basics for Bloggers and Content Marketers

Author
Victoria Affleck | 23 Nov 2018

Digital marketing executive. Creative wordsmith with an inventive mind. Partial to a brew, or two.

If you are a frequent user of WordPress or other Content Management Systems, you will know that some formatting doesn’t always go to plan, whether it be copy and pasted text not appearing correctly, or bullet points with irregular spaces. These problems, albeit small, can take an awful lot of time to resolve, which many of us simply do not have. However, these kinds of issues can be easily rectified through editing basic HTML text code on your own, or a client’s, blog. Therefore, if you are a content marketer or blogger, you would know that content and code go hand-in-hand, so knowing the HTML coding basics can be incredibly helpful.

We won’t sugar coat it for you, learning how to edit blog HTML is not easy. But remember, you don't necessarily need to know how to build an entire website from scratch as this can be incredibly complicated. Instead, having basic HTML knowledge will allow you to have more control over your content’s appearance - our web design team manager, Louie Pelicano, agrees.

He suggests that "all bloggers should know how to write in HTML as it will give them the freedom to design and structure their blog exactly how they want. They won't be constrained to a predefined, boring design", which is so important for creating engaging content and search engine optimisation, such as reducing bounce rates

Once you know the basics, you can conquer the world.

  Photo credit: Leszek Czerwonka / Shutterstock

HTML Coding Basics: A beginner’s guide to HTML 

If you’ve never pressed the ‘Text’ or ‘Source’ button before, when uploading a blog post on your site, it will – without a doubt – look very intimidating at first glance. However, despite this, it’s really not as hard as it looks. Once you have a basic understanding of HTML and CSS coding, there are a number of scenarios that can be tackled with ease and confidence. 

Some of these include: 

- Edit blog formatting

- Create and edit hyperlinks

- Control paragraph structure

- Fix broken lists

- Build tables

- Remove unwanted spacing


CONTENTS

1. What are the basic HTML tags and how to use them?
        - Headings
        - Bold
        - Italics
        - Underline
        - Paragraph
        - Line break
        - Quote
        - Lists
        - Photo
2. How do you make a hyperlink in HTML?
        - How about a no-follow link?
3. How to create a link to jump to a specific part of a page in HTML
4. How to add table of contents in HTML
        - The basic HTML code templates
5. How can adding a table of contents help with SEO?
6. A basic HTML coding cheat sheet (Downloadable)


1. What are the basic HTML tags and how to use them 

  Photo credit: Rawpixel.com / Shutterstock

Using my previous post, “SEO basics for bloggers”, as an example of basic HTML code, here are some ways to help you understand the simple HTML coding basics: 

- Headings

HTML includes six different levels of headings, from H1 (the main header) to H6 (the smallest sub-header). For search engine optimisation (SEO) purposes, it is important to only use one H1 tag per post, which is generally speaking the post title and is created automatically. In the rest of the post, it is worth considering adding multiple subheadings where appropriate (H2, H3 and so on) to help break up the text and make the post flow smoothly. 

Each heading tag is formatted as follows:

<h1>heading 1</h1>

<h2>heading 2</h2>

<h3>heading 3</h3>

<h4>heading 4</h4>

<h5>heading 5</h5>

<h6>heading 6</h6>

In SEO terms, the H2 headings hold the most power to Google, so make sure each main heading in the post, after the main H1 tag, is formatted as: <h2>___</h2>. You can find out more about how to do search engine optimisation for your blog in our ’SEO basics’ post.

- Bold

If you would like to make text bold, make sure you include <strong> at the beginning and end of the word or sentence. Over the years, there has been some confusion between which HTML tags to use for bold text, is it <strong> or <b>? However, the <b> tag is now redundant so ensure when you are boldening text, it is formatted as follows: <strong>Insert text here</strong>

For example: 

<strong>Search engine optimisation (SEO) is the practice of increasing the quantity and quality of traffic to your website through organic search engine results.</strong>

For search engine optimisation, making specific text bold can be important as it can tell Google where the important pieces of information are situated in your post – particularly if they contain your post’s focus keyword. However, despite much debate, doing this does not affect ranking on the search engine results page (SERP). Although, it is worth noting that if the keyword is included in bold, often it appears in the SERP snippet, which encourages users to click through to your page. Despite this, it’s important to remember to bear in mind user experience, so make sure not over-do it in your post.  

- Italics

Just like making text bold, to make your text show up in italics font, ensure your text is wrapped in the emphasis tag. To do this, simply just add <em> at the beginning and end of the word or sentence. This is formatted as follows: <em>Insert text here</em>

For example:

<em>Search engine optimisation (SEO) is the practice of increasing the quantity and quality of traffic to your website through organic search engine results.</em>

- Underline

The same principle goes for underlining a piece of text in your post, such as a subheading (H2). To do this, you must include <u> at the beginning and </u> at the end.

For example: 

<u><strong>1. What is SEO?</strong></u>

 Photo credit: 88studio / Shutterstock

- Paragraph

To signify a new paragraph has started, in coding this is shown by including <p> at the beginning and </p> at the end of the piece of text. By doing this, it makes sure that the post formatting is clear and readable, otherwise your post will look like a large block of text which isn't good for user experience. 

For example: 

<p><em>Search engine optimisation (SEO) is the practice of increasing the quantity and quality of traffic to your website through organic search engine results.</em></p>

- Line break

If you'd like to force a space between two lines of content or would like to sort out spacing issues - a common occurance in CMS - consider using a page break. Simply add the <br/> between the two lines of content.

For example:

<p><strong><a href=”#whatisseo”>1. What is SEO? </a></strong><br/>

- Quote

When adding a quote into your blog post, it is worth emphasising it to your readers - especially if it holds value to your readers or is particularly relevant to what your post is speaking about. 

For example: 

<blockquote>
<p><strong>Without optimised content, there is no visibility</strong></p>
</blockquote>

 Photo credit: Who is Danny / Shutterstock 

- Lists

When creating a list, whether it be bullet points or a series of numbered points, it is not uncommon for coding to fail. If this happens, check the coding in the 'Source' and ensure that the coding is correct, as explained below:  

Firstly, writing individual points for your numbered or bullet point list, each point must be wrapped inside <li> and </li> - this stands for "list". 

If you would like to create a numbered list, you must add <ol> at the very beginning of your list (before you write your first point), and </ol> at the very end.

It is the same principle for a bullet point too, just add <ul> at the beginning and </ul> at the end. 

One way to remember this is that <ol> stands for 'ordered list' and <ul> stands for unordered list, which is pretty self-explanatory.

- Photo

Inserting a photograph is often easy, as you can click a button and it is done for you, however, for those times where it is particularly difficult, ensure your code looks similar to the following: <img src="Insert image URL" alt="Insert a description of image"/>

In the "alt" section, you must write a description of the image you are uploading onto your blog post. This is so the text will show if an image file cannot be loaded for any reason.

It can also help with SEO, as alt tags provide better image descriptions to search engines, which helps to index an image properly and may even get your photo ranking on the search engine's image search. It is worth adding your focus keyword 

For example: 

<img src="/uploads/2018/08/24/seo-bloggers.jpg" alt="SEO embossed notepad on a desk"

2. How do you make a hyperlink in HTML?

 Photo credit: Vladimir Badaev / Shutterstock

Have you ever wondered how to link something in HTML? To manually create a hyperlink in your post, that links directly to other pages or posts on your website (internal links) and links that direct to other websites (external links), you will need to use "a href" HTML tags. The format for this looks as follows: <a href=”Insert URL”>Insert anchor text here</a>

Here's an example of an internal link in situ:

<p> Here at Reboot, we <a href=https://www.rebootonline.com/seo-dictionary/>define SEO</a> as: a strategic, persistent improvement to not only raise your website’s Google ranking, but the long-term viability of your website to make sure it stays up to date and free from penalties. </p>

It is slightly different if you would like to add a no-follow link on your post. The template for a no-follow link is: <a href="Insert URL" ref="nofollow">Insert anchor text here</a>

For instance: 

<p> Here at Reboot, we <a href=https://www.rebootonline.com/seo-dictionary/ ref="nofollow">define SEO</a> as: a strategic, persistent improvement to not only raise your website’s Google ranking, but the long-term viability of your website to make sure it stays up to date and free from penalties. </p>

3. How to create a link to jump to a specific part of a page in HTML

Now you know how to add a hyperlink to another web page, internally or externally, the next step is to learn basic HTML coding to create a link to another section within your post. Whether you want to aid navigation for your readers by adding in a “Jump to section 3 to find an SEO checklist” or to lead your readers back to the top of the page, read on to find out exactly how it's done.

Firstly, switch to the ‘Text’ view tab in WordPress (or equivalent) and add the following template where you want the link to take you to once you click “Back to the top” or “Jump to section 3” for instance: <a name="Insert text"></a>

For example:

If you would like to create a “Back to the top” link, place the link at the top of your blog post - somewhere near your introduction will do. Write HTML code as something like: <a name="Top"></a>

In this basic HTML code, you will notice that there is no anchor text in this template, which would normally be found in between >    </a>. The reason for this is so that the link will direct the reader to the top of the page, without any unwanted text appearing and interfering with user experience.

Next, add the following to where you would like your “Back to the top” link to be in the text - such as at the end of a paragraph: <a href="#top">Back to the top</a>

4. How to add table of contents in HTML?

  Photo credit: Rawpixel.com / Shutterstock 

The “a href” linking technique – one of the main HTML coding basics – used to create a ‘Back to the top’ link can also be used to build a HTML table of contents too. Adding a table of contents at the beginning of a blog post can be incredibly useful for longer pieces of content with various sub-sections or content nearing around 2,000 words (or more), and only requires basic HTML programming. This was the intention for Reboot’s “SEO basics for bloggers” post, whereby a table of contents was created to make it easier for readers to see what information the post includes, and to navigate quickly to specific sections that may be more of interest.  

Once you have written your blog post, it’s time to start writing basic HTML – open the page source or ‘Text’ view. To make yourself more familiar with your blog post, create a numbered list of all the headings in your post you want to be made accessible in the ‘Contents’, including main subheadings (H2) and any further subheadings (H3). 

For “SEO basics for bloggers”, there were 4 sections, including subheadings too: 

1.    What is SEO?
        -    Why does my blog need SEO?
        -    Can anyone do SEO?
2.    How to do search engine optimisation
        -    How to optimise your blog for SEO
        -    Optimisation off the blog
3.    What do you need to add to your blog post? [Checklist]
4.    Test yourself [Quiz]

Basic HTML code templates 

Next, to create a fully-functioning ‘Contents’, follow the simple html templates:

- How to add a heading to table of contents 

Copy and paste the following into your source code, filling in where appropriate:

<strong><a href="#whatisthenameofyourblogheading">What is the name of your blog heading?</a></strong>

In most cases, you would want the heading to be in bold text to signify the ‘main’ sections of your blog. Therefore, make sure your a href includes <strong> at the beginning and </strong> at the end. 

- How to add subheadings to table of contents 

When adding a subheading, it is exactly the same HTML table of contents template as creating a heading, however you simply just include a hyphen at the beginning of the a href, to create a bullet point underneath the main heading. 

If you would like to make the text bold, again you can add <strong>, however in most cases it would be left as normal text. 

- <a href="#whatisthenameofyourblogsubheading">What is the name of your blog subheading?</a>

Tip: When writing the above, ensure there is no punctuation in the hashtag, and that it is all lowercase.

After that, to make the table of contents links come to life, make sure you finish the “a href” properly. Using the first H2 heading as an example, add the following to the subheadings in the main body of your post: 

It originally looked like this: <h2><strong>1. What is SEO?</strong></h2>

It changes to this to create the ‘Contents’ link: <h2><strong><a name="whatisseo"></a>1. What is SEO?</strong></h2> 

5. How can adding a table of contents help with SEO?

After using this nifty bit of HTML ourselves, we discovered that creating a table of contents can help significantly with SEO for a variety of reasons. Not only does it help to reduce the bounce rate on posts, it can help with user experience too. But the most important reason is that it can change the way your blog post shows in the SERP. 

For example, once we added a table of contents into the “SEO basics for bloggers” post, we noticed that the main headings of the post (found in the table of contents) were visible and clickable from the SERP. This gives the user a snapshot of what our blog is about before even clicking onto the post (reducing bounce rate) and helps to answer intent by directing the reader to the part of the post they searched specifically for.

It’s worth mentioning, though, that this wasn’t instantaneous – these mini links appeared after a few days, perhaps after the post was cached by Google. From this, we have already seen a significant SEO benefit: an increase in the amount of traffic going to the post and to Reboot’s website in general.

6. Basic HTML coding cheat sheet (Downloadable)

If you want to find out more about basic HTML coding, see our coding cheat sheet for reference: 

Please feel free to download this image or share on your site using the following embed code: