10 Essential HTML Codes You Need to Improve Your Content

If you’re a blogger or content writer, you’ll be familiar with formatting issues that come with using content management systems such as WordPress. From misaligned text to random font changes, formatting issues can be beyond frustrating and can even reduce the quality of your content.

Luckily, having an understanding of HTML coding basics can help prevent and solve any potential formatting issues. This beginner’s guide to HTML coding will equip you with the skills and tools required to take control of your content—no website developer needed!

Read on to learn how to use basic HTML coding to improve your content.

What are the Basic HTML Tags and How do I Use Them?

HTML stands for Hypertext Markup Language and it’s used to structure web pages. Having a basic understanding of how to use HTML will improve the quality of your content.

HTML tags are used to wrap around a selected piece of text to dictate how that text will appear. Most HTML tags have an opening element wrapped in angle brackets <> and a closing element wrapped in angle brackets with a forward slash </> to indicate where the HTML code ends.

There are 10 basic HTML tags you need to know as a blogger or content marketer. To get started, open the HTML editor or “source” box within your content management system and try out these essential tags.

1. Optimise Your Headings

Implementing the right HTML heading tags is vital for ranking higher in the search engine results pages (SERPs).

There are six different heading tags you can use, from the main header tag <h1> to the smallest sub-header <h6>. Each tag corresponds to a heading, e.g. <h1> for Heading 1 (usually your title), <h2> for Heading 2 (main sub-headings), and so on. You should use HTML heading tags to create a logical structure within your post.

For search engine optimisation (SEO) purposes, it’s advised to only use one <h1> tag per post for your page title (although the restriction of using <h1> tags is up for debate). Then, for the body of your text, use the subsequent HTML heading tags to correctly structure your text. This helps to improve readability, Google ranking and user experience.

Use <h2> tags to create sub-headings that introduce a subject or topic. Within each <h2> section, you can use <h3> tags to create sub-headings on more specific details, then <h4> headings, and so on.

To use a HTML heading tag, you need to wrap your appropriate text in the appropriate tag (<h> to open the tag and </h> to close it). For example:

<h1>heading 1</h1>

<h2>heading 2</h2>

<h3>heading 3</h3>

<h4>heading 4</h4>

<h5>heading 5</h5>

<h6>heading 6</h6>

For SEO purposes, <h2> heading tags are the most valued by Google, so make sure each main heading is wrapped in these tags.

2. Using Bold

To embolden text, you need to use the <strong> tag.

For example:

What is <strong>search engine optimisation</strong>?

Including bold text may not directly affect your SEO and position in the SERPs, but it can benefit the reader and improve user experience when used efficiently.

3. Put it in Italics

To italicise your text, you need to wrap your chosen words or sentences in the emphasis <em> tag.

For example:

What is <em>search engine optimisation</em>?

Again, using italics can help improve the readability of your content and increase its value to your audience.

4. Underline It

To underline a piece of text, you need to use <u> tags.

For example:

What is <u>search engine optimisation</u>?

The underline tag can be useful for adding emphasis to your text.

5. Create a Paragraph

To break up your text and create paragraphs you need to use paragraph <p> tags.

For example:

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

<p>Implementing SEO strategies will help your content rank higher in Google search results. This means your target audience will be able to find you from a relevant web search</p>

Breaking up large chunks of text into shorter paragraphs is essential for creating user-friendly content.

6. Force a Line Break

If you’re facing spacing issues or want to force a space between two lines of text, use the break <br> tag. It’s self-closing, so you only need to add it to the end of a sentence (rather than at the beginning and end, as will the other tags) to create a space before the next sentence.

You can use the break <br> tag to force a line within a paragraph tag, or anywhere else in your text.

For example:

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

<p>Implementing SEO strategies will help your content rank higher in Google search results.<br>

This means your target audience will be able to find you from a relevant web search</p>

Remember: the paragraph <p> tag creates paragraphs; line breaks <br> simply force a break between lines.

7. Give a Quote

If you’re including a quote in your content, you can emphasise it using the quote <blockquote> tag. Simply wrap your quote text in <blockquote> to open and </blockquote> to close.

Using blockquote tags should help your quote stand out from the rest of the text, just as it does here:

Including block quotes is another great way to optimise your content’s structure.

8. Make a List

Using lists in your blog can be visually appealing and help readers to digest information.

To ensure your lists are properly formatted, however, you want to use list tags. There are three main tag types:

List <li> tags are used to create all lists. Wrap your list in <li> to open and </li> to close your list
For numbered lists, you must also use the ordered list tag <ol> before your first point and close after your final point with </ol>
For a bullet point list, use the unordered list tag <ul> before your first point and close after your final point with </ul>

Always remember to open and close your ordered or unordered list with the general list tag: <li></li>.

9. Feature a Photo

Photos are essential for creating quality blog posts and online content, but they can have a mind of their own.

To secure photos in your content, you need to use image tags: <img src></>. Within the tag, you need to include your image URL in “quotation marks” and a description within alt=”description”.

For example:

Alt-text is used to accurately describe an image to the reader in case the image cannot load, so make sure you write a good description of the photo you’re including.

Using an alt tag can also improve your SEO as Google can read and index your image from the text you include.

10. Get Linking

You can create hyperlinks within your post using the HTML tag <a href>. These can either be internal links to post on your website or external links that redirect users to other websites.

Within the <a href> tag, you need to include the target URL link and the anchor text (the visible text that describes the link to users). <a href=”Insert URL here”>”Insert anchor text here</a>

For example:

You may find it useful to know some basic<a href=”https://www.rebootonline.com/seo-dictionary/”>”SEO terminology”</a> when working in content marketing.

No-Follow Links

If you want to include a no-follow hyperlink to an external website, your HTML code needs to also include the ref=”nofollow” tag. For example:

You may find it useful to know some basic<a href=”https://www.rebootonline.com/seo-dictionary/”ref=”nofollow”>”SEO terminology”</a> when working in content marketing.

Don't Forget to Check Your HTML Code Before You Hit Publish

When you’re writing a blog post, it’s always worth double-checking your HTML code before you publish to avoid any potential formatting errors.

If you spot any problems with the layout of an existing post, you now have the tools to fix them by editing the HTML code in your content management system.

For easy reference, you can use the basic HTML coding cheat sheet, below, so that you can quickly write and edit HTML codes that will improve your content.

This blog was written by Victoria Affleck in 2016 and updated by Charlotte Osborn in 2021.