HTML Links

HTML uses hyperlinks to connect to another document on the web.

Links can be found almost on all web pages. Clicking on a link can jump from one page to another.

Example

Creating Hyperlinks
This example demonstrates how to create links in an HTML document.
Using an Image as a Link
This example demonstrates how to use an image as a link.

More examples can be found at the bottom of this page.

HTML Hyperlink (Link)

Hyperlinks can be a single character, a word, or a group of words, or even an image. You can click on these contents to jump to a new document or a specific part within the current document.

When you move the mouse pointer over a link on a webpage, the arrow turns into a small hand.

We create links by using the <a> tag in HTML.

There are two ways to use the <a> tag:

  1. By using the href attribute - Create links to another document
  2. By using the name attribute - Create bookmarks within a document

Read More:What is Hypertext?

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 target of the link.

The text between the start and end tags is displayed as a hyperlink.

Example

<a href="http://www.codew3c.com/">Visit CodeW3C.com</a>

The following line of code is displayed as:Visit CodeW3C.com

Clicking this hyperlink will take the user to the homepage of CodeW3C.com.

Tip:"Link text" does not have to be text. Images or other HTML elements can also be links.

HTML Link - target attribute

Using the Target attribute, you can define where the linked document is displayed.

This line will open the document in a new window:

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

Try It Yourself

HTML Link - name attribute

The name attribute specifies the name of the anchor.

You can create bookmarks in HTML pages using the name attribute.

Bookmarks are not displayed in any special way and are invisible to readers.

When using named anchors, we can create links that jump directly to the named anchor (such as a section in the page), so the user does not have to keep scrolling the page to find the information they need.

Syntax of Named Anchor:

<a name="label">Anchor (text displayed on the page)</a>

Tip:The name of the anchor can be any name you like.

Tip:You can use the id attribute instead of the name attribute, and the named anchor is still effective.

Example

Firstly, we name the anchor in the HTML document (create a bookmark):

<a name="tips">Basic Warnings - Useful Tips</a>

Then, we create a link to this anchor in the same document:

<a href="#tips">Useful Tips</a>

You can also create a link to this anchor on other pages:

<a href="http://www.codew3c.com/html/html_links.asp#tips"">Useful Tips</a>

In the above code, we add the # symbol and anchor name to the end of the URL so that we can directly link to the 'tips' named anchor.

Specific Effects:Useful Tips

Basic Considerations - Useful Tips:

Note:Always add a forward slash to the subfolder. If you write the link like this: href="http://www.codew3c.com/html", it will generate two HTTP requests to the server. This is because the server will add a forward slash to this address and then create a new request, like this: href="http://www.codew3c.com/html/".

Tip:Named anchors are often used to create a table of contents at the beginning of a large document. An anchor can be assigned to each chapter, and then the links to these anchors can be placed at the top of the document. If you often visit Baidu Encyclopedia, you will find that almost every entry uses such a navigation method.

Tip:If the browser cannot find the defined named anchor, it will locate to the top of the document. No error will occur.

More Examples

Open Links in a New Browser Window
This example demonstrates how to open a page in a new browser window so that visitors do not have to leave your site.
Link to Different Locations on the Same Page
This example demonstrates how to use a link to jump to another part of the document.
Jump Out of Frame
This example demonstrates how to jump out of the frame if your page is fixed within a frame.
Create Email Link
This example demonstrates how to link to an email. (This example will only work after the email client program is installed.)
Create Email Link 2
This example demonstrates a more complex email link.

HTML Link Tag

Tag Description
<a> Define an anchor.