HTML Tutorial: HTML Links
Learn how to create hyperlinks, internal links, external links, and style them with colors
Links allow users to navigate web pages easily. HTML uses the <a> tag for hyperlinks.
1️⃣ Basic External Link
INPUT:
<a href="https://www.example.com" >
Visit Example
</a>
OUTPUT:
Visit Example
✔️ href specifies the link URL
✔️ Clickable text navigates to the target site
2️⃣ Internal Link
Internal links navigate to sections within the same page using id.
INPUT:
<a href="#section1">
Go to Section 1
</a>
<h2 id="section1">
Section 1 Heading
</h2>
OUTPUT:
Go to Section 1Section 1 Heading
✔️ Internal links are useful for long pages or single-page websites
✔️ Use id to define the target section
3️⃣ Open Link in New Tab
INPUT:
<a href="https://www.example.com" target="_blank">
Open Example in New Tab
</a>
OUTPUT:
Open Example in New Tab
✔️ target="_blank" opens link in a new browser tab
✔️ Useful for external references
4️⃣ Styled Links
INPUT:
<a href="#" style="color:white; background-color:#0077cc; padding:6px 12px; border-radius:6px; text-decoration:none;">
Click Me!
</a>
OUTPUT:
Click Me!
✔️ Inline CSS can style links with colors, padding, and rounded corners ✔️ Makes links visually appealing and clickable
🎯 Best Practices
- Use descriptive link text (e.g., “Visit Blog”, not “Click Here”)
- Use
target="_blank"for external links - Style links to match your website theme
- Internal links help navigate long pages efficiently
🚀 What’s Next?
👉 HTML Images
Next lesson will cover:
- How to display images using
<img> - Image attributes like src, alt, width, height
- Styling and positioning images
Links are essential for navigation and connecting web pages effectively. Use them wisely!