पाठ से संबंधित टैग

यह लेख पाठ से संबंधित टैग के बारे में बताता है।

व्याख्या को अर्थगत और गैर-अर्थगत टैग में विभाजित किया गया है।

YouTube Video

पूर्वावलोकन के लिए CSS बनाना

  1body {
  2    font-family: Arial, sans-serif;
  3    line-height: 1.6;
  4    margin: 20px 20px 20px 20px;
  5    background-color: #f4f4f9;
  6    color: #333;
  7}
  8
  9header h1 {
 10    font-size: 24px;
 11    color: #333;
 12    text-align: center;
 13    margin-bottom: 20px;
 14}
 15
 16h2, h3 {
 17    color: #555;
 18}
 19
 20h2 {
 21    font-size: 20px;
 22    border-bottom: 2px solid #ccc;
 23    padding-bottom: 5px;
 24}
 25
 26h3 {
 27    font-size: 18px;
 28    margin-top: 20px;
 29}
 30
 31p, pre {
 32    margin: 10px 0;
 33    padding: 0;
 34}
 35
 36ul, ol, dl, menu {
 37    margin: 0;
 38}
 39
 40pre {
 41    background-color: #f0f0f0;
 42    border-left: 4px solid #ccc;
 43    padding: 10px;
 44    overflow-x: auto;
 45}
 46
 47p.sample, .sample {
 48    background-color: #e7f4e9;
 49    padding: 10px;
 50    border-left: 4px solid #7bbd82;
 51    color: #333;
 52}
 53
 54p.sample-error, .sample-error {
 55    background-color: #f4e7e7;
 56    padding: 10px;
 57    border-left: 4px solid #bd827b;
 58    color: #333;
 59}
 60
 61p.sample-warn, .sample-warn {
 62    background-color: #f4f1e7;
 63    padding: 10px;
 64    border-left: 4px solid #bda97b;
 65    color: #333;
 66}
 67
 68code {
 69    padding: 2px 4px;
 70    border-radius: 4px;
 71    font-family: monospace;
 72}
 73
 74span {
 75    font-weight: bold;
 76}
 77
 78main {
 79    padding-bottom: 100px;
 80}
 81
 82article {
 83    background-color: white;
 84    padding: 20px;
 85    margin-bottom: 10px;
 86    border-radius: 8px;
 87    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 88}
 89
 90section {
 91    margin-bottom: 20px;
 92}
 93
 94table {
 95    width: 100%;
 96    border-collapse: collapse;
 97}
 98
 99th, td {
100    border: 1px solid #ddd;
101}

मूल पाठ से संबंधित टैग

<div> टैग

1<div>This is a division of content.</div>

• <div> टैग एक ब्लॉक-स्तरीय तत्व है जो HTML में विभाजन बनाने के लिए उपयोग किया जाता है।

• <div> टैग एक गैर-शाब्दिक टैग है।

  जब सार्थक HTML पर ध्यान केंद्रित करते हैं, तो अर्थपूर्ण टैग्स (जैसे <section>, <article>) का उपयोग कर सकते हैं। यह खोज इंजन और स्क्रीन रीडर्स को पृष्ठ की सामग्री को बेहतर ढंग से समझने में मदद करता है।

• CSS और JavaScript के साथ संयोजन करके, आप पृष्ठ के दिखावे और व्यवहार को नियंत्रित कर सकते हैं।

  <div> टैग का उपयोग पृष्ठ पर सामग्री को एक ब्लॉक-स्तरीय तत्व के रूप में समूहित करने के लिए किया जाता है। यह मुख्य रूप से पृष्ठ लेआउट को समायोजित करने, शैली करने और तत्वों को संचालित करने के लिए CSS और जावास्क्रिप्ट के संयोजन में उपयोग किया जाता है।

<p> टैग

1<p>This is a paragraph of text.</p>

• <p> टैग एक तत्व है जिसका उपयोग HTML में एक पैराग्राफ को परिभाषित करने के लिए किया जाता है। <p> एक पैराग्राफ को प्रस्तुत करता है और मुख्य रूप से पाठ को समूहित और प्रदर्शित करने के लिए उपयोग किया जाता है। यह पाठ के खंडों को दृश्य रूप से अलग करके सामग्री को पढ़ने में आसान बनाता है।
• आप <p> टैग के अंदर अन्य ब्लॉक-स्तरीय तत्व जैसे <p> टैग या <div> टैग को नहीं रख सकते। यह HTML विनिर्देशों द्वारा निषिद्ध है। यदि आप ऐसा करते हैं, तो ब्राउज़र स्वचालित रूप से टैग को बंद कर देगा, और यह सही ढंग से प्रदर्शित नहीं होगा।

<a> टैग

1<a href="https://codesparklab.com" title="Code Spark Lab">Go to codesparklab.com</a>

• <a> टैग का उपयोग लिंक बनाने के लिए किया जाता है।

  <a> टैग का उपयोग अन्य पृष्ठों, बाहरी साइटों या फाइलों के लिए लिंक बनाने के लिए किया जाता है। href विशेषता का उपयोग लिंक के गंतव्य को निर्दिष्ट करने के लिए किया जाता है।

• इसे पाठ या छवि लिंक के लिए उपयोग किया जा सकता है, और target="_blank" का उपयोग करने से लिंक एक नए टैब में खुलेगा।

• target विशेषता का उपयोग यह निर्दिष्ट करने के लिए किया जाता है कि लिंक किया गया गंतव्य कैसे प्रदर्शित होगा।

  • _self (डिफ़ॉल्ट): लिंक को वर्तमान विंडो या टैब में खोलता है।
  • _blank: लिंक को एक नई विंडो या टैब में खोलता है।
  • _parent: लिंक को पैरेंट फ्रेम में खोलता है।
  • _top: लिंक को पूरी विंडो में खोलता है, किसी भी फ्रेम की उपेक्षा करता है।

• title विशेषता का उपयोग लिंक पर एक टूलटिप प्रदर्शित करने के लिए किया जाता है। जब कोई उपयोगकर्ता लिंक पर माउस ले जाता है, तो निर्दिष्ट शीर्षक प्रदर्शित होता है।

1<a href="#section1">Go to Section 1</a>
2
3<h2 id="section1">Section 1</h2>
4<p>This is Section 1 content.</p>

• <a> टैग का उपयोग एक ही पृष्ठ के भीतर विशिष्ट स्थानों पर कूदने के लिए भी किया जाता है। यह हासिल करने के लिए, आप लक्षित तत्व पर id विशेषता सेट करते हैं और लिंक के href विशेषता में इस id का उपयोग करते हैं।

<span> टैग

1Here is some <span style="color: red;">highlighted text

• <span> टैग एक इनलाइन तत्व है।

  <span> टैग एक इनलाइन एलिमेंट है, इसलिए जब इसे पाठ, लिंक, चित्र या अन्य इनलाइन एलिमेंट्स के बीच उपयोग किया जाता है तो यह लाइन नहीं तोड़ता है। यह स्वाभाविक रूप से पृष्ठ के प्रवाह में फिट होता है।

• आप विशिष्ट शैलियों को आंशिक रूप से लागू कर सकते हैं।

  जब आप केवल दस्तावेज़ के किसी भाग पर स्टाइल लागू करना चाहते हैं, तो आप <span> टैग का उपयोग करके एक CSS क्लास या ID असाइन कर सकते हैं और एक विशिष्ट श्रेणी पर स्टाइल लागू कर सकते हैं।

• <span> टैग एक गैर-नाममात्र तत्व है।

  क्योंकि <span> टैग का कोई विशिष्ट अर्थ या संरचनात्मक भूमिका नहीं होती है, यह केवल स्टाइलिंग या स्क्रिप्टिंग उद्देश्यों के लिए उपयोग किया जाता है। जब अर्थपूर्ण जोर की आवश्यकता होती है, तो <strong> या <em> जैसे अर्थपूर्ण टैग का उपयोग करना अधिक उपयुक्त होता है, जिनका परिचय बाद में दिया जाएगा।

<br> टैग

1Here is some text with a <br> line break.

• <br> टैग एक इनलाइन तत्व है।

  <br> टैग एक इनलाइन एलिमेंट है, इसलिए यह पूरे ब्लॉक को नहीं लेता है, और यह उस स्थान पर लाइन ब्रेक बनाता है जहाँ इसे रखा जाता है। जहाँ <p> टैग पैराग्राफ को अलग करने के लिए ऊपर और नीचे मार्जिन जोड़ता है, वहीं <br> टैग बिना किसी मार्जिन के लाइन ब्रेक बनाता है।

• यह एक स्वयं बंद हो जाने वाला टैग है, इसलिए बंद करने वाला टैग (</br>) की आवश्यकता नहीं है।

• इसका अधिक उपयोग करने से बचना बेहतर है, और पैराग्राफ ब्रेक या लेआउट समायोजन के लिए <p> टैग या CSS का उपयोग करें।

  टेक्स्ट को पैराग्राफ में व्यवस्थित करने के लिए <p> टैग का उपयोग करना अधिक उपयुक्त है। लेआउट समायोजन के लिए CSS का उपयोग करने की भी सिफारिश की जाती है। उदाहरण के लिए, CSS में white-space प्रॉपर्टी का उपयोग करने से टेक्स्ट में लाइन ब्रेक और खाली स्थान उसी तरह दिखाई दे सकते हैं जैसे वे होते हैं।

<hr> टैग

1This is some text.<hr>This is another section of text.

• <hr> टैग एक ब्लॉक-स्तरीय एलिमेंट है।

  <hr> टैग का उपयोग सामग्री के अनुभागों को दृष्टिगत रूप से अलग करने के लिए एक क्षैतिज रेखा जोड़ने के लिए किया जाता है। इसे विषयगत विराम को चिह्नित करने के लिए भी उपयोग किया जा सकता है, जिससे इसे संदर्भ के आधार पर अर्थ मिलता है।

• यह एक स्व-समापन टैग है, इसलिए समापन टैग (</hr>) की आवश्यकता नहीं होती।

• आप CSS का उपयोग करके इसके रंग, लंबाई और मोटाई को अनुकूलित कर सकते हैं।

अर्थपूर्ण पाठ-संबंधी टैग

<h1> टैग से <h6> टैग तक

1<h1>Main Heading</h1>
2<h2>Subheading</h2>
3<h3>Sub-subheading</h3>

• <h1> से लेकर <h6> टैग्स HTML में उपयोग किए जाने वाले हेडिंग टैग्स हैं।

  <h1> टैग सबसे महत्वपूर्ण हेडिंग का प्रतिनिधित्व करता है और इसे आम तौर पर पूरे पृष्ठ के मुख्य शीर्षक के रूप में उपयोग किया जाता है। प्रत्येक HTML दस्तावेज़ में केवल एक <h1> टैग का उपयोग करना आम है।

  <h2> टैग <h1> के बाद दूसरा सबसे महत्वपूर्ण शीर्षक होता है, और इसे पृष्ठ के भीतर अनुभाग या अध्याय शीर्षकों के लिए उपयोग किया जाता है।

  <h3> टैग <h2> के तहत उपशीर्षक या छोटे अनुभागों का प्रतिनिधित्व करता है।

  <h4>, <h5>, और <h6> टैग्स निम्न स्तर के शीर्षक का प्रतिनिधित्व करते हैं, जो अधिक विस्तृत आइटम या अनुभाग शीर्षकों के लिए उपयोग किए जाते हैं।

• हेडिंग टैग्स पाठ के महत्व को इंगित करते हैं और पृष्ठ की तार्किक संरचना बनाने में मदद करते हैं। सर्च इंजन भी पृष्ठ की सामग्री समझने के लिए हेडिंग टैग्स का उपयोग करते हैं।

<strong> टैग

1<strong>Important text</strong> to emphasize significance.

• <strong> टैग एक HTML टैग है जो पाठ के महत्व या जोर को इंगित करने के लिए उपयोग किया जाता है, और आमतौर पर इसे बोल्ड में दिखाया जाता है।

• <strong> टैग एक अर्थपूर्ण टैग है, और इसका मुख्य उद्देश्य अर्थ जोड़ना है।

  यह संकेत कर सकता है कि पाठ सन्दर्भ के दृष्टिकोण से महत्वपूर्ण है। उदाहरण के लिए, यह सर्च इंजन के लिए पाठ के महत्व को दिखा सकता है, जिससे यह SEO के लिए उपयोगी बनता है। यह स्क्रीन रीडर का उपयोग करने वाले उपयोगकर्ताओं के लिए भी पाठ के महत्व को दर्शाता है। दूसरी ओर, <b> टैग, जिसे बाद में प्रस्तुत किया जाएगा, केवल पाठ को बोल्ड करने के लिए एक टैग है और यह अर्थपूर्ण जोर नहीं देता।

<em> टैग

1<em>Emphasized text</em> for italics and emphasis.

• <em> टैग एक HTML टैग है जो पाठ में महत्व या जोर को इंगित करने के लिए उपयोग किया जाता है, और यह आमतौर पर इटैलिक्स में दिखाया जाता है।

• <em> टैग एक अर्थपूर्ण टैग है, और इसका मुख्य उद्देश्य अर्थ प्रदान करना है।

  <strong> टैग की तरह, यह संकेत कर सकता है कि पाठ सन्दर्भ के दृष्टिकोण से महत्वपूर्ण है। <strong> टैग आमतौर पर बोल्ड में दिखाया जाता है, जबकि <em> टैग आमतौर पर इटैलिक्स में दिखाया जाता है। दोनों को स्क्रीन रीडर और सर्च इंजन द्वारा अर्थपूर्ण जोर के लिए पहचाना जाता है, लेकिन <strong> मजबूत महत्व को इंगित करता है, जबकि <em> भावनात्मक जोर देता है। इसके अतिरिक्त, <i> टैग, जिसे बाद में प्रस्तुत किया जाएगा, केवल पाठ को इटैलिक्स में करता है और यह अर्थपूर्ण जोर नहीं देता।

<mark> टैग

1<mark>Highlighted text</mark> for attention.

• <mark> टैग का उपयोग यह इंगित करने के लिए किया जाता है कि विशेष पाठ सन्दर्भ के दृष्टिकोण से महत्वपूर्ण है। यह खोज परिणामों या मुख्य बिन्दुओं को हाइलाइट करने के लिए उपयोगी है।
• डिफ़ॉल्ट रूप से, <mark> टैग में घिरे पाठ को एक पीले पृष्ठभूमि के साथ प्रदर्शित किया जाता है, जिससे इसके महत्व को दृष्टिगत रूप से जोर दिया जाता है।

<del> टैग

1<del>Deleted text</del> shows removed content.

• <del> टैग का उपयोग यह इंगित करने के लिए किया जाता है कि पाठ हटाया या संशोधित किया गया है। यह टैग पाठ में परिवर्तन या संशोधन के इतिहास को दिखाने के लिए उपयोगी है।

• <del> टैग में संलग्न पाठ आमतौर पर स्ट्राइकथ्रू के साथ दिखाया जाता है। यह दृश्य रूप से हटाई गई सामग्री को इंगित करता है।

  <del> टैग में संलग्न पाठ को स्क्रीन रीडर द्वारा भी हटा हुआ माना जाता है। यह ऐसा कंटेंट समझने में मदद करता है जो दृश्य रूप से स्पष्ट नहीं होता।

<ins> टैग

1<ins>Inserted text</ins> shows added content.

• <ins> टैग का उपयोग दस्तावेज़ में नए जोड़े गए या संशोधित टेक्स्ट को दर्शाने के लिए किया जाता है। यह टैग टेक्स्ट के जोड़ने या संशोधन के इतिहास को दिखाने के लिए उपयोगी है।

• ब्राउज़रों में, <ins> टैग में बंद टेक्स्ट आमतौर पर एक रेखांकित रूप में प्रदर्शित होता है। यह दृश्य रूप से जोड़े गए कंटेंट को दर्शाता है।

  <ins> टैग में बंद टेक्स्ट को स्क्रीन रीडर्स द्वारा नए जोड़े गए के रूप में भी पहचाना जाता है। यह ऐसा कंटेंट समझने में मदद करता है जो दृश्य रूप से स्पष्ट नहीं होता।

<abbr> टैग

1<abbr title="World Health Organization">WHO</abbr>

• <abbr> टैग एक इनलाइन तत्व है जिसका उपयोग संक्षेपाक्षर या उपनाम को दर्शाने के लिए किया जाता है। इस टैग का उपयोग करने से संक्षेपाक्षरों का पूरा अर्थ प्राप्त होता है और SEO और पहुंच में सुधार होता है। यह विशेष रूप से उन पाठकों को मदद करता है जो संक्षेपाक्षर से अपरिचित हैं और स्क्रीन रीडर्स के उपयोगकर्ताओं को इसके कंटेंट को बेहतर समझने में मदद करता है।

पाठ सजावट से संबंधित टैग

<b> टैग

1<b>Bold text</b> without semantic emphasis.

• <b> टैग एक इनलाइन तत्व है जिसका उपयोग टेक्स्ट को बोल्ड करने के लिए किया जाता है। जैसा कि अन्य टैग जिन्हें हम प्रस्तुत करेंगे, इसका उपयोग दृश्य जोर देने के लिए किया जाता है लेकिन अर्थपूर्ण जोर के लिए नहीं।

<i> टैग

1<i>Italic text</i> for style.

• <i> टैग एक इनलाइन तत्व है जिसका उपयोग टेक्स्ट को इटैलिक करने के लिए किया जाता है।

<u> टैग

1<u>Underlined text</u> for decoration.

• <u> टैग एक इनलाइन तत्व है जिसका उपयोग टेक्स्ट को रेखांकित करने के लिए किया जाता है।

<small> टैग

1<small>This is small text.</small>

• <small> टैग एक इनलाइन तत्व है जिसका उपयोग पाठ को छोटे आकार में प्रदर्शित करने के लिए किया जाता है। इसका उपयोग आमतौर पर पूरक जानकारी या मुख्य कंटेंट के द्वितीयक टिप्पणियों को प्रस्तुत करने के लिए किया जाता है।

<s> टैग

1<s>Strikethrough text</s>

• <s> टैग एक इनलाइन तत्व है जिसका उपयोग टेक्स्ट पर एक रेखा खींचने के लिए किया जाता है।

<sub> टैग

1H<sub>2</sub>O

• <sub> टैग एक इनलाइन तत्व है जिसका उपयोग सबस्क्रिप्ट पाठ को प्रदर्शित करने के लिए किया जाता है।

<sup> टैग

1E = mc<sup>2</sup>

• <sup> टैग एक इनलाइन तत्व है जिसका उपयोग सुपर्स्क्रिप्ट पाठ को प्रदर्शित करने के लिए किया जाता है।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video