{"id":14782,"date":"2018-07-16T12:00:08","date_gmt":"2018-07-16T09:00:08","guid":{"rendered":"https:\/\/themeisle.com\/blog\/?p=14782"},"modified":"2024-04-03T13:05:18","modified_gmt":"2024-04-03T10:05:18","slug":"adding-html-to-wordpress","status":"publish","type":"post","link":"https:\/\/themeisle.com\/blog\/adding-html-to-wordpress\/","title":{"rendered":"Adding HTML to WordPress: A Beginner’s Guide to How It Works"},"content":{"rendered":"

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<\/a>, though, adding HTML to WordPress is an excellent way to get more control over your site.<\/p>\n

<\/p>\n

HTML<\/a> is one of the primary building blocks every WordPress site<\/a> 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\u2019ve never touched a line of code before, this language is fairly simple to pick up and use.<\/p>\n

\n
\n

In this beginner-friendly guide, we\u2019ll explain what HTML is and how it works. Then we\u2019ll show you some examples of what adding HTML to WordPress can do, and point you towards some places where you can learn more. Let\u2019s get to work!<\/p>\n<\/div><\/div>\n

\n\n\t\t
<\/div>\n\t\t\t
\n\t\t \t
\n\t\t \t\tCheck out this beginner-friendly guide to adding #HTML to #WordPress! \ud83d\udcbb<\/a>\n\t\t \t<\/div>\n\t\t \t
\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n<\/div><\/div>\n<\/div>\n
<\/div>\n

What HTML is (and why it matters) \ud83e\udd14<\/h2>\n

Even if you\u2019re not a web developer, chances are you\u2019ve at least heard of HTML<\/a> \u2013 it’s synonymous with creating websites. However, HTML isn\u2019t a programming language<\/a> like JavaScript or Python. Those coding tools are used to build programs from the ground up, and are more complex. Instead, HTML is what\u2019s called a \u2018markup language\u2019.<\/p>\n

In short, it’s designed to affect content such as text and images. It\u2019s 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.<\/p>\n

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<\/em> tab of the editor:<\/p>\n

\"The<\/p>\n

This might look like gibberish at first. However, peer closely and you\u2019ll see that all your content is still there. The text is written out as-is, but everything else is HTML that controls your content\u2019s formatting<\/a>, appearance, layout, and more.
\n

<\/div>\n

How adding HTML to WordPress works (a few basic examples) \ud83e\uddf0<\/h2>\n

At this point, you\u2019re probably ready to see what adding HTML to WordPress looks like in practice. Let\u2019s walk through a couple of basic examples, so you can get a feel for how this markup language actually works.<\/p>\n

Let\u2019s say you\u2019re writing a blog post for your WordPress site, and it\u2019s 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.<\/p>\n

As you may know, you can do this in WordPress by selecting one of the options from the heading drop-down menu:<\/p>\n

\"Adding<\/p>\n

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

\"Creating<\/p>\n

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

<\/div>\n

Other ways to use HTML for formatting<\/h3>\n

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\u2019s say you wanted to italicize the word \u201cbest\u201d in the following sentence:<\/p>\n

In my opinion, greyhounds are the best kind of dog.<\/p><\/blockquote>\n

To do this, you\u2019d need to use the emphasis (<em><\/em>) tags:<\/p>\n

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

If you wanted to make the word bold instead, you\u2019d use <strong><\/em> tags:<\/p>\n

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

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

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

It\u2019s worth noting that the order doesn\u2019t matter here \u2013 the <em><\/em> tags could be on the outside instead, and you\u2019d get the same effect:<\/p>\n

\"A<\/p>\n

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\u2019re 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.<\/p>\n

Of course, you can accomplish all these same tasks in the Visual<\/em> tab of the WordPress editor. However, adding HTML to WordPress lets you include formatting that isn\u2019t easy to add by default, such as highlighting text<\/a> using the <mark><\/em> tags or creating tables<\/a>. 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<\/a>, and other areas away from the WordPress editor.
\n

<\/div>\n

Other areas where adding HTML to WordPress is helpful<\/h3>\n

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<\/a>. Unlike the examples we showed you above, there’s no option to do this in the editor.<\/p>\n

Instead, you’ll need to manually add the rel=\"nofollow\"<\/code> tag to your link using HTML. For example:<\/p>\n

<a href=\"http:\/\/example.com\/post\">anchor text<\/a><\/code><\/p>\n

Becomes:<\/p>\n

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

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

<\/div>\n

How to learn more about HTML \ud83e\uddd1\u200d\ud83c\udf93<\/h2>\n

If you\u2019ve been following along, you\u2019ve 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<\/a>, and adding HTML to WordPress content as needed.<\/p>\n

However, there\u2019s a lot more to this markup language than meets the eye. If you really want to become proficient with HTML, it\u2019s worth spending some time learning all of its ins and outs.<\/p>\n

Here are a few solid places to start learning more:<\/p>\n