HTML HTML intro.
  1. HTML intro
  2. Web pages and you
HTML basics
  1. HTML getting started
  2. HTML basics
  3. HTML document
HTML text
  1. HTML text formatting 1
  2. HTML text formatting 2
  3. HTML text formatting 3
  4. HTML fonts
  5. HTML entities
HTML links
  1. HTML links
  2. HTML email links
HTML images
  1. HTML images
  2. HTML image maps
HTML forms
  1. HTML forms
  2. HTML form labels
  3. HTML fieldset/legend
HTML tables
  1. HTML tables
  2. HTML tables concepts
HTML frames
  1. HTML frames
HTML backgrounds/color
  1. HTML backgrounds
  2. HTML colors
  3. HTML color shades
  4. HTML color usage
HTML style/layout
  1. HTML stylesheets
  2. HTML div/span
HTML media
  1. HTML audio
  2. HTML video
  3. HTML objects
  4. HTML download media
HTML declaratives
  1. HTML head section
  2. HTML meta tags
  3. HTML scripts
  4. HTML declarations
  5. HTML document types
Practical HTML
  1. HTML tag rules
  2. HTML things to avoid
  3. URL formatting
  4. URL encoding/decoding
  5. HTML use/access
  6. HTML publish work
HTML extras
  1. HTML marquees
HTML wrap-up
  1. HTML history
  2. HTML summary

HTML things to avoid

As certain rules should be followed when working with HTML, certain things should also be avoided to keep things running smoothly and efficiently. It is also necessary to think long term and to consider if the code you write today will be working correctly tomorrow, in a week, and so on.

This tutorial focuses on:

Backwards directory linking

You will probably come across situations where you want to link to a file that is in a directory below the file from which you are linking.

You are working with the website
You are working on a file named books.html located in the directory 'catalog', which is located in the directory 'view'

In the browser, the path to this file would be
From this file, you want to link to the file about.html located in the root directory.
In the browser, the path to about.html would be

How should the link to about.html from books.html look like since it is two directories above it?

Some people will use the code to go back a directory which is ../. This is actually a popular method on some operating systems, but on the web its usage is not good.

Using this, the link to about.html from books.html would look like this:

<a href="../../about.html">About Us</a>

Remember that each ../ goes back a directory, so using it twice as in the above example would go back two directories and try to access the file about.html.

But what if one of the files changes location? There has to be a better way to link to files in other directories. And there is.

The better way to link to files in other directories is to use the / character to begin links. Using this character at the beginning of links (when you are linking within your own website) refers to the root directory.


The page html-introduction.php is located at and we want to put a link on it to the page html-quick-list.php located at

The link would look like this:

<a href="/html-reference/html-quick-list.php">

Notice the / character in the beginning of the link? This character means the root directory. When you put it in a link, you're saying that the link should start from the root directory of the website.

Had html-quick-list.php been located in the same directory as html-introduction.php, the link could instead look like this:

<a href="html-quick-list.php">

However, it is generally good practice to begin all internal links with the / character (even if the pages are in the same directory) since you don't know if the page you're linking from may move to another directory in the future.


Hotlinking is the process by which you display a resource (such as an image) from another website. There are many issues involved with hotlinking, and it should generally be avoided.

Hotlinked resource might be copyright

If you hotlink from another website without permission from whoever runs the website, this may be an act of copyright infringement.

Hotlinking takes alot of bandwidth

If you hotlink from another website, when people access the hotlinked resource(s) this results in consumption of bandwidth for the website where the resource is actually located. Some websites can't afford to have their bandwidth used up from external sources, and having bandwidth more used up than it normally would be because of hotlinking can lead to negative results for the website where the resource is actually located.

Legitimate hotlinking

Yes, there are ways to hotlink legitemately.

Get permission

If you have permission from a websites owner to hotlink from their site, then its ok. But don't abuse this privilege and don't ever depend on it as they might ask you to stop at anytime.

Use an image hosting site

You can hotlink using an image hosting site such as or In fact, if you're going to hotlink from a site, why not upload the image(s) you're going to hotlink to one of these mentioned sites first, and hotlink from there! There are limitations however, as image hosting sites only give you a very limited amount of bandwidth, and once that limited amount of bandwidth is up, the image(s) won't appear. Keep this in mind when using an image hosting site for hotlinking.

Absolute URL's

Obviously when linking to another site, absolute URL's are necessary. But definitely not when linking within your own site. Technically, you can use absolute URL's when linking within your own site, but why? It will just take more time, increase loading time, and make code less pleasant to work with. Whenever linking within your own website, start the link with the / character to refer to the root directory as the starting point for the link and work from there.

Breaking tag rules

Don't break HTML tag rules. Doing so may result in pages that do not validate with an HTML validator and/or do not display correctly in a web browser. With tag rules, the goal is to have valid code as well as display a webpage as intended.

Some of the tag rules include having a correct tag order, keeping tags (and their attributes) lowercase, and always closing tags. For more information about tag rules, read our HTML tag rules page.

Using deprecated features

While having deprecated features (such as the <font> tag) in your pages will result in a validated page if you're using the Transitional DTD or the Frameset DTD, it will not result in a validated page if you're using the Strict DTD.

Read more about DTD's at our HTML document types page.

© Copyright 2013-2014
Terms of use | Privacy policy | Copyright information