10 HTML Tips for Beginners

Here are 10 HTML tips and tricks for newbies. If you’re just starting out with building your Web pages, these techniques should be very useful to you!

1. Always close your HTML tags

When you type an opening HTML tag (e.g. <b>, <p>), always place the corresponding closing tag at the end. For example:

• <b>My favourite animals are horses and elephants.</b>
• <p>My favourite animals are horses and elephants.</p>
• <h2>My favourite animals are horses and elephants.</h2>

This will ensure that your HTML pages work properly on all browsers, and will help to prevent any strange problems occurring in your pages! This is especially important with tags such as <div>, <span>, <table>, <tr> and <td>.

Some tags don’t have a corresponding closing tag – just use these tags on their own. Examples include:

• The <br> tag, for creating line breaks
• The <img> tag, for inserting images

2. Style HTML using style sheets wherever possible

Style sheets will make your HTML coding life so much easier. No more <font> tags everywhere! You also get much finer control over the way your pages look, and you can change their appearance just by editing one style sheet file.

If you haven’t worked with style sheets yet, pop over to our CSS tutorials to get going!

3. Use an HTML validator

It’s a great idea to run your Web pages through an HTML validator before you publish them on your Web site. These programs will pick up potential problems such as missing closing tags on tables, and using tags that won’t work properly on all browsers. Don’t forget – just because your page looks great in the browser you’re viewing it with doesn’t mean it will work on other browsers!

HTML validators are also a good way to learn about the correct way to use HTML tags – you can learn from your mistakes!

Some good free validators on the Web include the W3C Markup Validation Service and the WDG HTML Validator. Many modern web authoring packages have built-in HTML checkers too.

4. Use HTML comments wisely

To make your HTML code clearer for you (and for others), you can add comments to your code. These are snippets of code that are ignored by Web browsers, so they’re useful for adding short notes and reminders within the code:

<!-- Navigation area: Highlight a menu item with the "hi" class -->

<div id="nav">
  <ul>
    <li><a href="/">Home</a></li>
    <li class="hi"><a href="/about/">About</a></li>
  </ul>
</div>

Learn how to write and use comments in our HTML Comments tutorial.

5. Embedding images in HTML

Pointing correctly to images using the <img> tag is a common stumbling block for beginners. Often your Web page will look great on your desktop PC, but when you upload the page to your site, all the images are broken!

The problem isn’t helped by some web page editors, which incorrectly place “file://” image URLs instead of using relative URLs!

Follow these simple rules to make sure your HTML images appear correctly every time.

A) If possible, use relative URLs

Relative URLs are usually the best to use because they will work wherever the page and images are located, provided they’re always in the same place relative to each other. For example, if the image is in the same folder as the Web page, use:

<img src="myphoto.jpg">

If the image is in an images folder at the same level as the Web page, use:

<img src="images/myphoto.jpg">

If the image is in an images folder at a level above the Web page, use:

<img src="../images/myphoto.jpg">

B) Alternatively, use URLs relative to the document root

If you have all your images in an images folder in the top level of your site (the document root or web root), you can reference images like this:

<img src="/images/myphoto.jpg">

This has the advantage that you can move your Web page anywhere within your site, and the images will still display, provided you keep the images in this global images folder.

The disadvantage of this approach is that it will only work when your Web pages are being displayed via a Web server (using http://), not when viewed directly from your hard drive (using file://).

C) Do not use absolute URLs!

If at all possible, avoid using absolute URLs within your site. An absolute URL is a URL that begins with http:// or file://. In particular, if the Web page on your hard drive contains an image URL like this:

<img src="file:///C:|/mywebsite/images/myphoto.jpg">

it will not work when you upload it to your Web server, as the img tag is directly referencing the file on your hard drive! Change the link to a relative link such as:

<img src="myphoto.jpg">

or maybe:

<img src="../images/myphoto.jpg">

as described in Rule A above.

You can find more information on images in Web pages by reading our HTML Images tutorial!

6. Use widths and heights with HTML images

It’s a good idea to specify the width and height of an image when using an <img> tag. For example:

<img src="myphoto.jpg" width="234" height="123">

The advantage of doing this is that the Web browser can format the page more quickly as it is loaded, as it knows how to lay out the images before they’ve been downloaded. This means that your visitors can start surfing your page without having to wait for all the images to display!

Most graphics packages (Photoshop, Paint Shop Pro, etc) allow you to view the width and height of an image (in pixels) so that you can slot the values into the <img> tag. You can also right-click on the image and select Properties (in Internet Explorer) or view the image in a window on its own and read the width and height in the title bar (in most other browsers).

7. Non-breaking spaces in HTML

Sometimes you want to keep certain words together so that they’re not split over two lines. The way to do this is with a non-breaking space. In HTML the markup for a non-breaking space looks like this:

 

For example, the following words will wrap if they fall at the end of a line:

<p>The quick brown fox</p>

while this example, which uses a non-breaking space, will keep the words “brown” and “fox” together even if they fall at the end of a line:

<p>The quick brown&nbsp;fox</p>

8. Use tables for tabular data, CSS for layout

Tables have traditionally been used to lay out content on the page; however this was never their intended use. They’re really meant to be used for displaying tabular data (such as data from a spreadsheet, for example).

With the positioning capabilities of CSS, you can build HTML pages that just contain the page content, and use a separate style sheet to lay the content out. Although it has a steeper learning curve than tables-based layouts, CSS positioning is well worth learning as your resulting sites will be faster-loading, easier to maintain and more accessible.

CSS positioning can also do a lot of cool tricks that are very hard with tables, and you can also change the entire look of your site just by changing your style sheet (a great example of this is CSS Zen Garden).

If you’re new to CSS, check out our CSS articles.

9. Creating empty table cells

Sometimes you’ll want to create table cells (<td>s) with nothing in them; for example, when a particular row doesn’t have any data for one of its columns. Usually, the best way to create an empty table cell is with a non-breaking space, as follows:

<td>&nbsp;</td>

Don’t just use <td></td> as this will cause your tables to appear rather strange on some browsers!

Find out more about tables in our HTML Tables tutorial.

10. The spacer GIF trick

For really precise control over page layout, and if you haven’t yet got the hang of CSS positioning, you can’t beat the old spacer GIF trick. This involves using a 1 pixel x 1 pixel transparent GIF, which will be invisible in your Web pages, and using the width and height attributes to control the precise padding between page elements such as images, text and table cells. For example, the code:

<img src="one.gif" width="20" height="20" border="0">
<img src="space.gif" width="10" height="1" border="0">
<img src="two.gif" width="20" height="20" border="0">

will create a 10-pixel horizontal gap between the two images, one.gif and two.gif.

You can use spacer GIFs in table cells to “pad out” the table cell and make sure it doesn’t shrink below a certain width or height. In this code example:

<td><img src="space.gif" width="1" height="20" border="0"></td>

the table cell will always be at least 20 pixels high.

It’s easy to make a spacer GIF in your graphics package – create a new 1 pixel x 1 pixel image then save it as a GIF with a transparent background. Alternatively you can download one here (zipped up for easier download).

Of course, these days you should really be using CSS positioning to lay out your content. 🙂

Hopefully you’ve enjoyed these HTML tips and found them useful. Good luck with your website!