Monday, November 29, 2010

HTML Links

Links are found in nearly all Web pages. Links allow users to click their way from page to page.

Examples

Try it Yourself - Examples

HTML links
How to create links in an HTML document.
(You can find more examples at the bottom of this page)

HTML Hyperlinks (Links)

A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document.
When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
Links are specified in HTML using the <a> tag.
The <a> tag can be used in two ways:
  1. To create a link to another document, by using the href attribute
  2. To create a bookmark inside a document, by using the name attribute

HTML Link Syntax

The HTML code for a link is simple. It looks like this:
<a href="url">Link text</a>
The href attribute specifies the destination of a link.

Example

<a href="http://www.w3schools.com/">Visit W3Schools</a>
which will display like this: Visit W3Schools
Clicking on this hyperlink will send the user to W3Schools' homepage.
Tip: The "Link text" doesn't have to be text. You can link from an image or any other HTML element.

HTML Links - The target Attribute

The target attribute specifies where to open the linked document.
The example below will open the linked document in a new browser window:

Example

<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

Try it yourself »


HTML Links - The name Attribute

The name attribute specifies the name of an anchor.

The name attribute is used to create a bookmark inside an HTML document.
Bookmarks are not displayed in any special way. They are invisible to the reader.

Example

A named anchor inside an HTML document:
<a name="tips">Useful Tips Section</a>
Create a link to the "Useful Tips Section" inside the same document:
<a href="#tips">Visit the Useful Tips Section</a>
Or, create a link to the "Useful Tips Section" from another page:
<a href="http://www.w3schools.com/html_links.htm#tips">
Visit the Useful Tips Section</a>


Basic Notes - Useful Tips

Note: Always add a trailing slash to subfolder references. If you link like this: href="http://www.w3schools.com/html", you will generate two requests to the server, the server will first add a slash to the address, and then create a new request like this: href="http://www.w3schools.com/html/".
Tip: Named anchors are often used to create "table of contents" at the beginning of a large document. Each chapter within the document is given a named anchor, and links to each of these anchors are put at the top of the document.
Tip: If a browser does not find the named anchor specified, it goes to the top of the document. No error occurs.

Examples

More Examples

An image as a link
How to use an image as a link.
Link to a location on the same page
How to link to a bookmark.
Break out of a frame
How to break out of a frame (if your site is locked in a frame).
Create a mailto link
How to link to a mail message (will only work if you have mail installed).
Create a mailto link 2
Another mailto link.

HTML Link Tags

TagDescription
<a>Defines an anchor

No comments:

Post a Comment