Join Sue Jenkins for an in-depth discussion in this video Understanding links and paths to write better code, part of Productivity Tips for Web Designers.
- Hi there, this is Sue Jenkins with Productivity Tips for Web Designers. In this installment, you'll learn about the differences between document-relative, absolute, and site root-relative links and paths so you can write better code. Every link and image on a web page has underlying code that includes the path, or directions, to that linked file or image. How you write the paths to your pages and file assets depends on the type of site you're building and how you want to code it.
In HTML, there are three types of paths that you can use to build your site depending on your needs. Absolute paths, document-relative paths, and site root-relative paths. An absolute path includes the full URL to a file or asset. We always use absolute paths, or hardcoded paths, when linking to a page outside our domain. For example, if we link to our company's page on a social media site, we'll want to include the full URL to that location.
The absolute path to lynda.com on facebook would be https:// www.facebook.com/lynda. As a rule, we try not to use absolute paths locally, because these absolute paths can be easily broken if we move our files around within our managed site, or move the files to another domain. In other words, if you're linking from one page to the next within the same site, you'll want to use document-relative paths, instead.
As the name implies, a document-relative path is a path that clearly defines the path and file name of the target destination within the same domain, whether that's a web page, a CSS file, an image, or some other asset. Think of document-relative links as defining the path from here to there, wherever here and there happen to be. When two files are in the same general location, you only need to list the file name. Otherwise, the path needs to include the location of the file along with the file name.
For example, the link from a homepage to a Contact page would be something like contact.html. And the path to an image of a map sitting inside an Images folder might be images/map.png. For arguments sake, let's say you have a large website requiring several sub-folders to house the HTML files for different sections of a site, such as a folder called About that contains HTML files called About, Mission, and History.
In this case, linking from the homepage to the History page would require the path about/history.html. To move from inside the About folder, back up to the homepage at the root level of your site, however, you'll need to add two periods and a slash before the file name, as in ../index.html. The two dots tell the browser to move up a level in the Sites folder hierarchy, which is sometimes referred to as moving to a superior directory.
The more nested folders you have, the more sets of move up a level instructions you'll need in your path. So if you have a file called Board of Directors, inside a folder called Staff, inside a folder called About, you'll want to link from that page back to the homepage sing a link like ../../index.html. Similar to document-relative paths, site root-relative paths include the path and file name you want to link to, but the path always tells the browser to begin searching for the specified file starting at the root level.
The root level is represented as a forward slash at the start of the path. Using this logic the path from another file at the root level to the homepage would be /index.html. Likewise, the path to another file at the root level would include the slash and file name, like /contact.html. And the path to the file inside a sub-folder at the root level would require the slash before the full path such as /about/history.html.
When determining which type of path to use, think about the paths purpose and the relative size of your site. Always use absolute paths for any links that go outside your domain. If your site is small, use document-relative paths for linking to pages and resources that do not use dynamic data. Otherwise, use site root-relative paths if your site is large. if your site uses Server Side Includes, or if your site is built with a CMS system like Wordpress, Druple, or Jumla.
Now I'd like to challenge you to a quick quiz. Pause the video for a few minutes to write down your answers to these questions. When you're finished, return to the video to see how many you got right. Let's see how you did. The first answer directs the browser to the News folder and then the inthenews.html file inside of it. The second answer starts at the root level with the slash, the name of the folder, and the joinmailinglist.html file inside that folder.
The third answer is the absolute path to Google which includes the http://. The fourth answer is a document-relative path that tells the browser it must go up a level to get to the index.html file. Now that you have a good understanding about links and paths, you should be able to code your pages cleanly the first time you create a link, or insert a media file. What's more, and this is especially important for inherited websites and redesigned projects, knowing the differences between absolute, document-relative, and site root-relative paths gives you the ability to read your paths for accuracy, and correct them appropriately, when needed.
And when your paths work, your site works.
Skill Level Appropriate for all
Q: In "Organic and ethical SEO coding," the author mentions Google+ Authorship. I heard Authorship results are no longer shown in Google search results. Why? Are there benefits to keeping the Google+ Authorship markup on my site?
A: As of September 2014, Google discontinued Google+ Authorship for SEO. The only reason to keep the code on your site would be for Author Rank purposes. See http://searchengineland.com/google-authorship-dead-author-rank-202254 for more information.