HTML Bookmarks का उपयोग एक ही वेबपेज के किसी specific हिस्से पर सीधे jump करने के लिए किया जाता है।
जब कोई पेज बहुत लंबा होता है, तब bookmarks user experience को बेहतर बनाते हैं।
HTML Bookmark क्या होता है?
HTML Bookmark एक internal link होता है जो उसी page के किसी section से जुड़ा होता है।
User link पर click करता है और page सीधे उसी section तक scroll हो जाता है।
HTML Bookmark बनाने के लिए क्या चाहिए?
HTML Bookmark बनाने के लिए दो चीज़ें जरूरी होती हैं:
- Target element को एक id देना
- उसी id को refer करने वाला link बनाना
Step 1: Target Element को ID देना
जिस section पर jump कराना है, उस element में id attribute add करें।
<h2 id="html">HTML Section</h2>
<p>This is HTML tutorial content.</p>
यहाँ html एक unique bookmark id है।
Step 2: Bookmark Link बनाना
अब उसी id को href में # के साथ use करें।
<a href="#html">Go to HTML Section</a>
जब user इस link पर click करेगा, page सीधे HTML Section पर पहुंच जाएगा।
Complete Bookmark Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Bookmarks</title>
</head>
<body>
<a href="#contact">Jump to Contact Section</a>
<h1>Welcome</h1>
<p>Long content goes here...</p>
<h2 id="contact">Contact Us</h2>
<p>Email: support@example.com</p>
</body>
</html>
Top to Bottom Navigation (Table of Contents)
Bookmarks का सबसे common use Table of Contents बनाने में होता है।
<h2>Contents</h2>
<a href="#intro">Introduction</a><br>
<a href="#html">HTML</a><br>
<a href="#css">CSS</a>
<h2 id="intro">Introduction</h2>
<p>Intro content...</p>
<h2 id="html">HTML</h2>
<p>HTML content...</p>
<h2 id="css">CSS</h2>
<p>CSS content...</p>
Bookmark को External Page से Use करना
Bookmarks को दूसरे page से भी access किया जा सकता है।
<a href="tutorial.html#html">Open HTML Section</a>
यह link tutorial.html open करेगा और सीधे HTML section पर ले जाएगा।
Bookmark IDs के Rules
- ID unique होनी चाहिए
- Space allow नहीं होता
- Case-sensitive होती है
Correct:
<h2 id="html-links">HTML Links</h2>
Wrong:
<h2 id="HTML Links">HTML Links</h2>
CSS के साथ Smooth Scroll Effect
Bookmarks पर smooth scrolling के लिए CSS का उपयोग किया जा सकता है।
<style>
html {
scroll-behavior: smooth;
}
</style>
अब bookmark link पर click करने पर page smoothly scroll होगा।
Common Uses of HTML Bookmarks
- Long tutorials
- FAQ pages
- Documentation websites
- Blog posts with headings
- One-page websites
Common Mistakes
- Duplicate id use करना
#लगाना भूल जाना- ID और link text match न होना
- Very short pages में bookmarks use करना
SEO और Bookmarks
HTML bookmarks SEO के लिए helpful होते हैं क्योंकि:
- User experience improve होता है
- Google sitelinks generate कर सकता है
- Long content easily accessible बनता है
Summary
HTML Bookmarks page के अंदर navigation को आसान बनाते हैं।id attribute और anchor links का सही use long pages के लिए बहुत जरूरी है।
Smooth scrolling और proper structure professional websites का हिस्सा होता है।