Linking the Web

What would the Internet be without links? I imagine just a lot of pages standing alone without any direction!

The excitement of the Internet is hypertext! Web pages can be joined to other web pages and files on the same site or on a different site. Pages from around the world can be connected together by hypertext.

Types of anchor links we will be covering in this tutorial:

• Absolute: Linking to a page externally, outside your Web site.
• Relative: Linking to a page in your internal site.
• Mailto: Linking to your email address so visitors can send you an email.
• Named/Internal: Pointing to a specific area of a Web page.

Introducing the Anchor Tag

A link is referenced by using the anchor <a></a> tag set. Anchor is a strange name for a tag, isn’t it? Think of it as a web object anchored to another web object.

Some Fast Facts on Anchors and Links

• The anchor tag is an inline tag, so it needs to be contained in a block level tag, like <p> or <hx>.
• Block level tags like <p> or <hx> cannot be nested inside the <a> anchor tag.
• You can emphasize a link with <strong> or <em> tags, but do not use these tags to format your link text as bold or italic. CSS can take care of that.
• By default, a new (unvisited) link will view as blue underlined text in most browsers.
• By default, a visited link will view as purple underlined text in most browsers.
• CSS can be used to easily change the appearance of
  links.
• Try not use text like "click here" for link labels. Try to use text that is descriptive but short and to the point.

The href Attribute

Almost every <a> tag will utilize the href attribute.

Remember what an attribute is? An attribute acts as an enhancement to the tag. In this case, the attribute we are going to apply is href which stands for hypertext reference.

Whenever you add an attribute to any tag, the attribute must be typed as lower case. It also must have a value and the value must be enclosed in "quotation marks ."

Let’s get specific.

Say you want to add a link to the debbie T Designs web site, you might type

<p>I love visiting
<a href="http://www.debbietdesigns.com">Debbie T Designs</a> to learn about web design.</p>

Let’s break this down:

• Because the anchor is an inline tag, it must be nested in a block level tag, like a paragraph <p> tag.
• Anchor tags can be co-mingled with text or by themselves. In the above example, the <a> tag is located in the middle of a sentence.
• The <a> opening tag starts the hypertext link.
• Inside the <a> tag, there’s the attribute href
• After every attribute, an = sign is needed.
• The value of the attribute is http://www.debbietdesigns.com enclosed in "quotes" – Remember, all values must be enclosed in "quotation marks."
• The text contained after the opening <a> tag, and before the closing </a> tag is called the link label. In the above example, Debbie T Designs will be displayed in the browser as a clickable link. Do not use text like "click here" for the link label. Type descriptive text link labels.
• End the hypertext link with the very important </a> closing tag. (There is no need to repeat any attributes in the closing tag.)
• And make sure to also close the </p> as well.

The title Attribute (Optional)

Along with href, there is another attribute that can be added to the opening <a> tag.

The title attribute is used to describe the link, just like the <title> tag describes your web page.

• In most modern browsers (Firefox, Opera, IE, Mozilla, Netscape), when a visitor’s mouse hovers over a link, the title text will popup in a small tool tip box.
• The title attribute also helps with accessibility to your page. Visitors using screen readers or text-only browsers can gain better knowledge of your links with the title attribute.
• It is an optional preference to use the title attribute.

For the anchor example:

<p>I love visiting <a href="http://www.debbietdesigns.com" title="Web Design Made Simple">Debbie T Designs</a> to learn about web design.</p>

Notice there is a [space] in between the href and title attributes. Every attribute must be separated by a [space] or there could be problems when rendered in certain browsers. You also might receive errors when you validate as well.

Absolute URL Links

Every single file or object on the web has its own unique address, or URL.

URL = Uniform Resource Locator. You also might see it referenced as URI = Uniform Resource Indicator.

An absolute link will refer to the complete address or URL on the Web. In the anchor example, http://www.debbietdesigns.com is the complete URL of my web site.

Some things to remember:

• The complete address of a Web page should always include the http:// or it will not work.
• The most efficient way to link to a web page is to copy the URL directly from your browser window and paste as the value of the href. This will help avoid errors from hand typing the url. It is especially important if the URL is very long and complex.

You are welcome to add one or two absolute anchor links to your own web page.

Take a look at the example code below and my 3coding.html file. Please view source to see my anchor tags.

(To save space, I am showing only a small section of the code)

In the example above, notice how there is a space before the opening <a> and after the closing </a> tags? This ensures that your link will view properly. See the anchor.html file for examples on anchor spacing.

Relative URL Links

Absolute links are great for linking to external files and pages, but what if you want to link to a page located in your own web site? Sure, you could use an absolute link, but what if your web site moves and you have a new host or domain name? It could be a lot of work to change all those links.

Using a relative link is the best way to join your internal web pages together, and it is even easier than an absolute link.

Whenever the linked file already shares the same domain name, you don’t need to reference the complete url. All you have to is list the file name.

To keep it simple, make sure the linked file is located inside the same folder. Relative links can be used to link to files outside the folder, but that is subject matter for a more advanced tutorial.

<p>Please view my <a href="hello.html" title="deb's first page">very first</a> web page.</p>

The link label of "very first" will be displayed in the browser and when clicked, the browser will go to the file named hello.html which is located in the same folder as my example file.

See below for the code I added to my page. If you want to see it in action, view the 4coding.html file.

View, Upload & Validate

Have you been viewing your file in your browser during the creation of your page? If not, step to it! Save, then open your file in the browser window to view it.

Check all links on your page to ensure they are working.

It is easy to check the absolute links on your page if you have an "always on" connection to the Internet with cable or DSL. Otherwise, you will have to connect to your ISP to test those links, or upload your files to your online web site using FTP access or your host’s file manager. (Please view the FTP Tutorial for a list of FTP software.)

Now would be a good time to validate your file and fix any errors that have been made. Fire up the W3C validation service at http://validator.w3.org/. Upload the file to the service and if you receive the message that says, "This Page Is Valid XHTML 1.0 Transitional!" then congratulations!

If the validation output shows some errors, that is okay. Try to work through them.

Validation Tips

Let me give you some tips on what the validator might be trying to tell you.

Are all your values enclosed in quotes?

The line below will cause an error, do you see why?

<p><a href="http://www.debbietdesigns.com title="Web Design Made Simple">Debbie T Designs</a></p>

The W3C will probably tell you the error is "literal is missing closing delimiter" – delimiter? The definition of delimiter is "a character used to mark the start or end of data in source code." That could mean "quotes", a semi-colon(;), comma(,), or {braces} but in this case, the ending " is missing for the href value.

Do all your tags have the left and right brackets around them?

Let’s look at the error that this line might cause.

<p><a href="http://www.debbietdesigns.com" title="Web Design Made Simple Debbie T Designs </a></p>

“… is not a member of a group specified for any attribute" – the W3C is trying to tell you that the text … is not a proper attribute for this tag. Why does the W3C think that?? Well, take a look at what is missing. There is no right bracket > for the opening <a> tag and the ending " is also missing. The text label is getting all mixed up with our <a> tag, so make sure you always include both the < and > for every tag.

Okay, one more tip.

Are your tags following the block-level vs inline rules?

Check this line of code.

<a href="http://www.debbietdesigns.com" title="Web Design Made Simple"><p>Debbie T Designs</p></a>

The W3C tells you "document type does not allow element p here" meaning the <p> tag doesn’t belong nested in the <a> tag set. The <p> tag is a block-level tag. Inline tags such as <a> cannot nest block-level tags. Easy to fix, right?

Try it this way instead:

<p><a href="http://www.debbietdesigns.com" title="Web Design Made Simple">Debbie T Designs</a></p>

Now after hopefully getting some of the validation errors out of the way, are you ready to receive mail?

Mailto Links

Everyone likes to get email, right? If you add an email link on your Web page your visitors will be able to send an email message to you just by clicking the link.

Here is the syntax for an email link:

<p><a href="mailto:email@mydomain.com" title="Email Me">Email Me</a></p>

Notice the href attribute is used. The value starts with mailto: and make sure to always include the colon (:) along with your email address. Enclose the whole value in "quotation marks." The link label is the text nested in between the <a> and </a> tag set. (You may optionally add the title attribute as well.)

Practice by adding an email link to your web page. No need to use a real email address if you are afraid of spambots.

Below you will find example code. Check the 5coding.html file for a closer look.

Internal/Named Links

Have you ever been to a web page and at the bottom of the page, you find a link back to the top of page? This is an internal link. You also might have heard it called a named anchor as well.

It works like this: First you define an area on your page giving it a unique "id" – this will be the target of the link. Then all that is left to do is add an anchor link that references the id.

Let’s try it.

In your web file, add the attribute "id" with a value of "top" to the <h1> tag.

The id attribute acts as an identifier. It is an important attribute with many uses.

Some facts to remember about id’s:

• The value for the id attribute must be used only once on your page. It is a unique identifier. In this case, I used "top" as the value, and it will identify the top section of my page.
• Keep in mind that the value is case-sensitive. "Top" is different from "TOP" and also different from "top" – it is easiest to use all lower case letters.
• Do not use spaces or any special characters as the id value. You may use letters, digits (1 thru 9), hyphens (-), and underscores (_) but you must start the id value with a letter.

Now let’s add an anchor tag that links to the id.

A good place for a "Top of Page" link is at the bottom of the page. If your page is extremely long, you might want to place multiple top links in different spots on the page.

Type a Top of Page link at the bottom of your web file.

<p><a href="#top">Top of Page</a></p>

So, what is different about this link? Notice the # (pound sign) is being used in the href value. The link label will display in the browser as "Top of Page" and once clicked, the browser will jump to the exact spot that is defined with the id of "top".

In this particular instance, it will shift to the <h1> tag at the top of the page.

View the example on my 6coding.html file. Scroll to the bottom of the page, then click the Top of Page link to zoom to the top. Check the source code while you are there.

To review:

• Define an area on your web page by adding an id to any element. Basic syntax: <tag id="idname">Tag Text</tag>
• Then create an anchor tag that links to the id anchor. Basic syntax: <a href="#idname">Text Label</a>
• When the link referenced in the <a> tag is clicked, it will jump to the defined id.

Deprecated: the Name Attribute

Some older "legacy" browsers (such as Netscape 4) do not recognize internal links defined by the id attribute. If you know that your web site has a large percentage of visitors using older browsers, then you might consider using the name attribute along with id.

Keep in mind that the name attribute is deprecated; Personally, I don’t find the small amount of Netscape 4 visitors is enough to warrant using a deprecated attribute.

One difference when using the name attribute, is that it cannot be used in any element like the id. The name attribute must be used in an <a> anchor tag.

So, that means the coding for the defined top area of your page would look like:

<h1><a id="top" name="top">Heading Text</a></h1>

The <a> tag using both the id and name attributes is nested in the <h1> tag.

The anchor tag used to jump to the top area would remain the same:

<p><a href="#top">Top of Page</a></p>

View and Validate

Save the file and rev up your favorite browser. Scroll to the bottom of your page, and click on the link to the top. Does the page shift to the identified link?

If not, then check the id value. Make sure you have typed the exact same name in the href value as you have specified as the id value. Make sure you also typed in the # sign in the href value. Using all lower case letters for your id value does makes it easier, but if you want to use any upper case letters, they also must be referenced in the href value.

Validate your file again using the W3C Validator.

More Internal Link Examples

Are you feeling brave enough to try this a few more times? How about adding internal anchors for each <h2> heading section. Check my 7coding.html file, where I added linked sections for each of my favorite foods.

You might notice the "Chocolate" link doesn’t jump to the exact Chocolate heading. Can you guess why? The anchor link tried its best to get as close as possible to the defined chocolate id, but because the page is not long enough, it only shifted as far as possible. So, don’t fret if all your internal anchors do not jump to the exact spot when clicked. Add more content to the bottom of the page, and that might fix the problem.

Checking Links!

Before making your web page public online, always try to check your links for accuracy. You can manually click on every link, but if there are too many, why not let the W3C Link Checker go to work.

Copy and paste the full url to your web page, and click the "Check" button.

For more details, please read the Link Checker documentation.

Note: You might receive the message "The link was not checked due to robots exclusion rules. Check the link manually." This is because the linked web site placed special coding in a robots.txt file that disallows any non-human user-agent (browser) to spider their site. If you receive this error, manually check the validity of that link yourself.

FAQ

How can I fix the validation error for the "&" character in certain urls that I have copied and pasted? For example http://www.kraftfoods.com/main.aspx?s=product&m=product/product_catalog.

Answer: Replace the "&" with the official special character for ampersand "&" and the error should go away. Sometimes there is more than one instance of the "&" so edit them all.

http://www.kraftfoods.com/main.aspx?s=product&m=product/product_catalog

8 Comments

1. Comment by Angela Gordon on July 13th, 2007
   

   Hello,

   Our guest book had grown very long and I needed to add a link to the top of the page. Your website described how to do this very simply. Thank you.

   Angela

2. Comment by debbie T on July 14th, 2007
   

   Hello Angela,

   I am glad it helped.

   I noticed when I looked at your guest book online, the “top of page” links were not working. I checked your code, and you didn’t define the actual “top” with an id.

   Try adding the id=”top” to the first table tag.

   I think that will work!

3. Comment by Patrick Smith on June 29th, 2008
   

   Muchas gracias! Este sitio web ha sido muy útil para mí.

   Gracias por trabajar en él tanto.
   Patrick Smith

4. Comment by Joshua on October 26th, 2008
   

   Hi Debbie… your website looks very cool and simple. Especially the tutorials are very good but I could’nt find what I am looking for. That is the reason I am contacting you.
   I am designing a website which almost looks/works like your website ie., banner pane, navigation pane and contents pane. The problem is if I click on a link on the navigation panel, the related web page is not opening in the contents pane. It is opening out of the main webpage. They are not displaying like your links. I am using for ex,
   Contact us
   Can you please suggest how to display the contents of ‘contactus.html’ in contents pane. I dont want to use iframes.
   Thanks in advance.

5. Comment by Jay Huemann on November 12th, 2008
   

   All the info on these pages are great. A long time ago I began writing html by hand and then moved on to Dreamweaver and iWeb. I am wanting to go back to coding by hand and your tutorials have been fantastic. Things have changed since 1999! I am learning a lot.

   Question: Why does an anchor need to be inside of a p or hx tag? I just tried it as a stand alone tag and it seemed to work but I am sure I am missing something!

   Again, this stuff it great!
   j. Huemann

6. Comment by debbie T on November 12th, 2008
   

   Hey Jay,

   Thank you for your comment!

   yes, the tag by itself will work, but it won’t validate.

   Quote:
   Because the anchor is an inline tag, it must be nested in a block level tag, like a paragraph

   tag.

   I am glad you are enjoying the tutorials! Good luck with your quest to learn html again!!!

7. Comment by Jay Huemann on November 12th, 2008
   

   Thanks for the response Debbie. It is appreciated.

   But….. I tried to validate the code without using the paragraph tag and it said it passed. I am not using the strict but transitional. Why is it validating?

   I am having a lot of fun learning this stuff and practicing. Your explanations make a lot of sense.

   Again,
   j. Huemann

8. Comment by debbie T on November 12th, 2008
   

   transitional allows mistakes, but a strict doctype (which is what you might be striving for) will not validate unless tags are nested properly

Top of Page

• Home
• About
• Link to Site
• Contact

Learn

Meta

• Valid XHTML
• RSS
• WordPress

© 2003-2010 debbie T / debbie T Designs
Please read my Terms of Use before viewing any tutorials