Web Design / HTML

  1. Home
  2. Computing & Technology
  3. Web Design / HTML
Quick HTML Refresher
Five Tips to Keep in Mind When Creating a Web Page
 Related Resources
• Speedy Web Pages
• Improving on the Image Tag
• 10 Tips to a Great Web Page
• HTML Quick References
 
 From Other Guides
• Personal Web Pages: Basic HTML
• Personal Web Pages: Add Graphics
 
 Stay Up-to-Date
  with Web Design
  Email:
  

By Jennifer Kyrnin

When you create Web pages, there are a few things that can help make the pages load more quickly, and the pages be more available for your readers. These are tips that I've given the developers on my team, and now I'm passing them along to you.

  1. Images - always use an ALT tag with your images. This is so that the image is accessible to non-visual browsers and also so that there is a little "pop-up" text information when you hover your mouse over the image. Verify that the alt-text matches the image. It can be common to create alt text that describes the image, but not what it says. For example, many companies put their logo on their pages with the alt text "company logo". But when a screen reader reads it, it makes more sense to read "About, Inc."

    Also with images, always use the exact height and width of the image in the image tag. i.e. <img src="image.gif" height="65" width="34" alt="image" border="0"> When you don't put in the exact height and width, the browser has to guess and this makes the page take longer to load.

    Finally, with images it's a good idea to use the border="0" attribute. It isn't required, but if that image is changed into a link, it will have a bright blue border around it, which usually distracts from the look of the page.


  2. Links - always test your links before you finish a Web page. Your readers will, and they will get annoyed by broken links. And most readers will not write to you to tell you a link is broken, they will just leave.


  3. URLs - both for images and links - make sure that you use a full-path URL for all images and links that are your Web server. These URLs should not include the http://www.domain.com - but they should include everything from the first slash (/) after the server name. This is because if the page is moved, or a symbolic link is created to it, the images and links will not be broken. This is especially important to watch if you write the pages in an editor offline and then upload them. look at the HTML before you upload to make sure that the URLs are full-path and not relative.


  4. TEST YOUR PAGES - it helps if you can test your pages on a testing server before you put them live. This allows you to put pages up in the Web environment, see how they look, and not be worried that they might be seen by a customer.

    I freely admit that I am guilty of this too, but try to stay in the habit. It's worth the effort, and your customers will thank you.


  5. Other minor things - <p> and </p> Treat the <p> tag as you would the <b> or <i> tag. Surround each paragraph with a <p></p> tag group. This is important as HTML is getting more strict and tags that didn't require end tags are now beginning to. It's good to get in the habit now.

    Nesting: If you open a <b> and then a <i> you should close the </i> first, and then the </b>. This will keep browsers from getting confused, and it is also a rule in strict HTML.

    Quoting attributes: It's a good idea to quote, using double quotes ("), all attributes. For example, <img src="filename" border="0"> The latest standard of HTML requires it and it helps keep your HTML more standardized.

Previous Features

Explore Web Design / HTML

About.com Special Features

Build Your Own Website

Step-by-step advice on how to do everything from choosing a Web host to promoting your content. More >

Connect Your Home Computers

Easy ways to connect two computers for networking purposes. More >

Web Design / HTML

  1. Home
  2. Computing & Technology
  3. Web Design / HTML

©2009 About.com, a part of The New York Times Company.

All rights reserved.