HTML – TEXT LINKS
HTML text links (or hyperlinks) allow users to navigate from one web page to another or within the same page. They are created using the <a> (anchor) tag in HTML.
Basic Syntax
<a href="URL">Link Text</a>This will produce the following result:
Explanation of Attributes
1.href: Specifies the URL or path of the target page.
- Example: href="https://example.com"
2.target: Specifies where to open the linked document.
- _self (default): Opens in the same window/tab.
- _blank: Opens in a new window/tab.
- _parent: Opens in the parent frame.
- _top: Opens in the full body of the window.
3.Title: Provides additional information about the link, shown as a tooltip when the user hovers over it.
4.Rel: Defines the relationship between the current document and the linked document.
- Example: rel="nofollow"
Examples of Text Links
1. Basic Link
<a href="https://www.mahekinstituterewa.com">Visit Example</a>This will produce the following result:
2. Link Opening in a New Tab
<a href="https://www.mahekinstituterewa.com"_blank">Open Example in New Tab</a>This will produce the following result:
3. Internal Link (Same Page)
<a href="#section1">Go to Section 1</a>
<!-- Later in the document -->
<h2 id="section1">Section 1</h2>This will produce the following result:
4. Email Link
<a href="mailto:info@mahekinstituterewa.com">Email Us</a>This will produce the following result:
5. Telephone Link
<a href="tel:+1234567890">Call Us</a>This will produce the following result:
6. Adding a Tooltip
<a href="https://www.mahekinstituterewa.com" title="Visit Example Website">Example with Tooltip</a>This will produce the following result:
7. Download Link
You can create a link to allow users to download a file directly.
Example:
<a href="file.pdf" download>Download PDF</a>Explanation:
The download attribute prompts the browser to download the file instead of opening it in the browser.
This will produce the following result:
8. Linking to an External Website
Example:
<a href="https://www.wikipedia.org" target="_blank" rel="noopener noreferrer"> Visit Wikipedia</a>Explanation:
The rel="noopener noreferrer" attribute is added for security and performance when using target="_blank", as it prevents the new page from accessing the referring page.
This will produce the following result:
9. Linking to a Specific Part of Another Page
You can link directly to a section within another page if that page uses id attributes for sections.
Example:
<a href="about.html#team">Meet Our Team</a>This will produce the following result:
10. JavaScript Link
Sometimes, you may need to trigger JavaScript functionality with a link.
Example:
<a href="javascript:void(0);" onclick="alert('Hello, World!')">Click Me</a>Explanation:
- javascript:void(0); prevents the link from navigating to any page.
- The onclick attribute executes a JavaScript function when clicked.
This will produce the following result:
11. Styling Different States of Links
Links have multiple states you can style with CSS:
- Normal (a): The default style.
- Visited (a:visited): Style after the link has been clicked.
- Hover (a:hover): Style when the mouse hovers over the link.
- Active (a:active): Style when the link is being clicked.
Example CSS:
a {color: blue; text-decoration: none;}a:visited {> color: purple;}a:hover { color: red; text-decoration: underline;}a:active { color: green;}
12. Button Styled as a Link
Use a text link styled to look like a button using CSS.
Example:
<a href="https://example.com" class="button">Click Me</a>
<style>.button { display: inline-block; padding: 10px 20px; background-color: #007BFF; color: white; text-decoration: none; border-radius: 5px; font-size: 16px;}.button:hover { background-color: #0056b3;}</style>This will produce the following result:
13. Link with an Image
An image can act as a clickable link.
Example:
<a href="https://example.com">
<img src="image.jpg" alt="Example Image" width="200"></a>This will produce the following result:
14. Targeting Frames
When using frames or iframes, you can use the target attribute to specify where the link opens.
Example:
<a href="page.html" target="frame1">Open in Frame 1</a>
<iframe name="frame1" src="default.html" width="100" height="100"></iframe>This will produce the following result:
15. Access Keys
Access keys let users activate links using keyboard shortcuts.
Example:
<a href="https://example.com" accesskey="h">Home (Press Alt + H)</a>This will produce the following result:
16. Disabling a Link
Though there is no official disabled attribute for links, you can mimic it using CSS and JavaScript.
Example:
<a href="#" onclick="return false;" class="disabled">Disabled Link</a>
<style>.disabled { pointer-events: none; color: gray; text-decoration: none;}</style>
This will produce the following result:
17. Link to a Protocol-Specific Resource
You can create links to specific protocols like ftp, file, or sms.
FTP Example:
<a href="ftp://ftp.example.com/file.zip">Download via FTP</a>This will produce the following result:
SMS Example:
<a href="sms:+1234567890">Send SMS</a>This will produce the following result:
18. Dynamic Link Using Query Parameters
You can pass data via the URL using query strings.
Example:
<a href="search.html?q=html+links">Search for HTML Links</a>This will produce the following result:
When clicked, this opens the search.html page with q=html+links as the query parameter.
19. Link Triggering Modal Windows
You can trigger modal windows or pop-ups using links and JavaScript.
Example:
<a href="#!" onclick="openModal()">Open Modal</a>
<div id="modal" style="display:none;"> <div style="background: #fff; padding: 20px; border: 1px solid #ccc;"> <p>This is a modal window!</p> <a href="#!" onclick="closeModal()">Close</a> </div></div>
<script> function openModal() { document.getElementById('modal').style.display = 'block'; } function closeModal() { document.getElementById('modal').style.display = 'none'; }</script>
This will produce the following result:
20. Back to Top Link
A simple link to scroll back to the top of the page.
Example:
<a href="#top">Back to Top</a><!-- Ensure the page has a top identifier -->
<div id="top"></div>
This will produce the following result:
21. Image Map Links
An image map allows different parts of an image to be clickable links.
Example:
<img src="map.jpg" usemap="#map" alt="Map">
<map name="map"> <area shape="rect" coords="34,44,270,350" href="section1.html" alt="Section 1"> <area shape="circle" coords="337,300,44" href="section2.html" alt="Section 2"></map>This will produce the following result:
22. Relative Links
Relative links are used to navigate within the same website.
Examples:
Same Directory:
<a href="about.html">About Us</a>This will produce the following result:
Parent Directory:
<a href="../index.html">Home</a>This will produce the following result:
23. Responsive Links
Use media queries in CSS to style links differently on mobile and desktop.
Example:
<a href="https://example.com" class="responsive-link">Visit Example</a>
<style>.responsive-link { font-size: 16px;}@media (max-width: 600px) { .responsive-link { font-size: 12px; }}</style>This will produce the following result:
24. Linking to Social Media
Social media links can use platform-specific deep linking protocols.
Example:
<a href="https://facebook.com/yourpage" target="_blank">Facebook</a>
<a href="https://twitter.com/yourhandle" target="_blank">Twitter</a>
This will produce the following result:
25. Linking to External API Endpoints
Use a link to fetch data from an API.
Example:
<a href="https://api.example.com/data" target="_blank">Fetch API Data</a>This will produce the following result:
Frequently Asked Questions (FAQ)
Q 1. What is an HTML text link?
Q 2. How do I create a basic HTML link?
<a href="https://example.com">Click Here</a>
Q 3. What does the href attribute do?
- External link: href ="https://example.com"
- Internal link: href ="about.html"
Q 4. How can I open a link in a new tab?
<a href="https://example.com" target="_blank">Open in New Tab</a>
Q 5. What is the difference between absolute and relative links?
- Absolute Link: Contains the full URL (e.g., https://example.com/page.html).
- Relative Link: Refers to a resource relative to the current document's location (e.g., page.html or ../images/logo.png).
Q 6. How do I create a link to an email address?
<a href="mailto:someone@example.com">Send Email</a>
Q 7. Can I link to a specific section on the same page?
<a href="#section1">Go to Section 1</a>
<h2 id="section1">Section 1</h2>
Q 8. How can I make a link look like a button?
<a href="https://example.com" class="button">Click Me</a>
<style>
.button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
text-decoration: none;
border-radius: 5px;
}
</style>
Q 9. How do I disable a link?
<a href="#" onclick="return false;" class="disabled">Disabled Link</a>
<style>
.disabled {
pointer-events: none;
color: gray;
text-decoration: none;
}
</style>
Q 10. What is the purpose of the rel attribute?
- nofollow: Tells search engines not to pass link authority.
- noopener and noreferrer: Improves security for target="_blank" links.
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Secure Link</a>