HTML कोटेशन्स (उद्धरण)

परिचय

HTML कोटेशन्स HTML में उद्धरण बनाने के लिए उपयोग किए जाते हैं। HTML <q> टैग एक छोटे उद्धरण को परिभाषित करने के लिए उपयोग किया जाता है। यह एक इंलाइन एलिमेंट है। HTML <blockquote> टैग एक ऐसे सेक्शन को परिभाषित करने के लिए उपयोग किया जाता है जिसे किसी अन्य स्रोत से उद्धृत किया गया है। यह एक ब्लॉक-लेवल एलिमेंट है।

सिंटैक्स

<q>उद्धरण</q>

या

<blockquote>उद्धरण</blockquote>

उदाहरण

<!DOCTYPE html>
<html>
<style>
  body {
    color: #000;
    height: 100vh;
    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
    text-align: center;
    font-family: Arial, sans-serif;
    padding: 20px;
  }
  q {
    font-style: italic;
    color: #555;
  }
  blockquote {
    border-left: 4px solid #db133a;
    padding-left: 1rem;
    margin: 1.5rem 0;
    text-align: left;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-style: italic;
    color: #333;
  }
  blockquote::before {
    content: "❝ ";
    font-size: 2rem;
    color: #db133a;
  }
  blockquote::after {
    content: " ❞";
    font-size: 2rem;
    color: #db133a;
  }
</style>
<body>
<h1>HTML कोटेशन्स</h1>
<p>छोटा उद्धरण: <q>मैं कुछ डमी टेक्स्ट वाला एक कोट एलिमेंट हूँ।</q></p>
<blockquote>मैं कुछ डमी टेक्स्ट वाला एक ब्लॉक कोट एलिमेंट हूँ। यह एक लंबा उद्धरण है जो किसी अन्य स्रोत से लिया गया है।</blockquote>
</body>
</html>

आउटपुट

एक छोटा इंलाइन उद्धरण (कुंडलीदार कोट्स के साथ) और एक ब्लॉक-स्तरीय उद्धरण (बाएं बॉर्डर और कोट मार्क्स के साथ) प्रदर्शित होगा।

<q> vs <blockquote>

cite एट्रिब्यूट

दोनों टैग्स cite एट्रिब्यूट का समर्थन करते हैं जो स्रोत URL देता है:

<q cite="https://example.com/source">उद्धृत टेक्स्ट</q>
<blockquote cite="https://example.com/article">लंबा उद्धरण...</blockquote>

CSS में कोट्स कस्टमाइज़ करना

q {
  quotes: "「" "」" "『" "』"; /* जापानी शैली */
}
q::before { content: open-quote; }
q::after { content: close-quote; }

ब्राउज़र समर्थन

सभी ब्राउज़रों में पूर्ण समर्थन।