HTML Quotations

जब आपको किसी का quote, कथन, या संदर्भ (reference) दिखाना हो, तो HTML में उसके लिए भी खास टैग्स दिए गए हैं। किसी का कथन (quotation), source (cite), abbreviation, और definition को HTML में कैसे दिखाते हैं।

HTML में Quotation के लिए उपयोगी Tags

टैग (Tag)	विवरण (Description)	उदाहरण (Example)
`<q>`	शॉर्ट उद्धरण (छोटा quotation)	`"Hello World!"`
`<blockquote>`	लंबा उद्धरण (लंबे कथन)	किसी व्यक्ति का पूरा quote
`<cite>`	किसी source या reference को दिखाने के लिए	किताब, वेबसाइट, या लेख का नाम
`<abbr>`	Abbreviation (शॉर्ट फॉर्म का पूरा नाम बताने के लिए)	HTML - HyperText Markup Language
`<address>`	किसी व्यक्ति या संगठन का पता या contact जानकारी	Written by XYZ
`<bdo>`	Text direction बदलने के लिए	Right-to-left या Left-to-right

Example 1: <q> — Short Quotation

जब आपको कोई छोटा quotation दिखाना हो, तो <q> टैग का प्रयोग करें। यह ब्राउज़र में अपने आप डबल कोटेशन (" ") लगा देता है।

<p>महात्मा गांधी ने कहा था, <q>सत्य ही ईश्वर है।</q></p>

Output:

महात्मा गांधी ने कहा था, सत्य ही ईश्वर है।

Note: <q> छोटे quotes के लिए होता है, जैसे एक या दो वाक्य।

Example 2: <blockquote> — Long Quotation

अगर quote थोड़ा लंबा हो या किसी का पूरा कथन दिखाना हो, तो <blockquote> का इस्तेमाल करें। यह अपने आप quote को “indent” (थोड़ा अंदर) करके दिखाता है ताकि अलग लगे।

<blockquote>
  “Education is the most powerful weapon which you can use to change the world.”
</blockquote>

Output:

“Education is the most powerful weapon which you can use to change the world.”

Blockquote में Citation जोड़ना

आप चाहें तो quote का source (कहां से लिया गया है) भी जोड़ सकते हैं cite attribute के साथ:

<blockquote cite="https://www.goodreads.com/quotes/3173">
  “Education is the most powerful weapon which you can use to change the world.”
</blockquote>

यह ब्राउज़र को बताता है कि quote का source क्या है। (हालाँकि यह दिखता नहीं, लेकिन SEO और accessibility के लिए बहुत उपयोगी है)

Example 3: <cite> — किसी Reference या Source के लिए

जब आप किसी किताब, पेंटिंग, लेख या वेबसाइट का नाम लिखते हैं, तो उसे <cite> टैग में डालना सही तरीका होता है।

<p><cite>The Bhagavad Gita</cite> is one of the most sacred Hindu texts.</p>

Output:

The Bhagavad Gita is one of the most sacred Hindu texts.

<cite> टैग टेक्स्ट को italic में दिखाता है और बताता है कि यह किसी रचना या स्रोत का नाम है।

Example 4: <abbr> — Abbreviation (संक्षेप रूप)

जब आप किसी शॉर्ट फॉर्म या abbreviation का उपयोग करते हैं, तो आप उसका पूरा नाम tooltip के रूप में दिखा सकते हैं।

<p>The <abbr title="HyperText Markup Language">HTML</abbr> is the foundation of the web.</p>

Output:

The HTML is the foundation of the web.

(माउस ले जाने पर tooltip दिखेगा → “HyperText Markup Language”) यह SEO और accessibility दोनों के लिए बहुत उपयोगी टैग है।

Example 5: <address> — संपर्क या लेखक की जानकारी

अगर आप वेबपेज के नीचे author info, contact info या address देना चाहते हैं, तो <address> टैग का प्रयोग करें।

<address>
Written by <a href="mailto:info@example.com">Jaswant Jat</a>.<br>
Visit us at: <a href="https://www.codekeet.com">codekeet.com</a><br>
Jaipur, Rajasthan
</address>

Output:

Written by Jaswant Jat.
Visit us at: codekeet.com
Jaipur, Rajasthan

<address> आमतौर पर footer या author section में इस्तेमाल किया जाता है।

Example 6: <bdo> — Text Direction Change

कभी-कभी आपको किसी टेक्स्ट को right-to-left (RTL) direction में दिखाना होता है (जैसे अरबी या हिब्रू भाषा)। इसके लिए <bdo> (Bi-Directional Override) टैग का प्रयोग किया जाता है।

<p><bdo dir="rtl">HTML सीखना बहुत मज़ेदार है!</bdo></p>

Output: - यह टेक्स्ट उल्टी दिशा (right-to-left) में दिखाई देगा।

HTML सीखना बहुत मज़ेदार है!

Example 7: सभी Tags का एक साथ उपयोग

<blockquote cite="https://codekeet.com/quotes/3173">
  “The future depends on what we do in the present.”  
  <br><cite>– Mahatma Gandhi</cite>
</blockquote>

<p><abbr title="Cascading Style Sheets">CSS</abbr> helps to style HTML elements beautifully.</p>

<address>
Written by <a href="mailto:web@codekeet.com">LearnHTML Team</a><br>
Visit: <a href="https://codekeet.com">codekeet.com</a>
</address>

Output:

“The future depends on what we do in the present.”
– Mahatma Gandhi

CSS helps to style HTML elements beautifully.

Written by LearnHTML Team
Visit: codekeet.com

Bonus Tip:

इन tags से आपकी वेबसाइट न केवल सुंदर दिखती है, बल्कि SEO-friendly और accessible भी बनती है। Search engines और screen readers इन tags के मतलब को समझ पाते हैं — जिससे आपकी वेबसाइट को बेहतर ranking मिल सकती है।