Links
One of the most powerful features of HTML is the ability to link one page to
another using hyperlinks. The <a> tag (short for anchor) is used to create these links. This
allows users to navigate between web pages, websites, files, or even specific
parts of a page.
Basic Syntax
<a href="URL">Link Text</a>
·
href stands for hyperlink reference and is the attribute
that tells the browser where to go.
·
"URL" is
the destination of the link.
·
Link Text is the clickable
part that users see.
Example
<a href="https://www.google.com">Visit Google</a>
This will appear on the page as:
👉 Visit Google (clicking it will take you to Google)
Types of Links
1. Absolute URL
Used to link to external websites.
<a href="https://www.wikipedia.org">Go to Wikipedia</a>
2. Relative URL
Used to link to other pages within the same
website or folder.
<a href="about.html">About Us</a>
If about.html is in the same directory, it
will work fine.
3. Link to a Section on the
Same Page (Anchor Link)
You can use id to jump to a
section on the same page.
<a href="#contact">Contact Us</a> <!-- Later in the page --><h2 id="contact">Contact Information</h2>
4. Open Link in a New Tab
Use the target="_blank" attribute:
<a href="https://example.com" target="_blank">Open in new tab</a>
5. Linking to an Email Address
html
<a href="mailto:someone@example.com">Send Email</a>
Clicking this opens the user’s email app.
Best Practices
·
Always describe the link: Avoid generic text like “Click
here”.
·
Use meaningful text: Example – <a href="faq.html">Read
our FAQs</a>
·
For security, when using target="_blank",
also add:
html
rel="noopener noreferrer"Example with All Features
<a href="https://example.com" target="_blank" rel="noopener noreferrer"> Visit Example Website</a>
Practice Task for Students (using XAMPP/WAMP)
1.
Open your htdocs (XAMPP) or www
(WAMP) folder.
2.
Create a new file named links.html.
3.
Add the following:
<!DOCTYPE html><html><head> <title>HTML Links</title></head><body> <h1>HTML Link Examples</h1> <p><a href="https://www.openai.com" target="_blank">Visit OpenAI</a></p> <p><a href="contact.html">Go to Contact Page</a></p> <p><a href="#footer">Jump to Footer</a></p> <p><a href="mailto:youremail@example.com">Send Me an Email</a></p> <h2 id="footer">Footer Section</h2> <p>This is the bottom of the page.</p> </body></html>
4.
Save and open this file in your
browser to test.