Sometimes, while scrolling through a blog on the web, you might find highlighted blue text, and clicking on that text jumps you to another page in a new or the same browser tab. This is nothing but an HTML link. Links are also known as hyperlinks in HTML. The HTML links in the browser help us connect pages, websites, files, and even specific sections of web pages, making information easily accessible and improving navigation within web pages. In this blog, you are going to learn everything about HTML links, how to create an HTML link using the HTML <a> tag, and best practices for HTML hyperlinks.
Table of Contents:
What Are HTML Links and How to Use Them?
Hyperlinks in HTML are the text elements that, when clicked, immediately navigate users to another page. The HTML links are created using the <a> tag (short for anchor). This HTML <a> tag is also referred to as the anchor element. Here is the basic structure of the <a> tag in HTML:
Syntax:
<a href="https://intellipaat.com/">Intellipaat</a>
Here, you are creating an HTML link using the HTML anchor tag <a>. When the user clicks on Intellipaat, the browser can navigate the user to the official website of Intellipaat. This is a fundamental aspect of navigation in web pages. Let us understand each and every element one by one:
- <a>: Opening HTML anchor tag (or anchor element).
- href: The href attribute is used to specify the destination of the HTML link.
- Link Text: Clickable text that is visible to the users.
- </a>: Closing HTML anchor tag.
Common HTML Anchor Tag Attributes
Attributes in HTML are some additional properties that define the appearance of the HTML elements. Here are some of the attributes that are commonly used with the HTML anchor tag. These attributes are crucial for effective navigation in web pages.
- href: Used to define the path of the URL.
- target: Used to specify where to open the linked document, whether it’s the same tab or open link in new tab using target blank in HTML.
- title: Used to add extra information that only displays when the user hovers over the HTML link.
- download: It forces the browser to download the file instead of opening it.
- rel: The rel attribute helps us to define the relationship between the current page and the linked page.
Become a Job-Ready Web Developer in Just a Few Months
Join Our Web Dev Course
What Does target=”_blank” and Other Values Mean in HTML?
The target attribute in the <a> tag in HTML is used to specify where to open the linked documents. Understanding these values is important for controlling navigation in web pages. Here are some of the values and their meaning:
| Value |
Behavior |
| _self |
Opens the linked document in the same frame or tab. This is the default behavior of an anchor tag. |
| _blank |
Opens the linked document in a new browser tab or window. |
| _parent |
Opens the document in the parent frame (used when the page is nested in frames). |
| _top |
Opens the document in the full body of the window, breaking out of any frames. |
Example:
Output:
Explanation: In this example, you are creating a link using an anchor tag and setting the target attribute value to _blank. This will open link in new tab using target blank in HTML.
Different Types of HTML Links
HTML links are used to navigate users from one page to another, thus facilitating seamless navigation in web pages. There are two main types of HTML links:
1. Internal Links
Internal links are used to point to another page or another section of the same website. These HTML links help users navigate between different pages of a single website or even jump to different sections of the same page, improving internal navigation in web pages.
Syntax: Link to another page on the same website:
<a href="/about.html">About Us</a>
Syntax: Link to a section on the same page:
<a href="#contact">Go to Contact</a> // Link
<h2 id="contact">Contact Us</h2> // Target
2. External Links
External links are used to point to a page on different sites. These links take users away from your site and redirect them to another site or online resource.
Syntax:
<a href="https://www.example.com" target="_blank">Visit Example</a>
HTML links are not only used to link documents, videos, and images, but they are also used to link various elements, enhancing navigation in web pages. Here are some of the elements with their syntax to link using HTML <a> tag:
| Purpose |
Code Example |
| Link to an image |
<a href="image.jpg"><img src="image.jpg" alt="Image"></a>
You can add the link of an image in the href attribute. And the browser navigates you to that image.
|
| Link to an email address |
<a href="mailto:[email protected]">Send Email</a>
|
| Link to a phone number |
<a href="tel:+1234567890">Call Now</a>
|
| Link a button |
<a href="https://intellipaat.com/"><button>Visit Example</button></a>
But this is not recommended to do, you can do this either by styling the <a> tag like a button, or you can use JavaScript to handle button linking behaviour.
|
| Link to download a file |
<a href="file.pdf" download>Download File</a>
|
| Add a title to a link |
<a href="https://intellipaat.com/" title="Visit Example">Link Text</a>
|
How to Open Links in a New Tab Using HTML
You can open link in new tab using target blank in HTML easily with the help of these steps. This is a common requirement for external HTML links.
Step 1: Use the <a> Tag in HTML
Start by writing a basic HTML anchor tag (<a>) to create a link.
<a href="https://www.example.com">Visit Example</a>
Step 2: Add target=”_blank”
This tells the browser to open link in new tab using target blank in HTML.
<a href="https://www.example.com" target="_blank">Visit Example</a>
Step 3: (Recommended) Add rel=”noopener noreferrer”
For security and performance, add this rel attribute to prevent the new tab from accessing your page’s window object. This is an important best practice for HTML hyperlinks.
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Visit Example</a>
As a result, this will open link in new tab using target blank in HTML safely.
Difference Between Internal and External Links in HTML
Here is a comparison table that shows the difference between internal and external links in HTML:
| Aspect |
Internal Link |
External Link |
| What it is |
Link to another page within the same website |
Link to a page on a different website |
| Example |
<a href="about.html">About</a> |
<a href="https://example.com">Visit Example</a> |
| Starts With |
Relative path (e.g., home.html, /blog/post) |
Full URL (e.g., https://…) |
| File Location |
Points to a file on the same server |
Points to a file on a different server |
| Use Case |
Used for site navigation (e.g., menus, footer links) |
Used to reference outside resources (e.g., news, docs) |
| Opens In |
Usually opens in the same tab |
Often opens in a new tab using target="_blank" |
| Loading Speed |
Loads faster (same server) |
May load slightly slower (external request) |
| Control |
You fully control the linked page |
You cannot control external site content |
| Link Check |
Less likely to break unless you delete the page |
Might break if the external site changes or removes the page |
How to Create Downloadable Links in HTML?
To create downloadable links in HTML, you use the HTML <a> tag with the download attribute. This tells the browser to download the file instead of opening it.
Syntax:
<a href="file.pdf" download>Download PDF</a>
Steps to Create a Downloadable Link:
- Use the HTML <a> tag to create a hyperlink.
- Set the href to the file you want users to download.
- Add the download attribute to make the link trigger a download.
- Add a custom filename with download = “newname.ext”.
Example with Custom File Name:
<a href="resume.pdf" download="My_Resume.pdf">Download Resume</a>
This will download the file as My_Resume.pdf instead of opening it in the browser.
Common HTML Link Mistakes to Avoid
- Forgetting the href attribute: If you don’t add the href attribute, the HTML link won’t work.
- Using broken or incorrect URLs: Always double-check your file paths and URLs. This directly helps with navigation in web pages.
- Not using target=”_blank” for external link: This helps to open link in new tab using target blank in HTML.
- Missing rel=”noopener noreferrer” with target=”_blank”: The rel attribute protects your site from security risks.
- Using full URLs for internal links: For pages on the same site, use relative paths like about.html instead.
- Putting block elements like <div> inside <a> in old HTML versions: This used to be invalid; now allowed in HTML5, but still can cause layout issues if misused.
- Not giving link text a clear meaning: Avoid vague text like “click here.” Use descriptive text like “Download Guide.” This improves navigation in web pages for users.
- Using links for actions like submitting forms: Use <button> or <form> for actions, and do not use HTML <a> tags.
How to Style HTML Links Using CSS?
Styling HTML links enhances their appearance and user experience. So, you should use these steps to style your HTML links using CSS.
1. Use the “a” selector to style all links.
a { color: blue; text-decoration: none; }
2. Change link color when hovered using “a:hover”.
a:hover { color: red; }
3. Style visited links with “a:visited”.
a:visited { color: purple; }
4. Style active links (when clicked) using “a:active”.
a:active { color: green; }
5. Remove underline from links with “text-decoration: none;”
6. Add a background or border to highlight links.
a { background-color: yellow; border: 1px solid black; }
7. Use “transition” for smooth hover effects.
a { transition: color 0.3s; }
Best Practices for Creating SEO-Friendly and Accessible HTML Links
Here are some of the points that you need to follow while creating the links in HTML:
- Use clear link text: It is good practice to write short and descriptive link text. This helps both users and search engines in understanding the destination of the hyperlink in HTML.
- Make links accessible: It is good to ensure that your link text makes sense according to the context. This is crucial for inclusive navigation in web pages.
- Secure new tab links: If you want to open a link in a new tab by using the target=”_blank”, then it is good to add rel=”noopener noreferrer” in order to keep your website safe from security risks.
Browser Support for HTML Links
HTML links are accessible to all modern browsers, so there’s no need to worry about browser compatibility while using the basic links (<a> tag in HTML) for navigation in web pages:
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
- Safari
- Opera
All these browsers support the hyperlinks in HTML created by using the <a> tag in HTML.
Get 100% Hike!
Master Most in Demand Skills Now!
Conclusion
HTML links are simple but very important in web development. They help you to connect different websites, videos, and help users move easily from one place to another, thus enhancing navigation in web pages. Learning how to create HTML links is one of the important skills that help you build a website.
Discover the foundational topics of HTML programming in the articles below.-
Bootstrap Interview Questions – Take a deep dive into Bootstrap interview questions with this blog.
What Does Enctypemultipart Form Data Mean In An Html Form – This blog explains the significance of enctype=”multipart/form-data” in HTML forms.
How To Vertically Align Text Next To An Image Using Css – Master vertical text alignment next to images using CSS by reading this blog.
Regex To Match Open Html Tags Except Self Contained Xhtml Tags – This blog teaches how to create regex patterns that match open HTML tags while excluding self-closing ones.
Why Margin Top Does Not Work In Css – Discover why margin-top might not behave as expected in CSS in this blog.
How To Copy Array By Value In Javascript – Learn different ways to copy arrays by value in JavaScript through this blog.
Css Margin Auto To Horizontally Center Element – Explore the use of CSS margin: auto for horizontal centering in this blog.
Css Display Table Method To Center The Element Horizontally – Understand the display: table method for centering elements horizontally in CSS from this blog.
Using Onclick In Html A Bad Practice – This blog highlights reasons why using inline onclick attributes in HTML is discouraged.
Parsing Html Xml With Regular Expressions – Get insights on parsing HTML and XML with regular expressions in this blog.
Links in HTML – FAQs
Q1. What are the HTML links?
Links in HTML are the elements that allow users to move from one page to another page, and also to a different section on the same page.
Q2. What is a HTML anchor tag?
Q3. What is the full form of HTML?
HTML stands for HyperText Markup Language. It is the markup language used to create the structure of the webpages.
Q4. What is the full form of URL?
URL stands for Uniform Resource Locator. It is the address that you type into your browser to go to the specific page or file on the internet.
Q5. How do I open a link in a new tab in HTML?
Q6. What are internal and external links in HTML?
The difference between the internal and external links in HTML is that the internal links point to pages on the same website, while external links go to other websites.
Q7. How do I create a downloadable link in HTML?
You should use Download to make the file downloadable.
Q8. Can I link to an email or phone number using HTML?
Q9. What is the difference between href attribute and target attribute in HTML links?
href defines the link’s destination, while target controls how the link will open.
Q10. Is it SEO-friendly to use target="_blank"?
Yes, but for safety you should also include rel=”noopener noreferrer” to protect your site.