How to Avoid Common Mistakes in URL Links

By Ed Tittel, Chris Minnick

Every web resource — site, page, or image — has a unique URL. Even one incorrect letter in a URL creates a broken link, which leads to an error page (usually the HTTP error 404 File or directory not found).

URLs are so finicky that a simple typo — sometimes even a mistake in capitalization — breaks a link. Be sure to proofread your work and heed the following tips, which help you steer clear of avoidable missteps.

If a URL doesn’t work, try these tactics:

  • Check the capitalization. Some web servers (Linux and Unix, most notably) are case-sensitive (they distinguish between capital and lowercase letters). For example, such servers treat the filenames Bios.html and bios.html as different files on the web server. That means any browser looking for a particular URL must use uppercase and lowercase letters when necessary. Be sure that the capitalization in the link matches the capitalization for the URL.

    To avoid problems with files on your website, follow a standard naming convention. Often, using only lowercase letters can simplify your life.

  • Check the extension. Bios.htm and Bios.html are two different files. If your link’s URL uses one extension and the actual filename uses another, your link won’t work.

    To avoid problems with extensions on your website, pick either .html or .htm and stick to that extension.

  • Check the filename. For example, bio.html and bios.html are two different files.

  • Copy and paste. Avoid retyping a URL if you can copy it. The best and most foolproof way to create a URL that works is as follows:

    1. a.Load a page in your browser.

    2. b.Copy the URL from the browser’s address or link text box.

    3. c.Paste the URL into your HTML markup.

The copy-and-paste method for grabbing URLs presumes that you’re grabbing them from a website somewhere. If you open a local file on your PC in a browser, you see something that looks like this: file:///I:/H4D8e/html_letter.html. Here’s how to decipher it:

  • file:/// is a common browser convention used to identify the document as a file in your local file system. It’s used in Internet Explorer, Chrome, Firefox, and Safari but not Opera: It uses localhost/C: for local filesystem and drive designations instead.

  • I:/ is a drive letter.

  • H4D8e/ is a folder or directory on that drive.

  • html_letter.html — the rightmost text element, in this case — is the name of the HTML file you opened.

You can’t use URLs like this on a website, so please — don’t try to!

Browsers make surfing the web as easy as possible. If you type www.sun.com, sun.com, or often even just sun in your browser’s address window, the browser obligingly brings up http://www.oracle.com/us/sun/index.html. Although this technique works when you type URLs into your browser window, it doesn’t work when you’re writing markup.

The URLs that you use in your HTML markup must be fully formed (complete in every detail). Browsers won’t interpret URLs that don’t include the page protocol. If you forget the http://, your link may not work!

Most people have had at least one letter returned and marked undeliverable because of an incomplete or inaccurate address. When the address isn’t correct, the post office has no way to locate the intended recipient. The same is true for URLs. Without a fully formed URL, web servers don’t know how to locate the target web page. URLs generally take the following form:

  • Protocol identifier followed by a colon (:) — This is generally either http for Hypertext Transport Protocol, https for secure-server sites, or ftp for file transfer sites.

  • Hostname — This is generally either a domain name such as edtittel.com or an IP address. The hostname is always preceded by two slashes (//).

  • Directory path — Directory paths are preceded by a forward slash (/), and they direct the user to the specific web page being sought.

Thus, a fully formed URL takes this general form: <protocolidentifier>://<hostname>/<directorypath>. And, for example, a fully formed URL is http://www.mywebsite.com/mywebpage.