head How-tos

An HTML Cheat Sheet That Never Fails

HTML, the skeletal structure of the Internet. Perhaps unknowingly you have browsed through hundreds, if not thousands – even hundreds of thousands of HTML code. HTML dictates what that page you’re looking at displays. It formats the text to ensure it makes sense. More frequently now though we are coming into direct contact with the code itself. We are being invited to write our own code to customise the web to our demands. This could be within your blog, forums you use, and even your email. If you aren’t familiar with what you’re seeing, it can be more than a little daunting. Often there is a way around having use the code, but that’s not always the case.

Not only is it important to be familiar with what you’re seeing, but it’s also extremely useful to have a working knowledge of basic HTML. It will give you more flexibility with text editors, allowing you to do things you otherwise can’t. Learning a bit of HTML also gives you the chance to alter your web or blog design to improve the way it looks and to easily add short code or script that enhances your site.

However, HTML is a broad language and there is a lot to memorize. That’s why the following cheat sheet has been provided, providing easy reference to the most common and useful HTML codes.

Basic HTML Page

 

These are the basic beginnings of an HTML page. You’ll only need this if you are building an HTML page from scratch but otherwise would not need it when just altering a part of pre-existing code.

<html>

    <head>

        <title>This is what shows up at the top of the browser for the page</title>

    </head>

    <body>

        This is where the main content of your page goes, including all HTML formatting.

    </body>

</html>

The Basics of Text

The following codes are used to alter the appearance of your text. They are placed around the text you want them to affect.

Bold

<b>text</b> 

This code makes the text appear bold.

Italic

<i>text</i> 

This code makes the text appear italicized.

Underline

<u>text<u> 

This code underlines the text.

Strikethrough

<strike>text</strike> 

This creates a line through the text.

<del>text</del> and <s>text</s> also often work.

Color

<font color=darkred>text</font>

This changes the color of the text.

Font 

<font face=tahoma>text</font> 

This changes the font of the text.

Size 

<font size=1>text</font> 

This changes the size of the text. The smaller the number, the smaller the text, with 1 generally being the lowest accepted value.

 

Formatting

 

Once you’ve got your text written and looking the way you want it, you’ll need to know how to get it to show up where you want it on the page. There are several ways to do that with HTML – listed below – but these days it is considered more effective to use Cascading Style Sheets (CSS). These are a little more advanced than basic HTML, but also more versatile. For more on what CSS is and how it works, take a look at w3schools.com’s Introduction to CSS.

 

Center 

<center>….<center> 

This code can be used to center anything you need from text to links to images.

Align Right 

<p align=right>…</p> 

This will align your text to the right of the page

Align Left

<p align=left>…</p> 

Your page will default to this, so it is highly unlikely that you will ever need to use it.

Space 

&nbsp; 

HTML does not read multiple spaces, so you may need to manually enter them. Repeat &nbsp; as many times as required to create the space that you need.

New Line 

<br> 

BR is a break that starts a new line for you wherever you need it. You can use several in a row to go down several lines.

Paragraph 

<p>…</p> 

This separates a paragraph, putting some space above and below it.

 

Links

 

The following codes are needed when linking to another page, image, or email address. The link name can also be formatted using the font codes above to give it a different look.

 

Link 

<a href=”http://url/”>Website</a>

This is the basic structure of a simple link.

Name 

<a href=”http://url/” name=”Name”>Website</a>

This allows you to give it a name.

Target 

<a href=”"http://url/” target=”…”>Website</a>

This allows you to define where the link will open. Replace … with _self to open in the same window, _blank to open in a new tab or window.

mailto 

<a href=”mailto:email”>Send Email</a>

This will open up the persons default setting for email, automatically starting an email to the address specified

 

Images

 

They say that a picture is worth a thousand words, which means that you should know how to use them when you want to. This section details how you can add and edit an image to fit it into your code exactly where and how you want it.

 

Image 

<img src=”direct link to image”> 

This is the basic format for an image. This can also be used as a link by adding the entire image code where it says ‘website’ in the link code above.

Height 

<img src=”direct link to image” height=”xx”>

If you need to make an image a specific height, use this. The value you put in for xx will be in pixels.

Width 

<img src=”direct link to image” width=”xx”> 

If you need to make an image a specific width, use this. The value you put in for xx will be in pixels.

Border 

<img src=”direct link to image” border=”x”> 

If you do not want a border and one shows, use 0 for x. If you want one, put in a value. The larger the number, the larger the border

Alt 

<img src=”direct link to image” alt=”Name”>

Sometimes, a visitor’s images will not display (due to a few reasons). In this case, ‘alt’ shows them the text you’ve entered instead of the image that would otherwise be there

Align 

<img src=”direct link to image” align=”…”>

This aligns the image around the surrounding text. You can use top, middle, or bottom.

vspace 

<img src=”direct link to image” vspace=”xx”> 

This creates space above or below the image. The value for xx is in pixels.

hspace 

<img src=”direct link to image” hspace=”xx”>

This creates space to each side of the image. The value for xx is in pixels.

 

 

Tables

 

Setting up tables can be tricky, but here are the basic codes. All of the values below the Column can also be used for individual columns or rows by adding them to the <tr> or <td> tags instead of the table tag. The setup for a table is as follows:

<table>

        <tr>

            <td> What goes in the cell. </td>

            <td> What goes in the next cell.</td>

        </tr>

</table>

 

 

Row 

<tr> </tr> 

This creates a new vertical row.

Column 

<td> </td> 

This creates a new horizontal column in your table.

Border 

<table border=”xx”> 

If you do not want a border, use 0 for xx. If you do, put in a value in pixels.

Cellspacing  

<table cellspacing=”xx”> 

This represents the space between the cells

Cellpadding 

<table cellpadding=”xx”> 

This pads the space between the wall and the content.

Align 

<td align=”…”> 

This will align the content to the left, center, or right

bgcolor 

<table bgcolor=”red”> 

This changes the background color.

Width 

<table width=”xx”> 

Defines the width of the table.

Height 

<table height=”xx”> 

Defines the height of the table.

Align 

<td align=”…”> 

This will align the content to the left, center, or right

bgcolor 

<table bgcolor=”red”> 

This changes the background color.

 

These are a collection of the most important HTML codes that you may encounter when editing your content or creating simple web pages. If you want some more excellent HTML tips try one of my favorite HTML sites: htmlgoodies.com. And if you’re ready to get started designing, you should compare some different hosting options and try out your new skills!

 

What will you be using this list for? Comment below.


James Harding considers himself a perennial student, who is always open to learning anything new he can about SEO. He has expertise in many aspects of SEO and has ghost-written a number of articles on its various aspects. He feels social media marketing and blogging are the future.

One comment

  1. Luis Soares

    is more correct than

    name attribute in a is deprecated I believe

    Very nice sheet anyway

Leave a Reply

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