HTML Text and Links
HTML Links
HTML Links allow you to connect one page to another or link to files, images, or external websites.
Links are created using the(anchor) tag, which turns any text or image into a clickable hyperlink.
The
The anchor tag uses the href attribute to specify the destination URL.
Basic Example
html
<a href="https://html5andcss3.org">Visit HTML5 & CSS3</a>Explanation
- Defines the hyperlinkhref- Contains the destination address- The text between
and</a>becomes clickable
Types of HTML Links
a) External Links
Links to a different website.
External Links Example
html
<a href="https://www.google.com">Go to Google</a>b) Internal Links
Links to another page on the same website.
Internal Links Example
html
<a href="about.html">About Us</a>c) Anchor Links (Within Same Page)
Links to a specific section on the same page using the id attribute.
Anchor Links Example
html
<a href="#contact">Go to Contact Section</a>
<h2 id="contact" style="margin-top: 700px">Contact Us</h2>d) Email Links
Use the mailto: prefix to open an email app.
Email Link Example
html
<a href="mailto:contact@html5andcss3.org">Send Email</a>e) Phone Links
Use the tel: prefix to make a phone number clickable on mobile.
Phone Link Example
html
<a href="tel:+911234567890">Call Us</a>The target Attribute
The target attribute defines how the link opens.
| Value | Description |
|---|---|
| _self | Opens in the same tab (default) |
| _blank | Opens in a new tab |
| _parent | Opens in the parent frame |
| _top | Opens in the full body of the window |
Link Example with Target
html
<a href="https://html5andcss3.org" target="_blank">Open in New Tab</a>Using Links with Images
You can turn an image into a clickable link:
Image Link Example
html
<a href="https://html5andcss3.org">
<img src="/assets/images/html5_and_css3_logo.png" alt="HTML5 Logo" width="120">
</a>The title Attribute
Adds extra information that appears when you hover over the link.
Link with Title Attribute
html
<a href="https://html5andcss3.org" title="Visit HTML5 and CSS3 Tutorials">HTML5 & CSS3</a>Example: Navigation Menu Using Links
Navigation Menu Link
html
<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Services</a> |
<a href="#">Contact</a>
</nav>This creates a simple, text-based navigation menu for your website.
You can change # with your desired path to link these navigation menus.
Best Practices for Links
- Always use meaningful link text (avoid “Click here”).
- Use
target="_blank"only for external sites. - Ensure all links are accessible and have clear purpose.
- Use CSS to style links consistently across pages.
Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
Conclusion
HTML Links are essential for connecting web pages and building site navigation.
Using the tag properly improves user experience, accessibility, and SEO - making your website easier to explore and understand.