20 Essential WordPress Website HTML codes to know

There are a few essential HTML codes that every website owner should know. Here are the Essential WordPress Website HTML codes to know. After all, basic HTML codes are foundational to everything on the Internet, including your WordPress website.

These codes are easy to master, and once you know how to use them, we are sure you will find that you use them every time you add content to your site.

HTML is an acronym for the hypertext markup language, which means that although it is not actually a programming language, it marks up the text you already have on your page.

HTML coding gives you the ability to mark up your text, for example, by using italics, or bold type, to by altering the size or by changing the alignment.

HTML also allows you to add links and images to your website content.

Getting started

HTML is pretty straightforward, and you will most likely be able to decipher each tag from the context in which it is used.

When beginning HTML, it is best to start with the basics:

1. Bold 

You can wrap your text in the <strong> tags to bold text.

Semantic coding is safer to use than <b> as Google and other search engines prefer semantic coding.

2. Italics

Semantic coding to place text in italics is <em> (which stands for emphasis).

You can also use <i>.

3. Underline 

Because links are underlined (and underlined text can confuse users into thinking the text is a link) this code is not often used. However, if you do want to underline text, you can use <u> to do so.

4. Headings

Headings are likely one of the most used basic HTML codes. You can use <h1>, <h2>, <h3>, <h4>, <h5>, <h6> to create sections within your content.

To do this effectively, you will want to use the in hierarchical order.

Google likes it when you nest your headings – so use them in the correct sequence, for example <h2> after <h1> and before <h3>.

5. Image

Learning how to insert images with HTML will probably be one of the most useful HTML codes you will learn.

Simply put a single <img src> (code for image source tag) alongside the URL of the image you want to insert. For example:

<img scr=”https://xyz.au/wp-content/uploads/flamingo.jpg” 

(The above is an example only, however please note that the image tag has not been closed (>) and that there is a quotation mark inserted after the (=) symbol. These allow the code to be more readable).

6. Make the image clickable to a new destination

Follow the below code to make your image clickable to a new destination:
<a href=”Desintation-URL”><img alt=”Description of the image” src=”Image-URL” /></a>

7. Links 

A basic link can be inserted with a <a href> tag. The <a> states that it is a link, and the <href> that follows is a hypertext reference (the URL) to the site you are linking to.

For example: <a href=https://abc.com.au>

This link is closed with a </a> and that will be the clickable link that is visible when rendered, called the anchor text. 

8. Make the link nofollow 

You may want to make some of your links nofollow for SEO purposes.

You can do so by inserting the following:
<a href=”Destination-URL” rel=”nofollow”>Anchor text</a> 

9. Make the link open in a new browser window

You can make your link open in a new browser window by inserting the following:
<a href=”Desination-URL” target=”_blank”<Anchor text</a> 

10. How to link to a specific section in a long page (page jumps) 

To create a page jump, you need to assign a section (or target) that you want your link to be directed to, then place this code to this section. Then, link to that assigned section from your intro (or your table of contents).

<a id=”Specific-section”></a>
<a href=”#Specific-section”>Anchor text</a> 

11. Strikethrough Text 

You may have the need to show some strikethrough text within your content. You may wish to show certain items crossed off a To-Do List, for example.

If you require a line running through your text, you can insert strikethrough text by using <del> around the text you wish to appear crossed out. For example: Use the <del> for words you want to be crossed out </del> and those inside the code with appearing as strikethrough text.

12. Make a numbered list

Thanks to Google Snippets, lists are more and more becoming a large part of web content. They allow users to find information quickly, provide attractive white space and help to break up huge blocks of content.

There are two types of lists you can make with basic HTML coding: ordered lists and unordered lists.

Ordered lists appear numbered, whereas unordered lists appear in a bullet-point format.

You can wrap your numbered list with <ol> for an ordered list. Each list item should be wrapped in <li>.

13. Make an unordered list

As above for making an ordered list, you can wrap your unordered list with <ul> – remembering that each list item should be wrapped in <li>.

14. Make a letters list

You can follow the same process in order to make a letters list, simply follow the code below:

<ol type=”A”>
<li>Item A</li>
<li>ItemB</li>
<li>ItemC</li>
<li>ItemD</li>
</ol> 

15. Make a roman numerals list

Likewise, to make a list using Roman numerals, follow the coding below:

<ol type=”I”>
<li>Item I</li>
<li>Item II</li>
<li>Item III</li>
<li>Item IV</li>
</ol> 

16. Block Quotes

Block quotes are for quoting and are simple and easy to use. Just enclose whatever text you would like to appear, including your attribute with <blockquote> as your opening and closing tags.

17. Paragraphs

WordPress will automatically render each line break as a separate paragraph for you when you type in HTML, but not everything will. So, if you want to keep your paragraphs separate, you will need to wrap each one with <p> to tell the browser to display each block of text in a separate paragraph for you.

Remember, browsers will usually ignore line breaks unless they are told otherwise.

18. Lines and Line Breaks

If you need other separations between your paragraphs, you can use <hr> and <br/> tags to insert separator lines and line breaks.

<hr> will insert a separator line, whereas the <br/> tag will insert a line break. <br/> is a self-closing tag, which means it does not require any content within in.

19. Highlight text in a post in a coloured background

To change or highlight a portion of the text by creating a coloured background, you can follow the following code (using the colour yellow, for example):
<span style=”background-colour:yellow;”>Your text</span> 

20. Centre your text

Aligning your text to the centre is easy by surrounding the section of text you want to be centred with <center> and </center>. 

You now know all the basic, most-used HTML codes you will need to format content for your site.

HTML is a necessary and foundational part of the Internet, and as you get more comfortable using HTML you can always add a few more advanced codes to your repertoire if you feel the need. The time you spend learning basic HTML can only enhance your web design skills, from which you can develop further skills. Adding abilities such as these to your skillset (and your CV) is always a plus. If you are still having trouble, click here for some helpful troubleshooting tips.

Managing your own website and dealing with website jargon can be difficult, even for the tech-savvy user. If you have any questions about the design or formatting of your website, feel free to have a chat with us. We’d love to help you make your business website the very best it can be.

Stand out from your competition with a Pixel Fish website!

Speak to the WordPress experts and take your business to the next level with a Pixel Fish Website.

Check out some of our latest Website Design projects.

Further Information
10 WordPress Plugins to Speed Up Your Ecommerce Website
Top 3 Ecommerce Customer Service Tactics for your Website
9 Reasons to Use WordPress for Your E-Commerce Website

Read More
Australia’s E-Commerce Growth: It’s time to Embrace Online Selling
The Top 10 WooCommerce Benefits for Small Businesses
5 Ways E-marketing Can Drive Ecommerce Website Sales
5 Strategies to Fix Checkout Abandonment Rate
Top E-Commerce Web Design Trends