Using anchor tags to link to other locations

Remember

tag attribute value

Marking up objects turns them into hyperlinks

Anchor tags allow you to embed instructions that tell the browser to open a link in another location - either another place in the current page, or another web page, or another place in another web page.

This is straightforward. You can anchor some text to our course home page by adding the following code to a well-formed page.

<a href="http://ils.unc.edu/courses/2017_fall/inls201_001/index.html">The INLS201-001 Home Page</a>

  • The above anchor tag can appear anywhere between the <body> and </body> tags.
  • href is an attribute of the tag. In this case, href indicates what web page is on the other end of the link you just created (in other words, what page should get fetched if you click on the link).
  • Each tag in HTML has a set of possible attributes, some required, some optional. The best ways to learn about the possibilities is to consult an HTML reference and to look at HTML source.
  • Note that like other tags, the <a> anchor tag must be mirrored with a </a> close anchor tag. You are connecting everything between the two tags to that anchor.

[top]

One may add anchors to create links to pages within and without a web structure.

<p>Today's session has three pages. Specifically, the three pages are</p>
<ol>
<li> <a href="310.a.info-structures.markup.theory.html">HTML Theory</a> </li>
<li> <a href="310.b.info-structures.markup.tags.html">Tags</a> </li>
<li> <a href="310.c.info-structures.markup.links.html">Hyperlinks</a> </li>
</ol>

Or, as it will display on the page


Today's session has three pages. Specifically, the three pages are

  1. HTML Theory.
  2. Tags.
  3. Hyperlinks

[top]

Note the difference between anchors and the references they use:

An ABSOLUTE REFERENCE takes you to one and only one specific location.

<a href="http://ils.unc.edu/courses/2017_fall/inls201_001/"> INLS201-001 Foundations of Information Science</a>

In our case, we used an absolute reference to go to our class home page.

A RELATIVE REFERENCE takes you to a location that is hierarchically relative to the specific location of the reference.

<a href="310.a.info-structures.markup.theory.html">HTML Theory</a>.

Now that we've defined what these elements are, next time, let's consider how they might look better.

[top]