HTML Link

---

HTML link (anchor) is the core part of web page navigation.

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

HTML links are elements used for navigation within different web pages.

Links are typically used to associate a web page with another web page, resource (such as a document, image, audio file, etc.).

Links allow users to jump to other locations on the web by clicking on text or images while browsing the web, thus achieving the interconnection of web pages.

HTML link through<a>Tag creates, usually used to navigate users to another page, jump to another part of the page, download files, open email applications, or execute JavaScript functions.

Basic grammar

<a href="URL.html">链接文本</a>

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

Below is an example of how to create a link in an HTML document:

---

HTML hyperlink (link)

HTML uses the tag<a>To set hyperlinks.

Hyperlinks can be a word, a phrase, or a group of words, or an image, you can click on these contents to jump to a new document or a part of the current document.

When you move the mouse pointer over a link on a webpage, the arrow will turn into a little hand.

In the tag<a>Uses the attribute to describe the address of the link.hrefBy default, links will appear as follows in the browser:

Unvisited link: Displayed in blue font with an underline.

• Visited link: Displayed in purple with an underline.
• When you click on a link, it will display in red with an underline.
• Note: If CSS styles are set for these hyperlinks, the display styles will be shown according to the CSS settings.

HTML link attribute

---

HTML link attribute

1. href: Defines the target of the link.

1. href: Defines the target of the link.

Example

2. target: Defines the opening mode of the link.

• _blank: Open the link in the current window or tab (default).
• _self: Open the link in the parent frame.
• _parent: Open the link in the entire window, canceling any frames.
• _top: Open the link without sending a referer header (i.e., not telling the target website where you came from).

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

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

noopenerandnoreferrer: Prevents security issues when opening the link in a new tab, especially when usingtarget="_blank": Prevents the new browsing context (page) from accessing

• noopener: Properties andwindow.opener: Do not send referer header (i.e., do not tell the target website where you came from).open: Use
• noreferrer: Example:
• noopener noreferrer4. download: Tries to download the target of the link instead of navigating to it.noopenerandnoreferrerIf a filename is specified, the browser will prompt to download and save it as the specified filename.<a href="https://www.example.com" rel="noopener noreferrer">安全链接</a>

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

Example

"Access Example website"

5. title: Defines additional information for the link, displayed as a tooltip when hovering over the link.

6. id: Used for creating anchor points for links, typically for jumping to a specific position on the same page.

7. hreflang: Specifies the language of the target URL

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

9. class: Used to specify the class name (CSS-defined) for an element

10. style: Directly defines CSS styles on an element

---

Example

<a href="../index.html">访问Example</a>

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

Image link:

You can also use images as links. In this case, the <a> element surrounds the <img> element. For example: Anchor point link:In addition to linking to other web pages, you can create internal links within the same page, which is called anchor point links. To create anchor point links, you need to define a marker at the target position using the <a> element and then create a link to the "useful tips" section (id="tips") from another page:

Empty linkBelow are some common methods for setting up empty links, as well as their differences:

<a href="https://www.example.com">访问示例网站</a>

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

<a href="https://www.example.com">
  <img src="example.jpg.html" alt="示例图片">
</a>

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

<a href="../index.html">跳转到第二部分</a>
<!-- 在页面中的某个位置 -->
<a name="section2"></a>

Download links:If you want the link to be used for downloading files instead of navigating to another web page, you can use the download attribute. For example:

<a href="document.pdf.html" download>下载文档</a>

---

HTML link - target attribute

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

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

---

HTML link - id attribute

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

Note:Bookmarks will not be displayed in any special way, i.e., they are not visible in the HTML page, so for the reader, they are hidden.

Example

In HTML documents, insert ID:

<a id="tips">有用的提示部分</a>

In HTML documents, create a link to "useful tips" (id="tips"):

<a href="../index.html">访问有用的提示部分</a>

Or, from another page, create a link to "useful tips" (id="tips"):

<a href="../html/html-links.html">
访问有用的提示部分</a>

---

Empty link

Here are some common ways to set up empty links, and their differences:

Method	Functionality	Will it redirect	Applicability to scenarios
href="../index.html"	Navigate to the top of the page	Yes	Placeholder, captures click event
href="#"	Prevents default behavior, does not refresh the page	no	Prevents jump, combined with JS usage
href=""	Refresh the current page	Yes	Need page refresh
href="blank.html"	Open a blank page	Yes	Open a new window to open a blank page
role="button"	Link as a button, no default behavior	no	Combined with JS to implement button functionality, no jump

---

Basic precautions - useful tips

Comments:Always add a forward slash to subdirectories. If you write a link like href="../html.html", it will generate two HTTP requests to the server because the server will add a forward slash to this address, then create a new request, like this: href="../html/index.html".

---

Image link
How to use image links

Link to a specified position 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 within the frame.

Create an email link
This example demonstrates how to link to an email. (This example works only after installing a mail client program.)

Create an email link 2
This example demonstrates a more complex email link.

---

HTML link tag

Tag	Description
<a>	Define a hyperlink

Other extensions