HTML Code Cheat Sheet For WordPress

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 Headline Tag
H1 Heading Tag HTML Code Cheat Sheet

[dt_code]<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>[/dt_code]

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
[dt_code]<h1 style=”text-align: center;”>Basic HTML Code Cheat Sheet</h1>[/dt_code]

 

Next we will focus on content HTML codes.

 

Paragraph HTML Code
Paragraph HTML Code Cheat Sheet

<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 with in codes.

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

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

href linking html code
href linking html code for either internal or external linking

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

[dt_code]<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>[/dt_code]

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

Tricks for email and telephone numbers
Tricks for email and telephone numbers essential HTML code to make one touch

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

Adding an image to your content using HTML code.

Html Code
HTML Code

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

The alt=” ” tag is an image attribute which provides a text alternative to the image used by people who use Screen readers, a blind or visually impaired person would use to browser 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:

Creating Lists through HTML Code
Creating Lists through HTML Code. Quick code to create a bullet or numbered list.

[dt_code]<ul>
<li>List example one</li>
<li>List example two</li>
<li>List example three</li>
</ul>[/dt_code]

Number ordered list view example

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

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

Special Characters

Special Characters HTML Code
Special Characters HTML Code – just a few html codes you never know when you might need.

&  – 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 texted to stand out or 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:
[dt_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>[/dt_code]
You will noticed 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 code 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 a 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 spacings of 1px with cell padding of 3px.

Table Header ATable Header BTable Header C
InputInputInput
InputInputInput
InputInputInput

See HTML Table code.

[dt_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>[/dt_code]

Like this article?

Share on facebook
Share on Facebook
Share on twitter
Share on Twitter
Share on linkedin
Share on LinkedIn
Share on pinterest
Share on Pinterest
Share on whatsapp
Share on WhatsApp
Share on email
Share on Email

Latest Articles

Elementor Page builder

Ultimate Guide To The Best WordPress Plugins 2019

Discover More →
Woocommerce Flat Rate Shipping

Woocommerce Flat Rate Shipping

Discover More →
Imagify - Image optimisation for everyone

Compress Images For Your Websites

Discover More →
Black Friday Cyber Monday

Black Friday / Cyber Monday 2018 Best WordPress Deals Around

Discover More →
Scroll to Top