WordPress is a popular CMS among site owners because it can be managed without much (if any) coding experience. But did you know that with some basic HTML knowledge you can add some professional touches to any WordPress site? In this article we’ll cover some HTML basics, as they apply to the typical WordPress website.
If you know what you’re looking for, feel free to navigate using the index provided.
- HTML Basics
- The Post Editor: Visual vs Text
- Headings
- Paragraphs
- Lists
- Links (Anchors)
- Images
- Horizontal Rules
- Line Breaks
- Learn More
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.
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> </p>
A common element found on WordPress sites is <p> </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> </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> </p>
<p>This is paragraph 2.</p>
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.