HTML Links

HTML link (Anchor) is the core part of jumping between web pages.

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

A link in HTML is an element used to navigate between different web pages.

Links are commonly used to associate one web page with another web page or resource such as a document, image, audio file, etc.

Links allow users to click text or images to jump to other locations while browsing web pages, thus interconnecting web pages.

HTML links are created using the <a> tag and are commonly used to navigate users from one page to another, jump from one section to another within a page, download a file, open an email application, or execute a JavaScript function, etc.

Basic syntax

<a href="URL">Link text</a>

• <a>Tag: defines a hyperlink (anchor). It is the main tag used in HTML to create clickable links.
• hrefAttribute: Specifies the target URL to which the browser will navigate when the link is clicked.

The following example demonstrates how to create a link in an HTML document:

<a href="/index.html">This text</a> is a link to a page on this website.</p>

<p><a href="https://www.microsoft.com/">This text</a> is a link to a page on the World Wide Web.</p>

Try it yourself »

HTML Hyperlink (Link)

HTML uses the tag <a> to set a hypertext link.

A hyperlink can be a word, a group of words, or an image that you can click to jump to a new document or a section in the current document.

When you move your mouse pointer over a link on a web page, the arrow changes to a little hand.

The href attribute is used in the tag <a> to describe the link address.

By default, the link will appear in your browser as follows:

• An unvisited link is displayed in blue font and is underlined.
• Visited links appear purple and are underlined.
• When you click a link, it appears in red and is underlined.

Note: If you set CSS styles for these hyperlinks, the display styles will be displayed according to the CSS settings.

HTML link attributes

The href attribute describes the target of the link.

1. href: defines the link target.

This is the most important attribute of a hyperlink and is used to specify the destination of the link, which can be another web page, file, email, phone number, or JavaScript.

<a href="https://www.example.com">Visit Example</a>

2. target: defines how the link is opened.

• _blank: Open the link in a new window or tab.
• _self: Open the link in the current window or tab (default).
• _parent: Open the link in the parent frame.
• _top: Open the link in the full window, eliminating any frames.

<a href="https://www.example.com" target="_blank" rel="noopener">Open Example in a new window</a>

3. rel: defines the relationship between the link and the target page.

nofollow : Indicates that search engines should not follow the link, often used for external links.

noopener and noreferrer : Prevent security issues when opening links in new tabs, especially when using target=”_blank” .

• noopener: Prevents new browsing contexts (pages) from accessing window.openerproperties and openmethods.
• noreferrer: Do not send a referer header (i.e. do not tell the target website where you came from).
• noopener noreferrer: Use noopenerand at the same time noreferrer. Example:<a href="https://www.example.com" rel="noopener noreferrer">Secure Links</a>

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Secure Links</a>

4. download: prompts the browser to download the link target instead of navigating to it.

If a file name is specified, the browser will prompt you to download and save it as the specified file name.For example:

<a href="file.pdf" download="example.pdf">Download file</a>

5. title: defines additional information about the link, a tooltip displayed when the mouse hovers over the link.

<a href="https://www.example.com" title="访问 Example 网站">Visit Example</a>

6. id: used for link anchors, usually jumping to a specific location on the same page.

<!-- 链接到页面中的某个部分 -->
<a href="#section1">Go to Section 1</a>
<div id="section1">This is Section 1 </div>

7. hreflang: Specifies the language of the link’s target URL

<a href="https://www.example.com/es" hreflang="es"> Visit the Spanish site </a>

8. type: specifies the MIME type of the linked resource

<a href="style.css" type="text/css">Style Sheet</a>

9. class: used to specify the class name of the element (defined in CSS)

<a href="https://www.example.com" class="external-link">External link </a>

10. style: define CSS styles directly on elements

<a href="https://www.example.com" style="color: red;">Red link</a>

Examples

<a href="https://www.it-res.com/">Visit It Res Hub/a>

The above line of code displays: Visit the IT Res Hub

Clicking on this hyperlink will take the user to the home page of the tutorial.

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

Text links: The most common type of link is a text link, which uses the <a> element to turn a piece of text into a clickable link, for example:

<a href="https://www.example.com">Visit the example website</a>

Image links: You can also use images as links. In this case, an <a> element surrounds an <img> element. For example:

<a href="https://www.example.com">
  <img src="example.jpg" alt="Example Image">
</a>

Anchor links: In addition to linking to other web pages, you can also create internal links within the same page, which is called an anchor link. To create an anchor link, you need to define a tag using the <a> element at the target location and reference the tag using the # symbol. For example:

<a href="#section2">Jump to Section 2</a>
<!-- Somewhere in the page -->
<a name="section2"></a>

Download links: If you want the link to download a file instead of navigating to another web page, use the download attribute. For example:

<a href="document.pdf" download>Download document/a>

HTML Link – target Attribute

Using the target attribute, you can define where the linked document should be displayed.

The following line will open the document in a new window:

<a href="https://www.it-res.com/" target="_blank" rel="noopener noreferrer">Visit It Res Hub!</a>

Try it yourself »

HTML Link – id Attribute

The id attribute can be used to create a bookmark in an HTML document.

Tip: Bookmarks are not displayed in any special way, that is, they are not displayed in the HTML page, so they are hidden from the reader.

Examples

Insert an ID into an HTML document:

<a id="tips">Helpful tips section</a>

Create a link to the “Helpful tips section (id=”tips”)” in your HTML document:

<a href="#tips">Visit the helpful tips section</a>

Alternatively, create a link to the Useful Tips section (id=”tips”) from another page:

<a href="https://www.it-res.com/#tips">
Visit the helpful tips section</a>

Empty Link

The following are some common ways to set up null links and the differences between them:

Basic notes – Useful tips

Note: Always add a forward slash to subfolders. If you write a link like this: href=”https://www.it-res.com/html”, two HTTP requests will be made to the server. This is because the server will add a forward slash to the address and then create a new request, like this: href=”https://www.it-res.com/html/”.

更多实例

Image Links
How to use image links.

Link to a specific location on the current page
How to use bookmarks

Jump out of the frame
This example demonstrates how to jump out of the frame if your page is fixed in a frame.

Creating an Email Link
This example shows how to link to an email. (This example will only work if you have an email client installed.)

Creating an Email Link 2
This example demonstrates a more complex email link.

HTML link tag