Quick HTML Refresher
Simple Tips to Keep in Mind When Creating a Web Page
By Jennifer Kyrnin, About.com Guide
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.
- Images—always use an alt text with your images. This is so that the image is accessible to non-visual browsers. 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.com”
- Also with images, always use the exact height and width of the image in the image tag. For example:
<img src="image.gif" height="65" width="34" alt="image">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
borderattribute. 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. - 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.
- 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. - 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.
- Other minor things—Nesting tags: If you open one tag, and then open a second, you should close the second tag before you close the first tag.
- Quoting attributes: It's a good idea to quote, using double quotes ("), all attributes. For example,
<img src="filename" border="0">. This is required in HTML 4 but HTML5 does not require quotes on attributes.
