In a perfect world, everyone with a website or blog would take the time to understand coding, so they can use it to its full advantage. It can all be quite powerful.

I’m not going to get into the crazy stuff….because that would just add more to your brain overload, BUT I do think it’s beneficial to have a little cheat-sheet of the most used HTML codes…. so you can easily format/customise your blog, all by yourself!

All of the codes are copy & paste ready!

When you see what you need, you can take it & run.
I know WordPress’s dashboard has a lot of these links made super easy to customise in the editor….but what if you want to add special things to your sidebar/widgets/guest post?!

Please note: Your URL and Text does NOT have to be capitalized, I’m only doing that in my examples so it’s easy to distinguish from the rest & so you can see exactly what to replace when you’re adding in your own information.

1 – Manually Entering Images

<img src=”URL” />
How do you find the URL of an image?!
Well, if you’re in WordPress you can click on your “Media” Library.
Click on the image. And the URL should be displayed in the attachment details.

2 – Paragraph

<p>WHATEVER TEXT YOU WANT IN YOUR PARAGRAPH </p>

3 – Hyperlink Text

What if you want an image to be clickable?! I got that one covered to. It combines the code for the manually entered image, with the code above for the hyperlink.

<a href=”URL OF WEBPAGE YOU WANT TO LINK TO”>Text that you want to be clickable</a>
4 – Hyperlink Image

What if you want an image to be clickable?! I got that one covered to. It combines the code for the manually entered image, with the code above for the hyperlink.

<a href=”URL OF WEBPAGE YOU WANT TO LINK TO”><img src=”URL OF IMAGE”></a>
5 – Opening Hyperlink In A New Window

Not a problem. You would add this little code:

target=”blank”

Where would you add it? Take a look at this example:

<a href=”URL OF WEBPAGE YOU WANT TO LINK TO” target=”_blank” rel="noopener noreferrer">Text that you want to be clickable</a>
6 – Ordered Lists
<ol>
<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>
</ol>
7 – Unordered Lists
<ul>
<li>Bullet Item #1</li>
<li>Bullet Item #2</li>
<li>Bullet Item #3</li>
</ul>
8 – No Follow Links
<a href=”URL OF WEBPAGE YOU WANT TO LINK TO” rel=”nofollow”>Text that you want to be clickable</a>

By setting a link to “no follow” you are telling Google search bots not to follow that specific link.

9 – Link To Part Of A Page (Part 1 – Link)

Want to have a link that takes the user to another part of the same page? The code for that is easy, but it has two parts. The first part is the link that the user would actually click on. The second part is the area that the link would bring them to (the desintation).

This code goes where you want the clickable link to be:

<a href=”#SECTIONNAME”>Text that you want to be clickable</a>

Don’t forget the # in front of your section name. In the coding world that means “id”. So it’s like an identifier.

10 – Link To Part Of A Page (Part 2 – Destination)

This code would go to the specific point on your page, that you want the user to end up at when they click the link:

<div id=”#SECTIONNAME”></div>Text that you want to be clickable</a>
11 – Text Style Bold

This code will make your text appear bold.

<strong>TEXT THAT YOU WANT TO BE BOLD</strong>
12 – Text Style Underlined

This code will make your text appear underlined.

<u>TEXT THAT YOU WANT TO BE UNDERLINED</u>
13 – Text Style Italicised

This code will make your text appear italicised.

<em>TEXT THAT YOU WANT TO BE ITALICISED</em>
14 – Headings (h1-h6)

When it comes to headings, you have 6 options. 6? Yes, 6.
Usually, bloggers stick with headings 1-3.

<h1>WHATEVER YOU WANT YOUR HEADING TO BE</h1>

You can replace the code below with h2, h3, h4, h5, h6. So use the number of the heading, to define which one you want to use in the code. Notice that h1 is the biggest & h6 is the smallest.

15 – Subscript

Do you need certain letters or words to appear smaller & lower then the others? Use the subscript code:

<sub>WHATEVER TEXT YOU WANT SMALL & LOW</sub>
16 – Superscript

Do you need certain letters or words to appear smaller & higher then the others? Use the superscript code:

<sup>WHATEVER TEXT YOU WANT SMALL & HIGH</sup>
17 – Horizontal Line

Want to place a horizontal line in your post? Many people use this little HTML code to help visually break up content.

<hr />
18 – Line Break

Want to start a new line without adding a new paragraph? Use this code here:

<br />
19 – Strikethrough Text

Need to show that you’ve deleted or crossed out words in a document? This code will help give that crossed out look.

<del>TEXT YOU WANT CROSSED OUT</del>
20 – Blockquote

This HTML code can help show that a quote is…..a quote. It will emphasise the text with a large quotation.

<blockquote>QUOTE TEXT GOES HERE</blockquote>
21 – Width & Height Of An Image

Do you need your image to have a specific width & height to look right within your posts? Toss these bad boys in the image tag:

<img src=”URL OF THE IMAGE” width=”45” height=”45”>
22 – E-Mail Address Link

Sometimes you don’t want to have a contact form as your only source of communication with your users. Here’s how you add your e-mail address as a link! It makes e-mailing from your website super easy….with only one click:

<a href=”mailto:name@domainname.com”>E-mail Us!</a>

(You can change the “E-mail Us!” text to be anything you want!)

23 – E-mail Address Link With Default Subject Title

This code can be used if you want the user’s e-mail to hit your e-mail box with a specific subject title. I use “Hello There!” & I know that when I get an e-mail like that, that it came from this link!

(Please Note: Use %20 where the spaces between the words should go)

<a href=”mailto:name@domainname.com?subject=YOUR%20SUBJECT%20GOES%20HERE”>E-mail Us!</a>
24 – HTML Comment
<!--The comment that you don’t want user’s to see goes in between these dashes/arrows-->
25 – Font Colour

Want to change the colour of some of your text? It’s a great way to help it stand out a little, or emphasize parts of it. You can change the hexadecimal value to match any colour of your choice.

(Please note: Hexadecimal colour values are 6 digits, but don’t leave out the # in front of those digits)

<span style=”color:#09C2BB;”>WHATEVER TEXT YOU WANT DIFFERNT COLORED </span>
26 – Font Size

Looking to change the size of your text? Not a problem.

(Please note: My example is using pixels, which is “px” after the number. You can also use a percentage value (150%) or an em value (2em))

<span style=”font-size:36px;”>WHATEVER TEXT YOU WANT A DIFFERNT SIZE</span>
27 – Capitalised/Uppercase Text

Sometimes when I’m designing, I want to make all of my words capitalised, like in titles, KIND OF LIKE THIS (for example). If I didn’t have access to my style sheet, I could toss this code in:

<span style=”texttransform:uppercase;”>TEXT THAT YOU WANT TO BE CAPITALISED/UPPERCASE</span>
28 – Heading With A Different Font

You can replace the “Playfair Display” with the kind of font that you would like to use. It’s important to use web-friendly fonts. I usually find mine on Google Fonts & they actually give you a nice easy code to copy & paste, depending on the font you want to use.

You can change the h1 to any heading value 1-6.

<h1 style=”font-family: ‘Playfair Display’, sansserif;”>YOUR HEADING HERE</h1>
29 – Paragraph With A Different Font

The same rules as above apply here, the only difference is that the h1 is replaced with a “p”.

<p style=”font-family: ‘Playfair Display’, sansserif;”>YOUR PARAGRAPH TEXT HERE</p>
30 – Highlighted Text

This text will show up as if it was highlighted. The value that you would change is the hexadecimal value. The colour you chose would then show up as the “highlighter” colour.

<span style=”background-color: #09C2BB;”>HIGHLIGHTED TEXT GOES HERE </span>
31 – Aligned Paragraph

Your options for aligning paragraphs are: center, left, right, justify. Replace the alignment type in the code below to whichever style you would like.

<p style=”text-align: center;”>PARAGRAPH TEXT GOES HERE </p>
32 – Aligned Heading

Your options for aligning headings are: center, left, right, justify. Replace the alignment type, in the code below to whichever style you would like.
These alignments styles follow the same as above. The only difference is that the “p” is replaced with a h1-h6.

<h2 style=”text-align:justify;”>HEADING TEXT GOES HERE </h2>
33 – Letter Spacing In Headings

Ever wonder how some people get letters spaced out in certain headings and such? L I K E T H I S ! — This is how you do it:

<h1 style=”letterspacing:5px;”>YOUR HEADING HERE</h1>
34 – Line Height In Paragraphs

Sometimes, you might want the lines in your paragraphs to be a little bit more spaced out, like in this one. (Please Note: CSS changes like this, should be made in the style sheet. Too many in-line styles could slow down, or break your website)


<p style="”line-height: 2px;">Sometimes, you might want the lines in your paragraphs to be a little bit more spaced out, like in this one. (Please Note: CSS changes like this, should be made in the style sheet. Too many in-line styles could slow down, or break your website)</p>
35 – Border Around A Heading
<h2 style=”border:1px solid #cccccc;”>HEADING THAT YOU WANT THE BORDER AROUND</h2>
36 – Border Around A Paragraph
<p style=”border:1px solid #cccccc;”>PARAGRAPH THAT YOU WANT THE BORDER AROUND</p>
37 – Paragraph Border With White Space
<p style=”border:1px solid #cccccc; padding:10px;”>PARAGRAPH THAT YOU WANT THE BORDER AROUND </p>