HTML Basics for WordPress

HTML Basics

On the most fundamental level, virtually all HTML tags will have an opening tag and a closing tag (with a few exceptions). A tag that is not closed could break your page formatting, so ensure that every opening HTML tag has a closing tag as a mate. An opening tag may look something like this <p> while the closing tag would look like this </p> — note the addition of the forward slash / to the closing tag.

The Post Editor: Visual vs Text

When editing a post or a page in WordPress, you are often given the option of two different editing modes: Visual, and Text. Many WordPress site owners are most familiar with the Visual option, but it’s in Text mode where you can really get into making professional HTML formatting adjustments.

To really get the most control of your site, use the Text editor, as shown in the image above. Clicking on the “Text” tab will enter you into the text editing mode where you are able to manipulate the HTML.

Headings

In HTML, there are a number of heading tags, used to style page headings/titles. These headings are numbered in order of importance from 1 through 6, with 1 being the most important. These headings are defined as <h1> through <h6>.

With most WordPress themes, <h1> is generally reserved and already in use, so you’ll typically find yourself starting with <h2>. You can have multiple instances of each level of heading, although the recommendation is to only have one <h1> on the page; more reason to avoid <h1> altogether.

<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<h4>This is a Heading 4</h4>

Paragraphs

Paragraphs are one of the most fundamental building blocks of the content of your site. In most WordPress applications, the default is that WordPress will automatically create paragraph tags, even if you don’t specify them. To take advantage of that, simply leave a blank line after your paragraph, such as:

This is paragraph 1.
 
This is paragraph 2.

However, if you would like more control, simply place an opening <p> tag at the beginning of your paragraph, and a closing </p> at the end of your paragraph. An example would be:

<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>

You can still maintain an extra, blank line between the two paragraphs. In most cases, one blank line will be ignored, aside from WordPress adding the default paragraph tags, if missing.

The Empty Paragraph: <p>&nbsp;</p>

A common element found on WordPress sites is <p>&nbsp;</p>. Sometimes you want extra space between paragraphs but browsers commonly ignore empty paragraph tags. The solution is to insert a space as the content between an opening and closing paragraph tag. The problem is that WordPress often ignores a blank space used in that manner, so the solution is to use the HTML entity for a space, which is   — this is simply rendered by browsers as a space. As a result, <p>&nbsp;</p> is essentially just a blank space within a paragraph, which will create an extra blank area on your page between content. It’s often seen in an application like this, where you might want extra blank space between paragraphs 1 and 2:

<p>This is paragraph 1.</p>
<p>&nbsp;</p>
<p>This is paragraph 2.</p>

Lists

Lists can be a very useful feature to format your pages more professionally. While nice to use, list behavior varies depending on the specific WordPress theme; formatting will vary.

Ordered Lists

By default, ordered list items are automatically labeled numerically, starting at 1. All items within an ordered list are wrapped with an opening <ol> and closing </ol>. Within the ordered list tags, each list item will be wrapped with an opening <li> and closing </li>. An example ordered list might look like:

<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>

Unordered Lists

By default, unordered list items are automatically marked with bullets. All items within an unordered list are wrapped with an opening <ul> and closing </ul>. Within the unordered list tags — as with an ordered list — each list item will be wrapped with an opening <li> and closing </li>. An example unordered list might look like:

<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

Links (Anchors)

As you can imagine from the rest of this article, a link is simply a string of text wrapped in an HTML tag — in this case, an opening <a> and closing </a>. But that alone isn’t enough; we’ve established that text is a link, but haven’t told it where to go. To give the instruction on where the link should point, we add a href="http://www.google.com/" attribute to the opening <a> tag, like this:

<a href="http://www.google.com/">This is my link text</a>

To take it a step farther, in the event you’re linking to an external resource and want to open the link in a new tab, you can append an additional target attribute — target="_blank" — to the opening <a> tag, like so:

<a href="http://www.google.com/" target="_blank">This is my link text</a>

Images

Image tags are one of the exceptions that don’t have a designated closing tag; however, they are referred to as “self-closing” and utilize a forward slash (usually found in a closing tag) within the opening tag. On the most fundamental level, an image tag looks like this: <img />.

But, like with links, the basic tag doesn’t tell us anything. To utilize the image tag, we need to define the source of the image using a src="" attribute, with the path to an image included like so: src="http://www.boldelite.com/images/dog-picture.jpg". This source tells the browser where to look for the image asset.

In addition to the source, there are several other attributes we can define. The most common (since it’s basically required) is the alt="" attribute, which defines the alternative text to be displayed if the image is slow to load, or unable to load. It can be used like so: alt="This is a picture of a dog".

To put it all together, you would end up with something like this:

<img src="http://www.boldelite.com/images/dog-picture.jpg" alt="This is a picture of a dog" />

Horizontal Rules

Horizontal rules <hr /> are another self-closing HTML tag — like the <img /> tag — and are used to define a break between content. In most WordPress themes, a horizontal rule will be displayed as a horizontal line with whitespace above and below.

The code:

<p>This is paragraph 1.</p>
<hr />
<p>This is paragraph 2.</p>

Horizontal rules have been used on this page to separate sections.

Line Breaks

The last self-closing HTML tag that you may see often is a basic line break, which functions in a similar way to the enter key on your keyboard. It terminates the current line, and the following content would appear on the next line. Line breaks are designated by a <br /> tag, and don’t have any attributes that would commonly be added to them.

Note that line breaks can be used within, or outside of <p> paragraph tags. Two usage scenarios could be:

<p>This is paragraph 1, line 1.<br />
This is paragraph 1, line 1.</p>
<br />
<br />
<p>This is paragraph 2.</p>

Learn More

With the HTML tags listed above you should now have a stronger understanding of the basic HTML tags you may encounter as a intermediate level WordPress user. For additional information, feel free to contact us or take a look at the Beginning HTML article by WordPress. For more advanced HTML instruction you can also refer to the HTML tutorial on W3Schools.