Table of Contents
A basic understanding of HTML will make it easier to customize content on your WordPress website. Making certain words bold or creating a bullet point list can help organize large blocks of content, making it easier for your visitors to read.
HTML is much like grammar. It’s a system that allows you to assign meaning to your content by defining it as paragraphs, headings, lists, links, or other structures.
What are HTML Tags?
HTML tags are the basic building blocks of any web page. It’s a containerized markup system with a matching closing tag for every open tag.
When creating pages or posts on the back end of your site, you will see that you can use a Visual Editor or a Text Editor. You will automatically land on the visual editor, an accessible editing environment. However, switching to a text editor allows greater flexibility in organizing the content’s layout. This is particularly important when customizing content, including font sizes, styles, and forced line breaks.
Open and Close tags
As mentioned earlier, all HTML tags have a matching open and close tag. So, for example, if you want to create bold text, it would look something like this:
<strong> Words I want bold </strong>
The first part (<>) opens the tag, and the second part closes it (</>).
Using the same method to split your text into paragraphs, you would use the following HTML tags:
<p> The words that I want to be in the paragraph </p>
Another piece of coding that’s useful to know is if you want to force text onto a new line when rendered on a webpage. To do this, you’d need to use the following HTML tags:
<br> The words you want to be on a new line </br>
Heading tags
You will likely have heard of header tags when working on your WordPress site, as these can be seen in both the visual and text editors.
H1 – H6 tags display text at different sizes and are used for page titles, subheadings, and other ways to break up content.
The H1 tag (<h1></h1>) is used to designate the most important copy on the page, such as its title.
Used after H1, the H2 tag (<h2></h2>) is then used to designate the second most crucial copy on a page, such as a subheading.
And finally, H3 tags (<h3></h3>) can be used to break up the text into further subsections.
Although H4, H5, and H6 tags are rarely used, they work using the same principles as above.
Nested tags
Nested tags, commonly seen in list tags, are an example of a more complex HTML tag. Ordered lists use the ol tag, and unordered lists use the ul tag, but both lists also use the li tag nested inside of them.
Ordered lists are lists that are numbered and look like this:
<ol>
<li>item one</li>
<li>item two</li>
<li>item three</li>
</ol>
The above HTML would produce the following:
- item one
- item two
- item three
Unordered lists are lists that use bullets instead of numbers. The HTML for an unordered list looks like this:
<ul>
<li>item one</li>
<li>item two</li>
<li>item three</li>
</ul>
The above code will produce the following:
- item one
- item two
- item three
With both types of lists, the listed items are surrounded by the li HTML tag. The group of li tags is, in turn, surrounded by the ol or ul opening and closing tags.
There’s a lot to consider regarding running and maintaining a website. If you use HTML tags, there are many extra things you can do to your WordPress site to improve the readability of your content.
To run a successful and profitable website, the end user should always be in mind. HTML tags are one way to improve the user experience, but you may also want to consider the speed at which your pages load and the security of your WordPress site.
WP Tech Support can assist with ongoing website maintenance so you can rest assured that your visitors are getting the best experience. Look at our monthly support plans to find the level of support most suited to your business requirements.