HTML Links and Images Explained (Anchor & Image Tags)

HTML Links & Images (a & img Tags)

Is chapter me hum HTML ke do sabse powerful elements links aur images ko deep level par samjhenge. Ye sirf navigation aur visuals nahi dete, balki SEO, accessibility aur user experience ka base hote hain.

Galat links aur images ranking, trust aur usability ko directly affect karte hain. Isliye ye chapter real-world focus ke saath likha gaya hai.

HTML Anchor (<a>) Tag Kya Hai?

<a> tag users ko ek page se dusre page, section, file ya external website tak le jaata hai. Web ka poora concept hi links par bana hai.

Iska sabse important attribute hota hai href, jo link ka destination define karta hai.

<a href="https://example.com">Visit Example Website</a>

Info:
Anchor text Google ko batata hai ki destination page kis topic par hai.

Anchor Text Kya Hota Hai?

Anchor text wo visible text hota hai jis par user click karta hai. Ye SEO ke liye extremely important hota hai.

Bad Anchor Text Examples

• Click here
• Read more
• Visit page

Good Anchor Text Examples

• Learn HTML document structure
• HTML text formatting tutorial
• SEO friendly HTML course

SEO Rule:
Anchor text ko natural rakho, exact keyword stuffing mat karo.

href, target aur rel Attributes

href – Link Destination

Ye absolute URL, relative path, ya page ke kisi section ka ID ho sakta hai.

<a href="#contact">Go to Contact Section</a>

target="_blank" – New Tab

External resources ke liye new tab UX ke liye better hota hai.

<a href="https://google.com" target="_blank" rel="noopener noreferrer"> Open Google </a>

Warning:
rel="noopener noreferrer" security aur performance ke liye zaroori hai.

Link SEO Best Practices

• Internal links se pages connect karein
• Important pages ko zyada internal links dein
• Broken links regularly fix karein
• Footer aur sidebar spam linking avoid karein

SEO Impact:
Strong internal linking crawlability aur rankings improve karti hai.

HTML Image (<img>) Tag Kya Hai?

<img> tag web page par image embed karta hai. Ye self-closing tag hota hai aur closing tag nahi hota.

Iske main attributes hote hain: src, alt, width aur height

<img src="https://via.placeholder.com/300" alt="Sample placeholder image">

alt Attribute – SEO + Accessibility

alt text image ka textual description hota hai. Screen readers aur search engines isi par depend karte hain.

Bad Alt Examples

• image
• pic1

Good Alt Examples

• Student learning HTML on laptop
• HTML tutorial thumbnail for beginners

Accessibility Rule:
Agar image purely decorative ho, to empty alt use karein: alt=""

Image Size, Width & Height (Performance)

Image size define karna page layout shift (CLS) avoid karta hai aur loading performance improve karta hai.

<img src="banner.jpg" alt="HTML course banner" width="600" height="300">

SEO + UX Tip:
Large images compress karo aur exact size define karo.

title Attribute (Optional)

title hover par tooltip dikhata hai. Ye helpful hai, lekin alt ka replacement nahi.

<img src="html.png" alt="HTML logo" title="HTML Official Logo">

Image SEO Best Practices

• Descriptive file names use karein
• Alt text meaningful rakhein
• Image size optimize karein
• Irrelevant images avoid karein

Common Mistakes in Links & Images

• Generic anchor text use karna
• Alt attribute skip karna
• Huge image files upload karna
• Too many external links

Warning:
Ye mistakes SEO, accessibility aur page speed tino ko hurt karti hain.

Key Takeaways

• Anchor text SEO ka strong signal hota hai
• Links navigation + crawlability improve karte hain
• Alt text accessibility aur image SEO ke liye critical hai
• Image size aur optimization performance improve karta hai

Next Chapter: HTML Lists Explained (ul, ol, li, dl, dt, dd)