Links
HTML pages link to each other using the A element with the HREF attribute set:
<a href="otherpage.html">Link text</a>
The A element is an inline element, and must not contain block elements. All links require a closing tag.
There are several ways to define the HREF of the link, so that you can link to other files in the same directory, files in parent or child directories, files on other Web sites, email addresses, and several other things as well.
If the href starts with a protocol (such as http:
, https:
, mailto:
,
ftp:
or file:
), then the link will be absolute, and will need to include the full server and
path information. If it does not start with a protocol, it will be relative to the current file, and will need to use the
path format to make it jump up and down directories as needed.
Full HREFs are usually specified in the following format:
http://domain_name/directory_name/sub_directory_name/file_name.file_extension
Relative HREFs depend on many things, but there are a few simple formats:
foo.html
- Go to the file called foo.html in the current directory
../
- Go back up one directory
somename/
- Go forward to the somename directory
./
- Go to the root of the current directory (most servers will serve the index.html file in the current directory)
/
- Go to the root of the current Web site
/somepath
- Go to the root of the current Web site, then follow the path
#identifier
- Scroll the page to the element with the ID "identifier" or the A element with the name attribute set to "identifier" - this is known as an anchor
Some of these can be combined, as with the following example, where the link points to a page two directories up, into the directory called foo, then the file called bar.html, where it will scroll to the internal anchor called baz:
<a href="../../foo/bar.html#baz">
The following set of examples show what various HREFs would link to:
http://www.example.com/foo.html
- Links to "http://www.example.com/foo.html"
file://localhost/c:/foo.html
- Links to "c:\foo.html" (for security reasons, some browsers will not allow online Web pages to link to files on the user's computer)
foo.html
- Links to "foo.html" in the same directory as the current page
#sublinknumber1
- Scroll to the anchor in the current page called sublinknumber1
foo.html#sublinknumber1
- Go to "foo.html" and scroll to the internal anchor called sublinknumber1
mailto:jon@example.com
- Use the mail client the user has defined to start an email to "jon@example.com"
Last modified: 4 September 2008