Home arrow HTML arrow Handling Hyperlinks and Images in HTML

Handling Hyperlinks and Images in HTML

In this conclusion to a two-part series that gets you off to a quick start using HTML and XHTML, you'll learn how to link documents, handle images, deal with lists and tables, and more. This article is excerpted from chapter two of HTML & XHTML: The Definitive Guide, Sixth Edition, written by Chuck Musciano and Bill Kennedy (O'Reilly; ISBN: 0596527322). Copyright 2007 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Author Info:
By: O'Reilly Media
Rating: 4 stars4 stars4 stars4 stars4 stars / 7
April 03, 2008
  1. · Handling Hyperlinks and Images in HTML
  2. · 2.8 Images Are Special
  3. · 2.9 Lists, Searchable Documents, and Forms
  4. · 2.10 Tables
  5. · 2.12 Stylesheets and JavaScript

print this article

Handling Hyperlinks and Images in HTML
(Page 1 of 5 )

2.7 Hyperlinks 

While text may be the meat and bones of an HTML or XHTML document, the heart is hypertext. Hypertext gives users the ability to retrieve and display a different document in their own or someone else's collection simply by a click of the keyboard or mouse on an associated word or phrase (hyperlink) in the document. Use these interactive hyperlinks to help readers easily navigate and find information in your own or others' collections of otherwise separate documents in a variety of formats, including multimedia, HTML, XHTML, other XML, and plain text. Hyperlinks literally bring the wealth of knowledge on the whole Internet to the tip of the mouse pointer.

To include a hyperlink to some other document in your own collection or on a server in Timbuktu, all you need to know is the document's unique address and how to drop an anchor into your document.

2.7.1  URLs

While it is hard to believe, given the billions of them out there, every document and resource on the Internet has a unique address, known as its uniform resource locator (URL; commonly pronounced "you-are-ell"). A URL consists of the document's name preceded by the hierarchy of directory names in which the file is stored (pathname), the Internet domain name of the server that hosts the file, and the software and manner by which the browser and the document's host server communicate to exchange the document (protocol):


Here are some sample URLs:

  1. http://www.kumquat.com/docs/catalog/price_list.html
  2. price_list.html
  3. ../figs/my_photo.png
  4. ftp://ftp.netcom.com/pub

The first example is an absolute or complete URL. It includes every part of the URL format: protocol, server, and pathname of the document. While absolute URLs leave nothing to the imagination, they can lead to big headaches when you move documents to another directory or server. Fortunately, browsers also let you use relative URLs and automatically fill in any missing portions with respective parts from the current document's base URL. The second example is the simplest relative URL of all; with it, the browser assumes that the price_list.html document is located on the same server, in the same directory as the current document, and uses the same network protocol (http). Similarly, example three is a relative URL which looks up and into the /figs directory for a picture file.

Although appearances may deceive, the last FTP example URL actually is absolute; it points directly at the contents of the /pub directory. Moreover, the ftp protocol specification in the example accesses different software on the server than the http protocol in the other examples.

2.7.2  Anchors

The anchor (<a>) tag is the HTML/XHTML feature for defining both the source and the destination of a hyperlink.* You'll most often see and use the <a> tag with its href attribute to define a source hyperlink. The value of the href attribute is the URL of the destination.

The contents of the source <a> tag--the words and/or images between it and its </a> end tag--is the portion of the document that is specially activated in the browser display and that users select to take a hyperlink. These anchor contents usually look different from the surrounding content (text in a different color or underlined, images with specially colored borders, or other effects), and the mouse-pointer icon changes when passed over them. The <a> tag contents, therefore, should be text or an image (icons are great) that explicitly or intuitively tells users where the hyperlink will take them. [<a>, 6.3.1]

For instance, the browser will specially display and change the mouse pointer when it passes over the "Kumquat Archive" text in the following example:

  For more information on kumquats, visit our
  <a href="http://www.kumquat.com/archive.html">
  Kumquat Archive</a>

If the user clicks the mouse button on that text, the browser automatically retrieves from the server www.kumquat.com a web (http:) page named archive.html, then displays it for the user.

2.7.3  Hyperlink Names and Navigation

Pointing to another document in some collection somewhere on the other side of the world is not only cool, but it also supports your own web documents. Yet the hyperlinks chief duty is to help users navigate your collection in their search for valuable information. Hence, the concept of the home page and supporting documents has arisen.

None of your documents should run on and on. First, there's a serious performance issue: the value of your work suffers, no matter how rich it is, if the document takes forever to download and if, once it is retrieved, users must endlessly scroll up and down through the display to find a particular section.

Rather, design your work as a collection of several compact and succinct pages, like chapters in a book, each focused on a particular topic for quick selection and browsing by the user. Then use hyperlinks to organize that collection.

For instance, use your home page--the leading document of the collection--as a master index full of brief descriptions and respective hyperlinks to the rest of your collection.

You can also use either the name variant of the <a> tag or the id attribute of nearly all tags to specially identify sections of your document. Tag ids and name anchors serve as internal hyperlink targets in your documents to help users easily navigate within the same document or jump to a particular section within another document. Refer to that id'd section in a hyperlink by appending a pound sign (#) and the section name as the suffix to the URL.

For instance, to reference a specific topic in an archive, such as "Kumquat Stew Recipes" in our example Kumquat Archive, first mark the section title with an id:

  ...preceding content...
<h3 id="Stews">Kumquat Stew Recipes</h3>

in the same or another document, then prepare a source hyperlink that points directly to those recipes by including the sections id value as a suffix to the
document's URL, separated by a pound sign:

  For more information on kumquats, visit
  <a href="http://www.kumquat.com/archive.html">
    Kumquat Archive</a>,
  and perhaps try one or two of our
  <a href="http://www.kumquat.com/archive.html#Stews">
    Kumquat Stew Recipes</a>.

If selected by the user, the latter hyperlink causes the browser to download the archive.html document and start the display at our "Stews" section.

2.7.4   Anchors Beyond

Hyperlinks are not limited to other HTML and XHTML documents. Anchors let you point to nearly any type of document available over the Internet, including other Internet services.

However, "let" and "enable" are two different things. Browsers can manage the various Internet services, such as FTP and Gopher, so that users can download non-HTML documents. They don't yet fully or gracefully handle multimedia.

Today, there are few standards for the many types and formats of multimedia. Computer systems connected to the Web vary wildly in their capabilities to display those sound and video formats. Except for some graphics images, standard HTML/XHTML gives you no specific provision for display of multimedia documents except the ability to reference one in an anchor. The browser, which retrieves the multimedia document, must activate a special helper application, download and execute an associated applet, or have a plug-in accessory installed to decode and display it for the user right within the document's display.

Although HTML and most web browsers currently avoid the confusion by sidestepping it, that doesn't mean you can't or shouldn't exploit multimedia in your documents: just be aware of the limitations.

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials