HTML Links
HTML uses hyperlinks to connect to another document on the web. Almost all web pages contain links. Clicking on a link allows you to jump from one page to another.
Try It Yourself - Example
(More examples can be found at the bottom of this page)
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, which you can click to jump to a new document or a specific part of the current document.
When you hover your mouse pointer over a link on a webpage, the arrow turns into a small hand.
The href attribute is used within the <a> tag to describe the link's destination.
By default, links will appear as follows in browsers:
- An unvisited link is displayed as blue text with an underline.
- A visited link is displayed as purple text with an underline.
- An active link is displayed as red text with an underline when clicked.
Note: If CSS styles are set for these hyperlinks, the display style will be shown according to the CSS settings.
HTML Link Syntax
The HTML code for a link is simple. It looks like this:
The href attribute describes the target of the link.
Example
The above code displays as: Visit tutorialpro.org
Clicking this hyperlink will take the user to the homepage of tutorialpro.org.
Tip: "Link text" does not have to be text. Images or other HTML elements can also become links.
HTML Links - 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:
Example
<a href="https://www.tutorialpro.org/" target="_blank" rel="noopener noreferrer">Visit tutorialpro.org!</a>
HTML Links - ID Attribute
The id attribute can be used to create a bookmark in an HTML document.
Tip: Bookmarks do not display in any special way. They are not visible on the HTML page, so they are hidden to the reader.
Example
Inserting an ID in the HTML document:
Creating a link to the "Useful Tips Section (id="tips")" in the HTML document:
Or, creating a link to the "Useful Tips Section (id="tips")" from another page:
Basic Guidelines - Useful Tips
Note: Always add a forward slash to subfolders. If you write a link like this: href="https://www.tutorialpro.org/html", it will generate two HTTP requests. This is because the server adds a forward slash to the address and creates a new request, like this: href="https://www.tutorialpro.org/html/".
More Examples
Link to Specific Part on the Current Page
HTML Link Tags
| Tag | Description |
|---|---|
| <a> | Defines a hyperlink |