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 lesson focuses on:
- Backwards directory linking
- Hotlinking
- Absolute URL's
- Breaking tag rules
- Using deprecated features
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.
Example:
You are working with the website www.asite.com
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 www.asite.com/view/catalog/books.html.
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 www.asite.com/about.html.
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:
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.
Situation:
The page html-introduction.php is located at http://www.landofcode.com.com/html/html-introduction.php and we want to put a link on it to the page html-quick-list.php located at http://www.landofcode.com/html-reference/html-quick-list.php
The link would look like this:
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:
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
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 www.tinypic.com or www.imageshack.us. 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. For more information about this concept refer to the first section in this lesson titled "Backwards directory linking" or read our HTML links page.
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.
As deprecated features become less and less popular, one day all HTML documents will use the Strict DTD. It is good to get into the habit of using the Strict DTD convention now, as it will one day be the norm.
Read more about DTD's at our HTML document types lesson.
