• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Web Development / HTML / 10 HTML Tips for Beginners

10 HTML Tips for Beginners

12 March 2002 / 2 Comments

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
With XHTML markup, you even have to close tags like br and img. You can do this in a short-hand way by placing a "/" before the closing angle bracket (">") – for example, <br/> and <img ... />. Find out more about XHTML in our XHTML tutorials.

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:


&nbsp;

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!

Filed Under: HTML Tagged With: hints, html basics, html comments, html help, html images, html space, html styles, HTML tips, html tutorials, starting out, web building advice, webmaster

Reader Interactions

Comments

  1. Amirtha says

    24 April 2015 at 6:31 am

    As i am a fresher to the developing world, this html beginners article helps me to improve my knowledge thanks…

    Reply
  2. Ella Jones says

    29 April 2015 at 2:53 am

    All tips are very useful and important. By practicing these tips many coding blunders can be avoided.

    [Edited by Ella Jones on 29-Apr-15 02:54]

    Reply

Leave a Reply Cancel reply

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

To include a block of code in your comment, surround it with <pre> ... </pre> tags. You can include smaller code snippets inside some normal text by surrounding them with <code> ... </code> tags.

Allowed tags in comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre> .

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits