HTML & CSS: Links 1

If you think about how the Web is organized, it is not organized as a top-down hierarchy. Instead, it is organized horizontally, democratically -- like a web. Hypertext links, or links, are central to that web-like organization.

The <A HREF= > tag defines a link. "A" stands for Anchor and "HREF" stands for Hypertext Reference.

Linking Within a Page

The first kind of link we will look at it is one that jumps you from one place on a page to a "placeholder" on the same page. To define this kind of link, use an ID attribute inside a tag to set up the placeholder, for example: <h3 id="goHere">. Then set up a link to that destination: <A HREF="#goHere">some text </a> to jump to the placeholder named "goHere". The # is required for jumps within pages like this.

Here is the code for this example. The placeholder is near the top of the page and the link is at the bottom.

The video shows how the link to a placeholder works.

Linking to a Place in Another Page

To link to a placeholder in another page, the syntax is similar. Set up the placeholder in the other page: <p id="goHere">. Then set up a link to that placeholder that includes the name of the page to which you are linking. If the name of the page is "html3.html," you might write: <A HREF="html3.html#goHere">.

Linking to a Page on the Web

The syntax to link to a page on the Web also uses A HREF. For example, to define a link to W3C, the World Wide Web Consortium, the code could be:

<A HREF="http://www.w3.org/">World Wide Web Consortium (W3C)</a>

Title & Tooltip

Adding a title attribute to a link enables a tooltip to pop up when a user hovers over the link. In the link below, title="Visit the Internet Movie Database" has been added to the link. Here's the code for the link:

<a href="http://imdb.com" title="Visit the Internet Movie Database">imdb.com</a>