HTML Images, Links & Anchor Tags – Beginner's Guide (With SEO Tips)

HTML Images, Links & Anchor Tags – Make Your Webpages Clickable & Visual

📖 Aaj Ke Blog Mein Aap Seekhenge:

• HTML image lagana kaise hota hai
• Anchor tag se link banana
• Internal vs external links
• WhatsApp, phone & email links
• Alt attribute aur SEO tips
• Practice exercise

🖼️ 1. HTML Images – Website Ko Visual Banayein

Image add karne ke liye <img> tag use hota hai. Ye self-closing hota hai.

✅ Basic Syntax:

<img src="image-link" alt="Image description" width="300" />

• src: image ka URL ya file path
• alt: jab image load na ho ya SEO ke liye
• width: image ki size (pixels ya %)

📌 SEO Tip:
alt text zarur likho — Google ko image samajhne mein help milti hai.

🔗 2. Anchor Tag <a> – Link Lagana

✅ Basic Syntax:

<a href="https://example.com">Click Here</a>

✅ Open Link in New Tab:

<a href="https://example.com" target="_blank">Visit Site</a>

🌐 3. External vs Internal Links

Type	Example
External	YouTube
Internal	About Us

✉️ 4. Special Links – WhatsApp, Email, Phone

✅ WhatsApp Message:

<a href="https://wa.me/919999999999?text=Hi%20there">Message on WhatsApp</a>

Message on WhatsApp

✅ Email Link:

<a href="mailto:someone@example.com">Send Email</a>

Send Email

✅ Phone Call:

<a href="tel:+919999999999">Call Me</a>

Call Me

🔁 Combine Image with Link

<a href="https://google.com">
  <img src="https://i.imgur.com/OwJzBHZ.png" alt="Google Logo" width="100" />
</a>

➡️ Jab user image pe click kare, toh woh Google pe chala jaye.

🔧 Practice Challenge

• Ek image ho with proper alt
• Ek external link ho (Google)
• Ek email aur phone link ho
• Ek image ke upar link laga ho

✅ Aaj Aapne Kya Seekha?

• Website me image lagana
• SEO-friendly alt use karna
• Links banana with anchor tag
• Internal & external navigation
• Clickable images ka use