HTML Links
In this article, we’ll take a closer look at how HTML links work and how you can use them to create a seamless user experience on your website.
HTML links, also known as hyperlinks, are one of the most fundamental building blocks of the World Wide Web. They allow users to navigate from one web page to another by clicking on a specific piece of text or an image.
A link is a part of a webpage, and links can be found on almost every website. By clicking on links, users can navigate between pages.
A link is defined by the HTML tag <a>. Any element between the starting <a> tag and ending </a> tag becomes part of the link, which can be clicked by a user to access the linked document.
Here is a basic example of using an <a> tag. A link is defined by the HTML tag <a>.
Any element between the starting <a> tag and ending </a> tag becomes part of the link, which can be clicked by a user to access the linked document. Here is a basic example of using an <a> tag.
- HTML Links:
- HTML Links – Hyperlinks:
- HTML Links – Syntax:
- HTML Links – The target Attribute:
- Absolute URLs vs. Relative URLs:
- Use an image as a link in HTML:
- How to link an Email Address:
- How To Link Titles:
- Adding a link to a button:
- Using HTML _top:
- More about relative URLs and absolute URLs:
- Article Summary:
- HTML Link Tags:
HTML Links – Hyperlinks
HTML links are hyperlinks.
A link can lead you to another document by clicking on it.
A little hand will appear when the mouse arrow is moved over a link.
It is essential to note that a link must not be text. It doesn’t matter if the link is an image or another HTML element!
HTML Links – Syntax
In HTML, the <a> tag defines a hyperlink.
Syntax for it is as follows:
href, which indicates the link’s destination, is the most important attribute of the a> element.
Readers can see the link text.
The reader will be directed to the specified URL address by clicking on the link text.
In this example, we will create a link to Mrexamples.com as follows:
Example:
Underlined and blue links have not been visited
Underlined and purple links have been visited
Underlined and red links are active
To get a different look at your links, you can style them with CSS.
HTML Links – The target Attribute
When a link is clicked, the linked page opens in the current window of the browser. This can be changed by specifying another link target.
Linking to a document is specified by the target attribute.
One of the following values can be assigned to the target attribute:
_self– default. This opens the document in the same window/tab as the one in which it was clicked_blank– Displays the document in a new window or tab_parent– Opens the document in its parent frame_top– Expands the document to fill the entire window
Use target=”_blank” if you want the linked document to appear in a new browser window or tab:
Example:
Absolute URLs vs. Relative URLs
As you can see, both examples use absolute URLs (full web addresses).
A local link (which points to a page within the same website) is specified with a relative URL (rather than an absolute one).
The “https://www” part is as follows:
Use target=”_blank” in the URL to open the linked document in a new window or tab:
Example:
Use an image as a link in HTML
In order to use an image as a link, just place the <img> tag inside the <a> tag:
Example:
How to link an Email Address
Create a link using mailto: in the href attribute so users can send an email by opening their email program.
Use target=”_blank” to open the linked document in a new tab or window.
Example:
How To Link Titles
Elements can be described in more detail by their title attributes.
Usually, when the mouse hovers over an element, the tooltip text displays the information.
Use target=”_blank” to open the linked document in a new browser window or tab:
Example:
Adding a link to a button
You must use JavaScript code to make HTML buttons linkable.
When a button is clicked, JavaScript allows you to specify what will happen.
Use target=”_blank” to open the linked document in a new browser window or tab:
Example:
Tip: Check out our JavaScript Tutorial for more information .
Using HTML _top
A target=\”_top\” attribute indicates the linked page or form reply will be opened in the topmost frame.
There is a full browser tab and window in the topmost frame.
Example:
More about relative URLs and absolute URLs
When linking to a web page, include the full URL.
Example:
Link to a web page on the current site located in the html folder.
Example:
Link to a web page exist in the same folder as the current page:
Example:
Article Summary
Link elements are defined using the <a> element.
Link addresses can be defined using the href attribute.
Use the
targetattribute to define where to open the linked document.Use the
<img>element (inside<a>) for linking images.Create a link that opens the user’s email program by using the mailto: scheme inside the href attribute.
HTML Link Tags
| Tag | Overview |
|---|---|
| <a> | Defines a hyperlink |
Check out our HTML Tag Reference for a full list of available HTML tags.
Uses of HTML Links
The following are the daily life uses of HTML links:
1.Navigation: HTML links are commonly used to create hyperlinks between different pages of a website, allowing users to navigate easily between pages.
2. Image mapping: HTML links can be used to create image maps, which allow users to click on different parts of an image to access different pages or sections of a website.
3. Email addresses: HTML links can be used to create email links that open the user’s default email client and create a new email addressed to a specific recipient.
4. File downloads: HTML links can be used to create download links that allow users to download files such as PDFs, images, or other documents.
5. Social media: HTML links can be used to create links to social media profiles or share buttons that allow users to share website content on their own social media pages.
