In HTML, links (also called hyperlinks) are created using the <a> tag.
They allow users to navigate from one page to another or jump to a specific section of the same page.
1. Basic Syntax
<a href="https://example.com">Click Here</a>
<a>→ Anchor tag (defines the link).href→ Hyperlink reference (the URL or location).- Link Text → The clickable part shown to the user.
2. Types of Links
a) Absolute Link
- Links to a full web address.
<a href="https://google.com">Google</a>
b) Relative Link
- Links to another page within the same website.
<a href="about.html">About Us</a>
c) Email Link
- Opens the user’s email app.
<a href="mailto:info@example.com">Email Us</a>
d) Telephone Link
- Click-to-call on mobile devices.
<a href="tel:+911234567890">Call Us</a>
e) Internal Page Jump (Anchor Link)
- Jumps to a section on the same page.
<a href="#contact">Go to Contact</a>
<!-- Target section -->
<h2 id="contact">Contact Us</h2>
3. The target Attribute
Controls how the link opens:
_self(default) → same tab._blank→ new tab/window._parent→ parent frame._top→ full window.
Example:
<a href="https://example.com" target="_blank">Open in New Tab</a>
4. The title Attribute
Shows extra info when hovering over the link:
<a href="https://example.com" title="Visit Example Website">Example</a>
5. Styling Links
By default:
- Unvisited link → blue & underlined.
- Visited link → purple.
- Active link → red.
You can change these with CSS.
Example:
<a href="https://example.com" style="color: green; text-decoration: none;">Styled Link</a>
6. Complete Example
<p>
Visit <a href="https://openai.com" target="_blank" title="OpenAI Website">OpenAI</a>
or <a href="about.html">read more about us</a>.
</p>
