YouTipHTML Links
Links are the core part of jumping between web pages in HTML.
HTML uses links to connect to another document on the web.
In HTML, a link is an element used for navigation between different web pages.
Links are usually 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 on text or images while browsing web pages to jump to other locations, thus achieving interconnection between web pages.
HTML links are created using the [a] tag, which is commonly used to navigate users from one page to another, jump from one section to another part of the page, download files, open email applications, or execute JavaScript functions.
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. When the link is clicked, the browser will navigate to this URL.
The following example demonstrates how to create a link in an HTML document:
Example
This text is a link to a page within this site.
This text is a link to a page on the World Wide Web.
HTML Hyperlinks (Links)
HTML uses the <a> tag to set hypertext links.
A hyperlink can be a word, a phrase, 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 of the current document.
When you move your mouse pointer over a link on a web page, the cursor changes into a small hand.
The href attribute is used in the <a> tag to describe the link's address.
By default, links appear in the browser in the following form:
- An unvisited link appears as blue text with an underline.
- A visited link appears as purple text with an underline.
- When a link is clicked, it appears as red text with an underline.
Note: If CSS styles are set for these hyperlinks, the display style will be shown according to the CSS settings.
HTML Link Attributes
The href attribute describes the target of the link.
1. href: Define the link destination.
This is the most important attribute of a hyperlink, used to specify the destination. It can be another web page, file, email, phone number, or JavaScript.
Example
<a href="https://www.example.com">Visit Example</a>
2. target: Define 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 entire window, removing any frames.
Example
<a href="https://www.example.com" target="_blank" rel="noopener">Open Example in a new window</a>
3. rel: Define the relationship between the link and the target page.
nofollow: Indicates that search engines should not track this link, often used for external links.
noopener and noreferrer: Prevent security issues when opening links in a new tab, especially when using target="_blank".
noopener: Prevents the new browsing context (page) from accessing thewindow.openerproperty andopenmethod.noreferrer: Does not send a referer header (i.e., does not tell the target website where you came from).noopener noreferrer: Use bothnoopenerandnoreferrer. Example:<a href="https://www.example.com" rel="noopener noreferrer">Safe Link</a>
Example
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Safe Link</a>
4. download: Prompt the browser to download the link target instead of navigating to it.
If a filename is specified, the browser will prompt to download and save it as the specified filename.
For example:
Example
<a href="file.pdf" download="example.pdf">Download File</a>
5. title: Define additional information for the link, displayed as a tooltip when the mouse hovers over the link.
Example
<a href="https://www.example.com" title="Visit Example Website">Visit Example</a>
6. id: Used for linking anchors, typically to jump to a specific location on the same page.
Example
<a href="#section1">Go to Section 1</a>
<div id="section1">This is Section 1</div>
7. hreflang: Specifies the language of the target URL.
Example
<a href="https://www.example.com/es" hreflang="es">Visit Spanish Website</a>
8. type: Specifies the MIME type of the linked resource.
Example
<a href="style.css" type="text/css">Style Sheet</a>
9. class: Used to specify the class name of the element (defined in CSS).
Example
<a href="https://www.example.com" class="external-link">External Link</a>
10. style: Defines CSS styles directly on the element.
Example
<a href="https://www.example.com" style="color: red;">Red Link</a>
Examples
<a href="#">Visit </a> This line of code displays as: Visit
Clicking this hyperlink will take the user to the homepage of .
Tip: The "link text" does not have to be text. Images or other HTML elements can also be links.
Text Links: The most common type of link is a text link, which uses the <a> element to convert a piece of text into a clickable link, for example:
<a href="https://www.example.com">Visit Example Site</a>
Image Links: You can also use images as links. In this case, the <a> element encloses the <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, known as anchor links. To create an anchor link, you need to define a marker at the target location using the <a> element and reference it using the # symbol. For example:
<a href="#section2">Go to Section 2</a><a name="section2"></a>
Download Links: If you want the link to be used for downloading a file instead of navigating to another web page, you can use the download attribute. For example:
<a href="document.pdf" download>Download Document</a>
HTML Links - Target Attribute
Using the target attribute, you can define where the linked document is displayed.
The following line opens the document in a new window:
Example
<a href="#" target="_blank" rel="noopener noreferrer">Visit !</a>
HTML Links - id Attribute
The id attribute can be used to create a bookmark in an HTML document.
Note: Bookmarks do not display in any special way, meaning they are not visible in the HTML page, so they are hidden from readers.
Example
Inserting an ID in an HTML document:
<a id="tips">Useful Tips Section</a>
Creating a link to the "Useful Tips Section (id="tips")" in an HTML document:
<a href="#tips">Access Useful Tips Section</a>
Or, creating a link to the "Useful Tips Section (id="tips")" from another page:
<a href="#">Access Useful Tips Section</a>
Empty Links
Here are several common methods to set empty links, and the differences between them:
| Method | Function | Will it jump? | Applicable Scenario |
|---|---|---|---|
href="#" |
Navigate to the top of the page | Yes | Placeholder, capture click events |
href="javascript:void(0)" |
Prevent default behavior, no page refresh | No | Prevent jumping, used with JS |
href="" |
Refresh the current page | Yes | When page refresh is needed |
href="about:blank" |
Open a blank page | Yes | Open a blank page in a new window |
role="button" |
The link appears as a button without default behavior | No | Implement button functionality with JS, no jump |
Basic Notes - Useful Tips
Note: Always add a slash to subfolders. If you write the link like this: href="#", it will cause two HTTP requests to the server. This is because the server will add a slash to this address and then create a new request, like this: href="#".
More Examples
Image Link How to use image links.
Link to a specific location on the current page How to use bookmarks.
Break out of the frame This example shows how to break out of the frame if your page is fixed within a frame.
Create an email link This example shows how to link to an email. (This example works only after installing an email client.)
Create a more complex email link This example shows a more complex email link.
HTML Link Tags
| Tag | Description |
|---|---|
| a | Defines a hyperlink |