The Complete HTML cheat sheet for your website

Dana NicoleEntrepreneur Tips1 Comment

image with text overlay: your complete HTML cheat sheet

Learn to rank your website higher in the search results for more traffic! Sign up for my free SEO workshop!

    Last updated on March 26th, 2021

    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> 
    <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"/>
    <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”.

    1. First Item
    2. Second Item
    3. 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.

    About the Author

    Dana Nicole

    Facebook Twitter Instagram Pinterest

    Dana Nicole is a freelance SEO writer. She has a Bachelor of Business with a major in marketing and has over 10 years of experience in marketing. Dana currently works with B2B and SaaS clients and uses her blog to help small businesses and bloggers learn online marketing. Learn more about me here.

    One Comment on “The Complete HTML cheat sheet for your website”

    1. 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

    Leave a Reply

    Your email address will not be published. Required fields are marked *