Relative and Absolute References

When an HTML file references another file — such as an image file referenced by an <img> element, or a CSS style sheet file referenced by a <link> element, or another HTML file referenced by an <a> hyperlink element — that reference can be either relative or absolute.

Most of the time, a relative reference is preferable, since relative references are less likely to break when files are moved. Relative references don’t depend on the absolute location of a file on your local computer or remote Web server. They only describe where a desired file is in relation to the one you’re in. For example:

• The relative reference “photo.jpg” means “find the file ‘photo.jpg’ in the same directory (folder) as the HTML file that’s referencing it.
• The relative reference “../img/photo.jpg” means “find the file ‘photo.jpg’ in an “img” directory, that’s one directory up from the one that contains this HTML file.

Sometimes an absolute reference is appropriate. A link to another website, for example, will always be absolute (such as “http://twitter.com”). An absolute reference on the local file system may look like “/Users/me/Pictures/birthday.jpg” or “file:///Users/me/Pictures/birthday.jpg”.

When TypeMetal Uses Absolute References

When TypeMetal has a choice, it uses relative references most of the time. This helps keep your HTML files compact and maximally portable to and from Web servers and other storage devices, computers, or user accounts.

TypeMetal uses an absolute reference when associating one of its own bundled style sheets with an HTML file, so you can move the file elsewhere without the reference breaking. The bundled style sheet is referenced in TypeMetal’s app bundle, which usually lives in /Applications.

Be aware that if you move the TypeMetal app to a different folder, references to its bundled style sheets in existing HTML files will break and need to be updated. This can be done by clearing the style sheet association to “None” and then setting it again, using the style sheet picker toolbar control or menu.

TypeMetal also uses absolute references in “Untitled” files. When you Save an “Untitled” file, giving it a more permanent home, TypeMetal changes those absolute references to relative.