Creating Links in HTML

A new tag for you to learn is the anchor tag. The anchor tag links webpages together so that you can navigate throughout a website. There are different ways to use it, to link to another page, to link inside the same page, to link to a div element, or link to an external website.

HTML Code:
  1. <a></a>

For linking to a different document, the attribute href (H=Hyper REF=erence) is used. The value that should be used with the href attribute should be the path to the next document, whether it is a complete URL such as, an absolute path or a relative path.

HTML Code:
  1. Complete URL (also is an absolute path):
  3. Absolute Path:
  5. Relative Path: /fonts

Absolute paths are mostly used to link outside of your website, but can be used to link internally. Unfortunately, unless you use Dreamweaver's create a site function, you won't be able to see images or link documents properly on your local desktop. Relative paths are shorter and you'll be able to go through your website on your local drive.

In between the opening an closing tag of the anchor tag, you should place the text that visitors actually see and click on your website. They do not see the absolute or relative path that you enter behind the scenes. In the example below, visitors would only see the words "Click me!".

HTML Code:
  1. <a href="">Click me!</a>
  3. <a href="/codes/tutorials/hyperlinks.html">Click me!</a>
  5. <a href="../codes/tutorials/hyperlinks.html">Click Me!</a>

You can apply a link to almost anything. An image is always a great object to link to other pages with. Simply place your img tag and its attributes between the a tag.

HTML Code:
  1. <a href="go-here.html">
  2. <img alt="Clickable Image" src="your/images/source.jpg" />
  3. </a>
  4. <a href="">
  5. <img alt="Clickable Image" src="your/images/source.jpg" />
  6. </a>

You can apply the anchor tag to unordered or ordered lists, to icons, to divs, to headers... almost anything you can think of.

Using the Anchor Tag to Jump to a Place on the Same Page

Well that was a long title. You can also use your anchor tag to actually set a visitor to a specific place in the same page. The way to do this is to use the pound sign # (or 'hashtag' nowadays for you younger people) and also the 'name' attribute. FIrst lets set up the link that will send the user where they need to go.

HTML Code:
  1. This is a regular link to another website:
  2. <a href="">Go Here</a>
  3. This is a regular link to another page within your site:
  4. <a href="go-here.html">Go Here</a>
  5. Here is a link that will go to a place in a page:
  6. <a href="go-here.html#hereisthere">Go Here</a>
  7. Here is a link that will go to a place in a page on another website:
  8. <a href="">Go Here</a>

The first link will take you to a separate page in the same website. The second will take you within your site because the link is relative. The third uses the # sign to specify a place on a page in the same site, the last will go to an anchor in another site. This link is useless, however, without actually having an actual anchor spot for 'hereisthere'.

HTML Code:
  1. <p><a href="go-here.html#hereisthere">Go to this anchor</a> on the page.</p>
  2. <p>
  3. <a name="hereisthere"></a>Here is there is now there is here.
  4. </p>

Notice that this a tag does NOT surround the sentence there. There is nothing in between the tags. You can place text there, but it is not necessary. This a tag is simply a spot on the page that another link can jump to. Again, this is great for when you have longer webpages or if you want to send a visitor to a specific place on your webpage.

Add comment

Security code


Visit Betfair Review