Having a basic understanding of HTML will make it easier to customise content on your WordPress website. Being able to make certain words bold or create a bullet point list can help organise large blocks of content, making it easier for your visitors to read.
HTML is much like grammar. It’s a system which allows you to assign meaning to your content by defining it as being 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 containerised markup system where for every open tag there is a matching closing tag.
When creating pages or posts in the backend of your site, you will see you have the option to use a Visual Editor or a Text Editor. You will automatically land on the visual editor which is an easy editing environment. However, switching to text editor allows greater flexibility on how you organise the layout of the content. This is particularly important to know when you are customising content to include different font sizes, styles and forced line breaks.
Open and Close tags
As mentioned earlier, all HTML tags consist of 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 have likely heard of Header tags when working on your WordPress site as these can be seen within the visual editor as well as the text editor.
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 important copy in 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
An example of a more complex HTML tag are nested tags, commonly seen in list tags. Ordered lists that use the ol tag and unordered lists use the ul tag, but both types of list also make use of 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 list, the listed items get surrounded by the li HTML tag. The group of li tags in turn get surrounded by the ol or ul opening and closing tags.
There’s lots to consider when it comes to running and maintaining a website. If you make use of HTML tags, there are a lot of 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 at the forefront of your mind. HTML tags are one way to improve the user experience, but you may also want to consider the speed in which your pages load and the security of your WordPress site.
WP Tech Support can assist with ongoing maintenance of your website, so you can be rest assured your visitors are getting the very best experience. Take a look at our monthly payment plans to find the level of support that is most suited to your business requirements.