HTML5 tutorial - The a tag.

The anchor tag

Hyperlinks, or links, are how you move around the web. An a or anchor tag is how you make hyperlinks in HTML.

The a or anchor tag is an elegantly simple and powerful tool – with an utterly counterintuitive name.

No doubt someone somewhere along the line had some reason to name it "anchor" but I can't imagine why. Dictionary.com defines anchor as a "device for holding fast or checking motion". The anchor tag does anything but.

While he could have done with a dictionary, whoever thought it up was brilliant. He made the internet possible.

When you click on a link your computer (the client) asks another computer (the server) to send it a file. When all is said and done that's all that is really going on. How all that works is complicated, but what happens – what is actually going on – is not.

Always keep in mind the fact that everything on the net is stored as files on computers connected to the internet. There are "local" files, or files on your computer, and then there are billions of files on servers all over the planet.

For you to get to this page you clicked a link on some other page and sent out a request to go to a computer (my server) named "html-5-tutorial.com" * to send you the file named "a-tag.htm".

Your computer knows that the file "a-tag.htm" is a webpage because it has an ".htm" extension (.html works the same) and opens it in your browser for your viewing pleasure.

The code for the link (a-tag) to this page looks like this:

<a href="http://www.html-5-tutorial.com/a-tag.htm">a tag</a>

It includes the unique URL** of this page:

http://www.html-5-tutorial.com/a-tag.htm

Which is what you see in the address bar at the top of this page.

As you are not changing domains (ie. changing servers) you can shorten the link to just include the file name***:

<a href="a-tag.htm">a tag</a>

If no file name is included in the URL it is assumed to be the index or home page.

<a href="http://www.html-5-tutorial.com/">XYZ</a>

Any text or image (we'll get into that later), can go where I wrote "XYZ". The "XYZ" – what is inside the a tag – has no effect on where the link will take you. It does however tell visitors where they will go if they click the link.

It also affects SEO as search engines want pertinent content. If you are selling doohickies make a page named "doohickies.htm" and links that look like:

<a href="doohickies.htm">We sell doohickies!</a>

Now we are going to put your newfound skills into action.

At this point you have made two pages: my-first-webpage.html and my-second-webpage.html. Ideally you have saved them both in same place and somewhere you will be able to find them again. If not, you can find them in this page's source code.

Go to your desktop and create a folder named "my-webpages" then move both of your webpages to that folder.

Now open up my-first-webpage.html in a text editor (not MS Word) and after <p>My first webpage</p> add:

<p><a href="my-second-webpage.html">My Second Webpage</a></p>

While you are at it change <p>My first webpage</p> to <h1>My first webpage</h1>.

Save my-first-webpage.html and open it in your browser. To do that on a PC go to your desktop, click on the folder "my-webpages" and click on the file "my-first-webpage.html". Click on the link "My Second Webpage" and it should open in your browser.

Now open "my-second-webpage.html" and add a link to "my-first-webpage.html". Open (or refresh) my-second-webpage.html in your browser and now you can toggle back and forth between your two pages. I have an example of each below:

I have added a bit of code: target="_blank" to have the page open in a separate tab. Close that tab to get back here.

If you are having problems make sure you saved them as .html (not .txt or something else), make sure they are in the same folder and last but not least use a text editor – NOT MS Word.

You will notice I have all the links on this site in an unordered list. As an exercise change your links to be in <ul> tags rather than <p> tags as they are right now.

Finally make a third page with links to the previous two pages. Add links from all three pages to all three and Voila!, you have the beginnings of your first web site. Basic they may be, but you are definitely on your way!

Hyperlink or Link

A clickable navigation element on a webpage. The most common destination anchor is a URL used in the World Wide Web.
wikipedia · about.com

Server

A computer where you store a Web site, usually rented from a hosting service.
wikipedia

hosting service

Web hosting services "hosts" web sites on servers to make them accessible to the world via the Web.
wikipedia

URL or Uniform Resource Locator

A Uniform Resource Locator (URL) specifies where an identified resource is available and the mechanism for retrieving it.
wikipedia · about.com

index.html or index.htm or homepage

When an HTTP client (generally a Web browser) requests a URL that points to a directory structure instead of an actual Web page within the directory, the Web server will generally serve a general page, which is often referred to as a main or "index" page.
wikipedia · wikipedia

SEO

Search Engine Optimization – designing pages to rank high in search engine results.
wikipedia · google

Internet Protocol or IP

The Internet Protocol (IP) is the method or protocol by which data is sent from one computer to another on the Internet.
wikipedia · techtarget

* Actually "html-5-tutorial.com" is more of a nickname for a computer with a unique Internet Protocol or IP address, the server's real name. Your computer has a unique IP address too.

** If you go to W3C.org what everyone else knows as a URL (Uniform Resource Locator) they call a "URI" or Uniform Resource Indicator. There is a technical difference between the two, but as a beginner for all intents and purposes they are the same thing.

*** When a link includes the domain and the file (eg. <a href="http://www.html-5-tutorial.com/a-tag.htm">a tag</a>) it's an "absolute path". Without the domain (eg. <a href="a-tag.htm">a tag</a>) it's a "relative path".