HTML Links
🌐 Introduction to HTML Links
HTML links allow users to navigate from one page to another — either within the same website or to external sites. They are created using the <a> tag (short for “anchor”) and are essential for building web navigation 🔗.
>>“The web is built on links — they connect everything.” 🌍
🔤 Basic Syntax
HTML Link Syntax
<a href="https://example.com">Visit Example</a>- href attribute defines the destination URL. - The anchor text inside the tag is what users will click.
📁 Linking to Different Destinations
- 🌍 External URL → href="https://example.com"
- 🏠 Internal page → href="/about.html"
- 📞 Telephone → href="tel:+1234567890"
- 📧 Email → href="mailto:someone@example.com"
- 🎯 Page section → href="#section-id"
🧪 Example: Internal vs External
Internal and External Links
<a href="/contact.html">Contact Us</a>
<a href="https://google.com">Google</a>🪟 Opening Links in New Tab
Use the target="_blank" attribute to open the link in a new browser tab.
Open Link in New Tab
<a href="https://openai.com" target="_blank">Visit OpenAI</a>Note
⚠️ It's good practice to also add rel="noopener noreferrer" for security when using target="_blank".
🎨 Styling Links with CSS
Links have default styles, but you can customize them using CSS.
CSS for Links
a {
color: blue;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: red;
}🔁 Link to an Element on the Same Page
Use an anchor with href="#id" to jump to a specific element by its ID.
Jump to Section
<a href="#section1">Go to Section 1</a>
...
<h2 id="section1">Section 1</h2>⚠️ Things to Remember
- Always use a valid and reachable URL
- Use descriptive link text — avoid “click here”
- Don't nest <a> inside another <a>
📚 Resources
>>“Navigation is not just about clicking — it’s about guiding.” 🧭