Adding HTML to WordPress: A Beginner’s Guide to How It Works

One of the best things about WordPress is how easy it is to use, even for beginners. You can essentially create a functional website without any technical knowledge. Once you become familiar with the platform, though, adding HTML to WordPress is an excellent way to get more control over your site.

HTML is one of the primary building blocks every WordPress site relies on. With even a basic understanding of HTML, you can make various tweaks to the way your pages look and act. Plus, even if you’ve never touched a line of code before, this language is fairly simple to pick up and use.

What HTML is (and why it matters) 🤔

Even if you’re not a web developer, chances are you’ve at least heard of HTML – it’s synonymous with creating websites. However, HTML isn’t a programming language like JavaScript or Python. Those coding tools are used to build programs from the ground up, and are more complex. Instead, HTML is what’s called a ‘markup language’.

In short, it’s designed to affect content such as text and images. It’s used to annotate (or mark up) content by adding instructions about how it should be displayed. For this reason, HTML is both easier to use and understand.

If you want to see what HTML actually looks like, all you need to do is open up a WordPress post or page. Then, switch over to the Text tab of the editor:

This might look like gibberish at first. However, peer closely and you’ll see that all your content is still there. The text is written out as-is, but everything else is HTML that controls your content’s formatting, appearance, layout, and more.

How adding HTML to WordPress works (a few basic examples) 🧰

At this point, you’re probably ready to see what adding HTML to WordPress looks like in practice. Let’s walk through a couple of basic examples, so you can get a feel for how this markup language actually works.

Let’s say you’re writing a blog post for your WordPress site, and it’s about your five favorite breeds of dog. Therefore, you want to introduce each breed as a new section, with a heading that stands out from the rest of the text.

As you may know, you can do this in WordPress by selecting one of the options from the heading drop-down menu:

However, you can also do this with HTML. In the Text tab, find the text you want to turn into a heading. Then, simply add heading tags to the beginning and end, like this:

These <h1> tags tell WordPress to turn the text they enclose into a ‘level-1’ heading. The slash in the second tag indicates where the heading should end. You can also replace the 1 with a different number, in order to customize which level of heading is used.

Other ways to use HTML for formatting

There are similar basic tags for all the common (and many uncommon) types of formatting you may want to apply to your text. For instance, let’s say you wanted to italicize the word “best” in the following sentence:

In my opinion, greyhounds are the best kind of dog.

To do this, you’d need to use the emphasis (<em>) tags:

In my opinion, greyhounds are the <em>best</em> kind of dog.

If you wanted to make the word bold instead, you’d use <strong> tags:

In my opinion, greyhounds are the <strong>best</strong> kind of dog.

Of course, you can also combine HTML tags if you like. For example, if you wanted to give the word lots of emphasis by bolding and italicizing it, you could use the following formatting:

In my opinion, greyhounds are the <strong><em>best</em></strong> kind of dog.

It’s worth noting that the order doesn’t matter here – the <em> tags could be on the outside instead, and you’d get the same effect:

Through these types of simple examples, you can start to see how HTML works. You use an introductory tag to tell WordPress (or whatever platform you’re using) what you want to do. Then, you add a closing tag at the end to let it know when to stop. Most tags are pretty simple and easy to understand, although they can be combined in many different ways.

Of course, you can accomplish all these same tasks in the Visual tab of the WordPress editor. However, adding HTML to WordPress lets you include formatting that isn’t easy to add by default, such as highlighting text using the <mark> tags or creating tables. With HTML in your tool belt, your options for customizing content are just about endless, and you’re also able to include certain formatting within widgets, and other areas away from the WordPress editor.

Other areas where adding HTML to WordPress is helpful

Beyond using HTML to manipulate formatting, you can also use it to control how certain parts of your content function. For example, one common action you might want to take is adding a nofollow tag to your links. Unlike the examples we showed you above, there’s no option to do this in the editor.

Instead, you’ll need to manually add the rel="nofollow" tag to your link using HTML. For example:

<a href="http://example.com/post">anchor text</a>

Becomes:

<a href="http://example.com/post" rel="nofollow">anchor text</a>

As you become more accustomed to HTML, you’ll find other areas where HTML lets you go beyond the regular WordPress editor.

How to learn more about HTML 🧑‍🎓

If you’ve been following along, you’ve already learned some key basics about how HTML works. You can go pretty far by simply doing some Google searches to find the tags you need, and adding HTML to WordPress content as needed.

However, there’s a lot more to this markup language than meets the eye. If you really want to become proficient with HTML, it’s worth spending some time learning all of its ins and outs.

Here are a few solid places to start learning more:

• W3Schools: If you’re the hands-on type, this HTML5 Tutorial might be just what you need. It will walk you through all you need to know about the latest version of HTML, letting you practice using the tags yourself at every step.
• Codecademy: If you’d like a more thorough, course-like approach to learning HTML, Codecademy offers a very comprehensive program. You’ll even complete two structured projects, to give you a practical feel for the language.
• Udemy: This website offers many courses on HTML, so you can choose the one best suited to your needs and skill level. To get started, we’d recommend taking a look at Introduction to Basic HTML & CSS for WordPress Users.

As with any technical skill, the best way to learn HTML thoroughly is to practice using it often. After using it to put together a few new posts and pages, you should find that adding HTML to WordPress is becoming second nature.

Final thoughts on adding HTML to WordPress 💭

Making sense of HTML comes down to understanding the concept of tags, and how they’re used to surround the parts of your content you want to affect. Once you have that down, you can start learning more tags and experimenting with adding HTML to WordPress. With the help of hands-on tutorials and dedicated courses, you’ll find yourself HTML-proficient in no time.

Do you have any questions about how to use HTML in your WordPress content? Let us know in the comments section below!