Understanding basic HTML is very important for any WordPress user. While WordPress makes it easier than ever to build professional, dynamic, and responsive websites, there are still times that editing your website via HTML will come in handy.

What is HTML?

HTML (HyperText Markup Language) is the language of the world wide web. Look at any web page, and you’ll be looking at a page built with HTML.

Basically, HTML specifies different elements of your website with tags. It’s not quite how your website looks or is styled – that’s what CSS does (the next step above HTML). 

An example of how HTML tags an element of a web page is the What is HTML? heading above. The HTML would look like <h1>What is HTML?</h1>.  That <h1> tag tells the web browser to display that text as a big, bold header.

But you could change the actual style of that particular header with CSS (i.e. change the color, size, font, etc.).

Before we get too far ahead of ourselves, lets learn how and where you can edit HTML in WordPress.

How to Edit HTML in WordPress?

The most common places you’ll edit HTML in WordPress are:

• Posts and Pages
• Sidebar Text Widgets

To edit the HTML, switch from the Visual to Text editor on any page or post. Or, use the ‘Text’ widget in your sidebar.

If you do this for a blog article or page that you’ve already created, you’ll probably see some funky characters that represent HTML code.

How do HTML tags work?

For basic HTML, whatever is inside a tag is affected by that tag.

Tags contain angle brackets: < , >. Within the angle bracket is a tag: <strong>. Strong is the tag to make text bold.

A second set of brackets has a / in front of the tag text: </strong>, and closes out the tag. Not all HTML tags have both sets of brackets, and you’ll see below with the image and link tags.

Example of an HTML tag:

<strong>This text is all bold.</strong> would look like this:

This text is all bold.

Alternatively…

This text is <strong>not</strong> all bold. would look like this:

This text is not all bold.

Only the not is within the tag, so only not is affected by the HTML tag.

Most Popular HTML Tags for WordPress Users

Now that you understand how to use HTML tags, here are the most popular tags that you will use.

1. Bold and Italic

Bold text and italic text… or even bold italic text are often used to emphasis particular words or phrases.

<strong> </strong> is the tag for bold text

<em> </em> is the tag for italic text

2. Headings

Headings are used not just for style and organizing your posts and pages, but also for SEO (search engine optimization). Nowadays, headings don’t affect SEO as much as they used to, but search engines still read them to find the main topics of your page or post.

There are six heading tags: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Not all are commonly used. H1 headers are typically the largest, and each following header getting smaller.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

The HTML above appears as:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading Tips: When using headings, include keywords in your headings. Don’t apply them to entire paragraphs. Don’t use Heading 5 or 6 – search engines don’t track them.

3. Links

Linking text is done with a hyperlink (aka hypertext or link). 

<a href=”http://philebiner.com/” title=”Phil Ebiner’s Website”>

Above is the basic structure of an HTML link.

a = anchor text

href = hyperlink reference – aka URL web address

The web page you want to link to goes in between the quotes of the href.

The actual text that will appear is the text in the title quotes (title=””).

The HTML code above would appear as: Phil Ebiner’s Website.

4. Images

The image tag is another very useful one. It is build as following:

<img src=”https://www.videoschool.com/wp-content/uploads/2017/05/VSO-Logo-2017-600px-1.png” alt=”Video School Online Logo” height=”” width=””>

The img is the HTML image tag.

The src is the location of the photo. This needs to point to the original photo file, which is typically uploaded typically uploaded to your own web server, or taken from another website.

The alt text is the description of your photo that is required by web standards, and is important for visually impaired website visitors.

The height and width specify how tall or wide your photo is, in terms of pixels. Leaving them blank will result in your photo appearing at it’s original size.

Below is the Video School Online logo that I placed in this article with the html text above.

5. Lists

To create a list, you can use the <ul> or <ol> tag. <ul> is an ‘unordered list’ that results in a bullet-point list. <ol> is an ‘ordered list’ that results in a numbered list.

Within these tags are the individual items of your list, which use the <li> tag.

Unordered Example:

<ul>
<li>Bullet Point 1</li>
<li>Bullet Point 2</li>
<li>Bullet Point 3</li>
<li>Bullet Point 4</li>
</ul>

This appears as:

• Bullet Point 1
• Bullet Point 2
• Bullet Point 3
• Bullet Point 4

Ordered Example:

<ol>
<li>Numbered Point 1</li>
<li>Numbered Point 2</li>
<li>Numbered Point 3</li>
<li>Numbered Point 4</li>
</ol>

This appears as:

1. Numbered Point 1
2. Numbered Point 2
3. Numbered Point 3
4. Numbered Point 4

6. Paragraphs

The most commonly used HTML tag is <p>, the paragraph tag. When writing your posts in the visual editor, the paragraph tag is automatically created when you put a space between two lines.

<p>This is a paragraph. It contains a few sentences. With HTML, the paragraphs are surrounded by the paragraph tag.</p>

7. Line Breaks

Typically when writing out your paragraphs, a blank space will appear between the paragraphs.

If you need to manually add a space between text, between an image, or between any other element of your page, use the line break tag <br />.

This<br />would<br />look<br />like<br />this.

This
would
look
like
this.

8. Block Quotes

I’ve been using a lot of block quotes in this article. Block quotes will look different depending on your WordPress theme and CSS styling.

My block quotes look like this! I’m using the Avada theme.

How do you create a block quote in WordPress with HTML?

<blockquote>Put your text inside a block quote tag.</blockquote>

Now that’s a block quote within a block quote… meta…

9. Horizontal Lines

If you want to put a horizontal line on your web page, use the <hr /> tag.

The line above is what appears when using that horizontal line tag.

Ready to use HTML?

WordPress was created to make building websites easier for non-coders like me. But there are still times when understanding how HTML works is important. Up until recently, there wasn’t even an image widget for placing images in your sidebar. so the easiest way to place images in your sidebar was with HTML.

If you continue using WordPress, I’ll be that some day you’ll need to use HTML for some reason. We didn’t get into CSS in this article. CSS has to do more with the styling of your website. But understanding HTML will help you use CSS.

Want to learn how to build websites from scratch?

You can build a website from scratch with HTML and CSS. This is the basis of becoming a web developer – one of the hottest careers today.

I’ve partnered with Nick Walter, a mobile and web developer, to create the Complete HTML, CSS, and Bootstrap Course for Beginners. In this course, you’ll build your own websites from scratch using HTML, CSS, and Bootstrap.

Now that you know the basics of HTML, you’ll easily jump right into the course!

Learn HTML, CSS and Bootstrap – ENROLL NOW!

Conclusion

Using the Text Editor in WordPress gives you more control over how you format your website. Your pages and posts will be easier to read by website visitors and search engines.

I’ve also written on my 10+ Favorite WordPress Plugins that every WordPress user should check out.

I hope I’ve given you the basics that you wanted!

Cheers,

Phil