HTML link attributes tell the browser how a link works. They set where the link goes, how it opens, and what extra details it adds.
What are HTML Link Attributes?
The HTML link attribute is part of the <a> tag. It defines link behavior. It controls how the link loads and what data it sends to the browser.
Here is the syntax you need to know:
<a href="URL" [attribute]=["value"]>Link Text</a>Here is an example:
<a href="https://example.com" target="_blank">Visit Site</a>This code sets a link that opens in a new tab.
Here are the commonly used link attributes:
- href sets the link destination.
- target controls how the link opens.
- rel sets the relation between the current page and the target.
- download tells the browser to download the file.
So, what are the differences between internal and external link attributes?
Internal links point to pages on the same site. External links point to other sites.
The internal link uses a short path like /about.html and keeps the visitor in the same domain.
An external link uses a full URL like https://news.com/page.html. It sends the visitor outside the site.
Examples of Link Attributes in HTML
Internal link with href:
<a href="/about.html">About Us</a>This link sends the user to the about page on the same site and keeps the navigation smooth and does not load a new tab.
External link with target:
<a href="https://example.com" target="_blank">Visit Example</a>This link sends the user to another site. It opens in a new tab so the current page stays in place. This is common for outside resources.
Link with rel attribute:
<a href="https://othersite.com" rel="nofollow">External Resource</a>This link goes to an external page. The rel attribute tells search engines not to pass ranking to this site. It is often used for sponsored or untrusted links.
Link with download attribute:
<a href="/files/report.pdf" download="AnnualReport.pdf">Download Report</a>This link points to a file. The browser does not open it. Instead, it downloads the file and saves it with the given name.
Wrapping Up
You learned what HTML link attributes are and how they work. You also saw the difference between internal and external links.
Here is a quick recap:
- Use
hrefto set the link path. - Use
targetto control how the link opens. - Use
relto mark a relation or block search flow. - Use
downloadto force file download.
FAQs
What are the most common HTML link attributes?
- href - defines the link destination
- target - controls where to open link
- rel - defines link relationship
- download - forces file download
<a href="https://example.com" target="_blank" rel="noopener">Visit</a>How do you open a link in a new tab using HTML?
<a href="https://google.com" target="_blank">Google</a>target="_blank" makes the link open in a new browser tab.
What does the rel attribute do in HTML links?
- rel="nofollow" - tells search engines not to pass ranking
- rel="noopener" - prevents security risks
- rel="sponsored" - marks paid links
<a href="https://ads.com" rel="sponsored">Ad Link</a>How can you force a link to download a file?
<a href="file.pdf" download>Download PDF</a>download attribute tells the browser to save the file instead of opening it.Similar Reads
The video tag in HTML plays video files directly in the browser. It adds custom playback without third-party services or…
The HTML time Tag marks time values in a document. Use it to show dates or times that machines and…
The <footer> tag defines a footer section in HTML. It creates a clear endpoint for a page or section. Browsers…
The HTML<kbd> tag shows the keys that a user must press. This helps you to give instructions for commands or…
The HTML <template> tag lets you store HTML content that won’t show up right away. JavaScript can pull it in…
Semantic article tag in HTML uses clear tags that show the role of each part. These tags tell browsers and…
The id attribute adds a unique name to an HTML element. It helps with CSS and JavaScript in the page.…
The sub tag in HTML shows text in subscript form. It places the text slightly below the normal baseline of…
The style tag in HTML defines CSS inside a web page. Click to see how it works with syntax and…
The header tag defines the top part of a page or a section in HTML. It usually holds a heading…
