HTML Code Cheat Sheet For WordPress

We discuss some of the HTML codes that users would need for WordPress. Consider it your cheat sheet.

HTML stands for Hypertext Markup Language. HTML is the set of markup symbols or codes inserted in a file intended for display on a World Wide Web browser page. The markup tells the Web browser how to display a Web page’s words and images for the user. so in this blog we offer you an HTML Code Cheat Sheet for WordPress.

As a WordPress trainer for Creative Ground and WordPress Training, I often create cheat sheet for my clients to use when managing, updating, blogging or creating content for their own website. In this article you will learn how to use HTML codes and what they mean.

Each HTML code opens with < > and closes with </ > It is good practice when you open a HTML code to close it straight away, the reason we do this is to minimise errors. So an example of this, if I was going to create a paragraph I would <p> </p> then start to write my content between the opening and closing tag.

HTML Heading tags.

To get started we will take a look at HTML Heading Tags. Heading tags are used on every website from <h1> through to <h6>, these tags are used to define HTML headers on each web page.

<h1> is the most important heading tag and each web page should start with an <h1> heading, through to <h6> being the least important.
Good SEO practice for writing a page content: Google states you must only use <h1> tag once on a web page but you can use <h2> through to <h6> multiple times.

And this is what HTML heading tags look like:

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

To align heading or paragraph text to the left, right or center we use style=”text-align: center;” swapping the center for left or right if need in practice we will look at the <h1> header used for this web page
<h1 style=”text-align: center;”>Basic HTML Code Cheat Sheet</h1>

Next we will focus on content HTML codes.

<p>This defines a paragraph</p> This is used for your content.
<strong>This defines font weight</strong> to add font weight also referred to as Bold around a section of content or important Keyword or text to highlight a piece of your content.
In practice it looks like this I am a bold text.
<em>Defines emphasized text or referred to as italic</em> in practice I am italic. You can also you codes within codes.

This is an example of HTML code at work.
<p>This is an <strong>example of <em>html code</em> at work</strong>. </p>

To add gaps, space or a line break we use <br> You will notice there is no closing tag for a line break.

To add a url link ( hyperlink ) we use <a> and “href” tag for the destination and this is how we use it <a href=”https://example.com”>Hyperlink text goes here</a> To open the link in a different browser window we add target=”_blank”, altogether it looks like this <a href=”https://example.com” target=”_blank”>Hyperlink text goes here</a> We can also add a title=”Defines title texted” tag to the url <a href=”https://example.com” title=”Title Text goes here” target=”_blank”>Hyperlink text goes here</a>
Link to targeting Creative Ground’s blog post about SEO Content Writing

<a href=”https://creativeground.com.au/flesch-readability-test-seo-content-writing/” title=”Flesch Readability Test SEO Content Writing” target=”_blank”>SEO Content Writing</a>

Linking to a phone number or an email address.
Email Address Goes here
0123456789
HTML code used with title=” ” tag:

<a href=”mailto:[email protected]” title=”Drop us an email.”>Email Address Goes here</a>
<a href=”tel:0123456789″ title=”Call Us Now!” target=”_blank”>0123456789</a>

Adding an image to your content using HTML code.

Code used to display image:
<img class=”alignleft” src=”https://example.com/image.jpg” title=”image tooltip” alt=”image description” width=”500″ height=”333″ />

The alt=” ” tag is an image attribute that provides a text alternative to the image used by people who use Screen readers, a blind or visually impaired person would use to browse your website. The title=” ” tag is used as a tool tips using both alt=” ” and title=” ” tags on an images has SEO benefits.

Creating a list

• List example one
• List example two
• List example three

Here is the code:

<ul>
<li>List example one</li>
<li>List example two</li>
<li>List example three</li>
</ul>

Number ordered list view example

1. List example one
2. List example two
3. List example three

Code used:
<ol>
<li>List example one</li>
<li>List example two</li>
<li>List example three</li>
</ol>

Special Characters

&  – Ampersand, or ‘and’ sign – &amp;
“ – Quotation Mark – &quot;
© – Copyright Symbol – &copy;
™ – Trademark Symbol – &trade;
  – A space (non-breaking space) – &nbsp;

Adding Color to Text Using Span

If you wanted to add colour to your text to stand out or for whatever reason you may want to do so, we use span.
Below is an example, I am using the word Google and each letter has a different colour.

Google

Code:
<p style=”font-size:28px”><strong><span style=”color:#4285f4″>G</span><span style=”color:#ea4335″>o</span><span style=”color:#fbbc05″>o</span><span style=”color:#4285f4″>g</span><span style=”color:#34a853″>l</span><span style=”color:#ea4335″>e</span></strong></p>
You will notice I have mixed this code up a little by adding <p> </p> and <strong> </strong>. I have done this to further demonstrate how you can use multiple HTML codes within your content. I have also added  style=”font-size:28px” on the opening paragraph to set the text size to 28px this can also be added to <span style=”font-size:28px”> </span> or even a header tag example <h2 style=”font-size:38px”> </h2>.

Creating an HTML table.

Here we use a simple layout 3 columns by 4 rows. I have set the first row as a header. The table is using a border of 1px with a cell spacing of 1px with cell padding of 3px.

See HTML Table code.

<table border=”1″ cellspacing=”1″ cellpadding=”3″>
<tbody>
<tr>
<th>Table Header A</th>
<th style=”text-align: center;”>Table Header B</th>
<th>Table Header C</th>
</tr>
<tr>
<td>Input</td>
<td>Input</td>
<td>Input</td>
</tr>
<tr>
<td>Input</td>
<td>Input</td>
<td>Input</td>
</tr>
<tr>
<td>Input</td>
<td>Input</td>
<td>Input</td>
</tr>
</tbody>
</table>