Last Updated on
An HTML cheat sheet is something every blogger, freelancer or small business owner should have. Essentially, anyone who has a website but doesn’t have coding knowledge will benefit from having a little cheat sheet.
As a blogger, freelancer or small business owner you are probably faced with the task of making small website changes on your own. You may need to go into the HTML files or you may even want to add some simple styling on you own – but just aren’t sure how.
As someone who learned to code on my own, I know how confusing HTML can be if you aren’t familiar with it. That is why I created this extensive HTML cheat sheet for whenever you find yourself needing to make some changes and don’t want to call your web designer up.
This list of HTML code is perfect for beginners and people who aren’t totally sure how to make styling changes to their website. I’ve included the HTML tags you need to add links, photos and styling your text just to name a few. This cheat sheet is copy and paste for your convenience.
Add this link to your favourites so you can find it the next time you need a little help with your HTML, or add it to your Pinterest Board!
Headers
Headers range from H1 to H6. H1 is the largest, and H6 is the smallest. It is best practice to always use headers in order.
i.e. in your block of content, you wouldn’t use H6 and then use H2 afterwards, however, you could use H2 and then use H6 after.
A good way to remember this is the more important the heading, the smaller the number! H1 shows more importance than H3.
H1
H2
H3
H4
H5
H6
<h1>Your header here</h1>
<h2>Your header here</h2>
<h3>Your header here</h3>
<h4>Your header here</h4>
<h5>Your header here</h5>
<h6>Your header here</h6>Paragraphs
In order to create a paragraph, you will want to wrap your paragraph in the paragraph tag.
<p>This is a paragraph</p>Aligned Paragraphs & Headings
Using inline styling, we can make small styling changes using HTML. Although this isn’t good practice to use inline styling a lot, it will be ok for small changes.
The example below shows how to center either your paragraph or your header (you can also replace H1 with any of the other heading levels (i.e. h3, h4).
You can replace center with:
left, right or justify.
Paragraph:
<p style="text-align:center;">Your paragraph text here</p>
<h1 style="text-align:center;">Your heading here</h1>Break or Space Between Paragraphs
Using the code below, you will be able to have a space in your paragraphs. If you want a double space, use two breaks. You will also notice that this is a self-closing tag, meaning unlike most HTML, you do not need to an opening tag and a closing tag.
Your paragraph here
<br />
Your next paragraph here.Horizontal Line
Here is another example of a self-closing tag.
<hr />Bold (Strong) Text
For SEO reasons, use the strong tag instead of bold.
<u>This text will be underlined</u>Italic (Emphasized) Text
For SEO reasons, use the emphasis tag instead of italic.
<em>This text will be italic</em>Underline
Underline your text.
<strong>This text will be bold</strong>Strikethrough (Deleted) Text
This will create deleted text
<del>Your text here</del>Size
Use em’s, %, or pixels to give your font a new size. Replace “p” with H1, H2 etc if you’d like to adjust the size of a heading element.
This text is 20px
<p style="font-size:20px">Your text here</p>
Font Colour
Replace the colour with a color of your choice, a hex code or an RGB value. Replace “p” with H1, H2 etc if you’d like to adjust the colour of a heading element.
Here is some purple font
<p style="color:#DEAFD1">Here is the code I used to generate the purple font</p>Font Family
First, you need to ensure that you are using a font that is installed with your website. If not, you will need to download the font to your website. Replace “p” with H1, H2 etc if you’d like to adjust the font of a heading element.
<span style="font-family: Verdana, sans-serif;">Your text here</p>Block Quote
“In case you want to add a quote in.”
<blockquote>"Your quote here"</blockquote>Sub and Superscript
Creating a subscript will make your writing appear lower, whereas a superscript will make your writing higher.
<sub>Subscript text here</sub>
<sup>Superscript text here</sup>Textbox
<textarea>Your text here</textarea>Phone Number
The first set of code will create a simple link that will allow your user to phone you.
<a href="tel:555-555-1212">555-555-1212</a>Email
The first set of code will create a simple link that will allow your user to email you.
<a href="mailto:[email protected]">Email Us</a> Links
The first set of code will create a simple link that will not open a new window when clicked upon by your user.
<a href="http://www.yourlinkhere.com/">Your link text here</a>Next, you can create a link that opens a new window when the user clicks upon it.
<a href="http://www.yourlinkhere.com/" target="_blank">Your link text here</a>Anchor Links
An anchored link is when you are taken to a specific spot on your webpage. i.e, if you are at the bottom of the page you could click a link that says “Top” and you will be taken to the top.
First, you must specify the point in the page which you would like the user to end up. By doing this, you are telling the browser that this part of the website is “top” and when the user clicks on the “top” link, take them back here.
<a name="top"></a>
Replace 'top' with wherever you want the user to end up.Next, you must create the link that the user will click. For our example, we will be sticking with the “top”.
Don’t forget to include the #.
<a href="#top">Go to top</a>Images
To upload an image replace the image URL with the image URL of your own image. Usually this comes from your media library in your content management system.
In Alt text, create a short description of the image. Alt text is good for SEO.
Lastly, adjust the height and width of your image. If you do not want to adjust the height or width you can delete these out and your tag would end at the alt text.
<img src="http://www.yourdomain.com/imagename.jpg" alt="alt text" width="150px" height="150px"/>
Image as Link
What is going on here is actually quite simple. You are taking the HTML to insert a link, and wrapping it around an inserted image.
<a href="http://www.urlhere.com"><img src="http://www.yourdomain.com/imagename.jpg" alt="alt text" width="150px" height="150px"/></a>To create a linked image that opens in a new window, you’d add target=”_blank” just like you would with a regular link. See below:
<a href="http://www.urlhere.com" target="_blank"><img src="http://www.yourdomain.com/imagename.jpg" alt="alt text" width="150px" height="150px"/></a>Email Link
Create a link where people can click to contact you.
<a href="mailto:[email protected]">Contact Us</a>Numbered List
Also known as an “ordered list”.
- First Item
- Second Item
- Third Item
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
To add more list items, keep adding <li></li> tags before the closing </ol> tag.Bullet List
Also known as an “unordered list”.
- First Item
- Second Item
- Third Item
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
To add more list items, keep adding <li></li> tags before the closing </ul> tag.Table
| row 1, column 1 | row 1, column 2 | row 1, column 3 | row 1, column 4 |
| row 2, column 1 | row 2, column 2 | row 2, column 3 | row 2, column 4 |
| row 3, column 1 | row 3, column 2 | row 3, column 3 | row 3, column 4 |
Take some time looking at the table below and how the code works.
‘tr’ tags create a row, and the ‘td’ tags nested inside will create your column along the row.
To create a larger table add in more tags where necessary.
<table>
<tbody>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
<td>row 1, cell 4</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
<td>row 2, cell 4</td>
</tr>
<tr>
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
<td>row 3, cell 3</td>
<td>row 3, cell 4</td>
</tr>
</tbody>
</table>
Is there any other HTML you were hoping to see on the cheat sheet? Let me know in the comments below. If you found this article helpful I’d love if you shared it with the share buttons underneath!
This article may include affiliate links. As an Amazon Associate I earn from qualifying purchases.
Dana Nicole is an award-winning freelance writer for MarTech/SaaS who was rated one of the best SaaS writers by Software World. She specializes in writing engaging content that ranks high in search engines and has been featured in publications like Semrush, ConvertKit, and Hotjar.
Dana holds a Bachelor’s degree in Business Administration and has over 15 years of experience working alongside national brands in their marketing departments.
When Dana’s not working, you can find her dancing en pointe, cooking up new recipes, and exploring the great outdoors with her two big dogs.
Wow Dana, just wanted to say this is one of the most useful ‘how to blog’ posts that I’ve found, and I read A LOT of them! Thanks so much, I am saving this page for future use! Megan X
I like how you briefed it all :). If you want to add you can add textview, label, radio buttons (basically inputs) & form details. But otherwise too it is awesome !