Understanding URLs -Beginners Guide

Understanding urlsURLs (Uniform resource locators) are everywhere today.

You will find them on business cards, in newspapers, emails and of course on websites.

But what exactly is a URL?

URL Definition:

A URL is defined as the absolute address of a web page/resource on the Internet. It is also called the web address.

A URL is composed of four distinct parts although not all parts are always visible, and all parts are not always needed.

The URL structure is:

Protocol + Domain Name +Port + Path to file/resource.

However generally when you type the address into a web browser the port number is omitted:

URL Example:

url explained

  • Protocol= http for websites.
  • domain name= www.build-your-website.co.uk
  • Port Number=TCP/UDP socket or port number .Websites normally use port 80 as default.
  • Path to file=html/index.htm

The protocol in this case http is the hypertext transfer protocol which is used by web browsers to get web pages, and is the most common one you will encounter.

The protocol is separated from the domain name with delimiters which are the colon plus two forward slashes- ://

Other protocols you may see here are:

understanding urls

The domain name is, in effect, the name of the Web site or web server and is discussed in more detail in understaning domain names.

The above URL is an absolute URL, in that, all parts are specified.
It is also what most people type into the browser window.

However most modern browsers tend to drop the protocol, and so this is usually how it it displayed by most browsers when you visit
the site:

url parts

Port Numbers

There is still one more element to consider, and that is the port number.

This is almost always omitted when typing urls into a web browser as 99% of all web servers use the default port of 80, and the browser knows this.

The port number is only ever used (entered) when the web server uses another port e.g. 8080 which you only really find in a test environment.

URL parts with Port nUmber

Notice it appears after the domain name and is separated by a colon.

URL’s and LInks

A URL generally represents a link to a web page. When creating links to web pages there are two choices:

  1. An Absolute link
  2. A Relative link

An absolute link specify the resource exactly by including all essential elements.

This is an example of an absolute link:

absolute-link

This is an example of  a relative link:

relative-link

If the resource is on your Web site then either a relative URL or absolute URL can be used.

A relative URL or relative path tells the browser the resources position relative to the current position i.e. web page.

If we look at the file layout for an example website as shown below:

page layout and relative path

If you are currently reading the web page create-webpage.htm and want to access the page publishing.htm then the relative path is simply— publishing.htm— as both files are in the same directory. The directory being courses.

When accessing files on your own Web site you can use relative or absolute urls. When accessing web pages on other site you must always use the full or absolute  pathname (URL) .

However absolute links or urls  are recommended for internal links.

URLs In Web Editors and WordPress

When linking between pages in a site using a web editor like FrontPage or Dreamweaver then the editor will usually use relative links, and not absolute links.

If editing pages on a WordPress site then WordPress will use absolute URL by default, but you can edit the link to create a relative link. See how to create links in WordPress.

There are also plugins available to convert absolute links to relative links.

Canonical URLs Explained

A web page can often be reached by several URLs. For Example

  • www.example.com
  • example.com
  • www.example.com/index.htm

These could all point to the same web page and usually do, but they could also be different web pages.

If they all resolve to the same page then which is is real URL?

This is important for search engines and SEO, and so to avoid search engines interpreting them as 3 separate pages with the same content, you need to tell the search engines that they are all the same, and what the main URL or canonical URL is.

Generally in the example above the main URL would be www.example.com.

URL Redirection

This is a common practice and is used when

  • Web Pages are moved
  • Web Pages are renamed
  • Web Pages are deleted.
  • URLs are shortened

URL redirection can be achieved in several ways but the most common way is using a 301 or 302 redirect in the .htaccess file, although other methods are possible.

On WordPress you should use a redirection plugin and then you don’t need to manually edit the .htaccess file.

URL Shortening

URL shortening is very useful if you have very long URLs, and is accomplished using php/asp scripting as it involves using a database lookup.

The database maps the short url to the long url. See wiki for more details.

WordPress can use page numbers as well as page names, and has it’s own built in URL short link generator (screen shot below).

WordPress-shortlink

Clicking the links give the following url:

wordpress-pagenumber-shortlink

URL and Link Quick Quiz

Question 1- Is the Following a relative or absolute link
www.build-your-website.co.uk
Question 2- When entering a URL into a browser do you have to type in the port number ?
Question 3- On your website can you use absolute links for Internal Links
Question 4- Is this a valid URL – ftp://ftp.build-your-website.co.uk:21

Answers

Question 1 – Absolute
Question 2 – No
Question 3 – Yes
Question 4 – Yes

Related articles and tutorials:

Did this Tutorial Help? Please Rate
[Total: 3 Average: 4]