Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> HTML

HTML टाइटल टैग: चरण-दर-चरण गाइड

HTML `` टैग वेब पेज का शीर्षक परिभाषित करता है। यह शीर्षक आपके ब्राउज़र के टैब बार में और जब आप किसी पेज को बुकमार्क सूची में जोड़ते हैं तब दिखाई देता है। सभी वेब पेजों में `<title>` टैग होना चाहिए।</em></p> <hr class="wp-block-separator"> <p>जब आप एक वेब पेज बना रहे होते हैं, तो आप उस वेब पेज के लिए एक शीर्षक निर्दिष्ट करना चाहेंगे। उदाहरण के लिए, मान लीजिए आप एक स्थानीय बेकरी की वेबसाइट के लिए होम पेज बना रहे हैं। आप बेकरी का नाम वेब पेज के शीर्षक के रूप में दिखाना चाह सकते हैं।</p> <p>यहीं HTML `<title>` टैग काम आता है। `<title>` टैग HTML में दस्तावेज़ का शीर्षक परिभाषित करता है और वेब पेज के हेड सेक्शन के भीतर रखा जाता है। यह ट्यूटोरियल एक उदाहरण के संदर्भ में `<title>` टैग के महत्व और इसे अपने कोड में कैसे उपयोग करें, इस पर चर्चा करेगा।</p> <h2>HTML हेड रिफ्रेशर</h2> <p>HTML में, `<head>` एलिमेंट का उपयोग हेडिंग एलिमेंट को संग्रहीत करने के लिए किया जाता है। ये एलिमेंट वेब पेज के बारे में अतिरिक्त जानकारी प्रदान करते हैं, जैसे कि वेब पेज के लिए कौन सा आइकन दिखाई देना चाहिए।</p> <p>एक साथ, `<head>` सेक्शन में एलिमेंट दस्तावेज़ के बारे में मुख्य जानकारी का वर्णन करते हैं। वे ब्राउज़र को दस्तावेज़ में उपयोग की जाने वाली स्टाइलशीट और स्क्रिप्ट की ओर इंगित कर सकते हैं (यदि कोई उपयोग की जाती है)।</p> <h2>HTML `<title>`</h2> <p>HTML `<title>` टैग दस्तावेज़ का शीर्षक परिभाषित करता है। यह टैग `<head>` टैग के भीतर दिखाई देता है। इस टैग को वेब पेज के उद्देश्य को संक्षेप में प्रस्तुत करना चाहिए। आपको प्रति पेज केवल एक `<title>` टैग निर्दिष्ट करने की आवश्यकता है।</p> <p>आइए इस टैग के सिंटैक्स को देखें:</p> <pre><head> <title>Home | Career Karma</title> </head></pre> <p>`<title>` टैग में ओपनिंग और क्लोजिंग टैग दोनों होते हैं। इन टैग के बीच, हमने एक वेब पेज के लिए शीर्षक लिखा है।</p> <p>हमारे `<title>` टैग में टेक्स्ट वेब पेज पर दिखाई नहीं देता। ऐसा इसलिए है क्योंकि हमारा `<title>` टैग हमारे वेब पेज पर `<body>` टैग के बजाय `<head>` में संलग्न है।</p> <p>हमारा उपरोक्त शीर्षक मजबूत है क्योंकि यह उपयोगकर्ता को सटीक रूप से बताता है कि वे कौन सा पेज देख रहे हैं। हमने साइट का नाम भी निर्दिष्ट किया है जो भ्रम को रोकता है यदि उपयोगकर्ता के पास "Home" शीर्षक वाले कई टैब खुले हैं।</p> <p>आपका शीर्षक स्पष्ट, पढ़ने में आसान और बहुत लंबा नहीं होना चाहिए। निम्नलिखित शीर्षकों के उदाहरणों पर विचार करें:</p> <ul><li>ब्लॉग – Career Karma</li><li>Career Karma से संपर्क करें</li><li>Career Karma ब्लॉग</li></ul> <p>ये सभी शीर्षक पेज के उद्देश्य को व्यक्त करते हैं। आपका शीर्षक बहुत लंबा नहीं होना चाहिए क्योंकि टैब बार में शीर्षकों के लिए सीमित स्थान होता है।</p> <p>`<title>` टैग HTML5 में सभी ग्लोबल एट्रिब्यूट का समर्थन करता है। यह टैग सभी प्रमुख आधुनिक ब्राउज़रों द्वारा समर्थित है। टाइटल टैग का कोई एलिमेंट-विशिष्ट HTML एट्रिब्यूट नहीं है।</p> <h2>HTML टाइटल टैग उदाहरण</h2> <p>HTML टाइटल एलिमेंट HTML पेज पर `<head>` टैग के भीतर परिभाषित किया जाता है। मान लीजिए हम अपनी स्थानीय बेकरी, Joseph Abrams & Sons के लिए एक वेब पेज बना रहे हैं। हम वर्तमान में होम पेज बना रहे हैं, और हम बेकरी का नाम साइट के शीर्षक में दिखाना चाहते हैं।</p> <p>हम अपने पेज का शीर्षक "Joseph Abrams & Sons." पर सेट करने के लिए निम्न कोड का उपयोग कर सकते हैं:</p> <pre><head> <title>Joseph Abrams & Sons.</title> </head></pre> <p>जब हमारी साइट का वेब पेज खोला जाता है, तो पेज का शीर्षक "Joseph Abrams & Sons" पर सेट हो जाता है।</p> <p>अब, मान लीजिए हम पहले की बेकरी के लिए एक संपर्क पेज बना रहे हैं। हम "Contact | Joseph Abrams & Sons" शीर्षक का उपयोग करना चाह सकते हैं। यह शीर्षक सरल है और हमारे वेब पेज के उद्देश्य का अच्छी तरह से वर्णन करता है।</p> <h2>आपको `<title>` टैग का उपयोग क्यों करना चाहिए?</h2> <p>दस्तावेज़ शीर्षक टैग निर्दिष्ट करना महत्वपूर्ण क्यों है, इसके कई कारण हैं।</p> <p>पहला, `<title>` टैग वेब ब्राउज़र के टाइटल बार में पेज शीर्षक प्रदर्शित करता है। उदाहरण के लिए, इस पेज का शीर्षक "HTML Title Tag: A How-To Guide | Career Karma" है। यह इस साइट के टैब के नाम में दिखाई देता है।</p> <p>दूसरा, `<title>` टैग वेब पेज को लेबल करता है जब इसे उपयोगकर्ता के वेब ब्राउज़र में बुकमार्क या पसंदीदा के रूप में सहेजा जाता है। आपके द्वारा निर्दिष्ट शीर्षक वही होगा जो स्वचालित रूप से सहेजा जाएगा। यदि आप किसी वेब पेज के लिए उपयुक्त शीर्षक का उपयोग नहीं करते हैं, तो उपयोगकर्ता को अपने बुकमार्क में आपका पेज ढूंढना मुश्किल हो सकता है।</p> <p>सर्च इंजन शीर्षक टैग की सामग्री पर निर्भर करते हैं। शीर्षक टैग में निर्दिष्ट शीर्षक सर्च इंजन रिजल्ट पेज (SERP) पर वेब पेज की हेडलाइन होगी। SERP सर्च रिजल्ट पेज पर एक प्रविष्टि है।</p> <p>इसके अलावा, `<title>` टैग की सामग्री का उपयोग सर्च इंजन द्वारा वेब पेज के विषय को निर्धारित करने के लिए किया जाता है।</p> <p>तो, अब हम जानते हैं कि `<title>` टैग महत्वपूर्ण हैं, आप पूछ रहे होंगे: HTML टाइटल टैग का उपयोग कैसे करें? आइए उस प्रश्न का उत्तर दें।</p> <h2>निष्कर्ष</h2> <p>`<title>` टैग HTML दस्तावेज़ का शीर्षक बताता है। यह शीर्षक वेब ब्राउज़र के टैब नामों में दिखाई देता है। इसका उपयोग सर्च इंजन द्वारा वेब पेज को प्रोसेस करते समय उसकी हेडलाइन और विषय तय करने के लिए भी किया जाता है।</p> <p>इस ट्यूटोरियल ने एक उदाहरण के संदर्भ में HTML `<title>` टैग की मूल बातें चर्चा की। अब आप टाइटल टैग का उपयोग HTML विशेषज्ञ की तरह करने के लिए तैयार हैं!</p> <p>क्या आप HTML में कोडिंग के बारे में अधिक जानना चाहते हैं? हमारा HTML सीखने का गाइड देखें। इस गाइड में शुरुआती और मध्यवर्ती डेवलपर्स के लिए शीर्ष सीखने के संसाधनों और पाठ्यक्रमों की सूची शामिल है। आपको HTML विषय पर पढ़ने के लिए शीर्ष पुस्तकें भी मिलेंगी।</p> </article> <div class="ad5"> <script language='javascript' src='/ad/w.js'></script> </div> <div id="turn-page" class="f-between"> <div class="page up f-align"> <i class="prev"></i> <a class='LinkPrevArticle' href='https://in.wsxdn.com/zx054r/zw551r/1005038919.html' >HTML सेलेक्ट टैग: एक पूर्ण गाइड</a> <span></span> </div> <div class="page down f-align"> <a class='LinkNextArticle' href='https://in.wsxdn.com/zx054r/zw551r/1005038921.html' >HTML में नई लाइन: `<br>` और `<pre>` टैग का उपयोग</a> <i class="next"></i> <span></span> </div> </div> </div> <aside class="box-r"> <section class="small-nav rList"> <p class=h4s> HTML </p> <ul class="f-between"> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/us544m/' target="_self">सी प्रोग्रामिंग</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/lj545d/' target="_self">C++</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/kh546c/' target="_self">Redis</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/om547h/' target="_self">Bash प्रोग्रामिंग</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/ca548u/' target="_self">Python</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/nl549f/' target="_self">Java</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/sp550k/' target="_self">डेटाबेस</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/zw551r/' target="_self">HTML</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/ec552w/' target="_self">JavaScript</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/lj553d/' target="_self">प्रोग्रामिंग</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/tr554l/' target="_self">CSS</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/hf555z/' target="_self">Ruby</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/fd556x/' target="_self">SQL</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/wu557p/' target="_self">iOS</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/bz558t/' target="_self">Android</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/pn559h/' target="_self">MongoDB</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/ay560s/' target="_self">MySQL</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/fc561x/' target="_self">C#</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/cz565u/' target="_self">PHP</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/nl571f/' target="_self">SQL Server</a></li> </ul> <strong class="f-center"> <img loading='lazy' src="https://in.wsxdn.com/css/img/xiala.svg" alt=""> </strong> </section> <aside class="rList"> <p class=h4s> HTML </p> <ul> <li> <a href="https://in.wsxdn.com/zx054r/zw551r/1005038891.html" class="t-over" title="HTML एट्रिब्यूट्स के लिए चरण-दर-चरण गाइड">HTML एट्रिब्यूट्स के लिए चरण-दर-चरण गाइड</a> </li> <li> <a href="https://in.wsxdn.com/zx054r/zw551r/1005038893.html" class="t-over" title="HTML में वीडियो एम्बेड करना: चरण-दर-चरण मार्गदर्शिका">HTML में वीडियो एम्बेड करना: चरण-दर-चरण मार्गदर्शिका</a> </li> <li> <a href="https://in.wsxdn.com/zx054r/zw551r/1005038894.html" class="t-over" title="HTML लिस्ट्स: चरण-दर-चरण मार्गदर्शिका">HTML लिस्ट्स: चरण-दर-चरण मार्गदर्शिका</a> </li> <li> <a href="https://in.wsxdn.com/zx054r/zw551r/1005038895.html" class="t-over" title="HTML टेबल: चरण-दर-चरण मार्गदर्शिका">HTML टेबल: चरण-दर-चरण मार्गदर्शिका</a> </li> <li> <a href="https://in.wsxdn.com/zx054r/zw551r/1005038897.html" class="t-over" title="HTML बटन: चरण-दर-चरण मार्गदर्शिका">HTML बटन: चरण-दर-चरण मार्गदर्शिका</a> </li> <li> <a href="https://in.wsxdn.com/zx054r/zw551r/1005038898.html" class="t-over" title="HTML टेक्स्टएरिया: चरण-दर-चरण मार्गदर्शिका">HTML टेक्स्टएरिया: चरण-दर-चरण मार्गदर्शिका</a> </li> <li> <a href="https://in.wsxdn.com/zx054r/zw551r/1005038919.html" class="t-over" title="HTML सेलेक्ट टैग: एक पूर्ण गाइड">HTML सेलेक्ट टैग: एक पूर्ण गाइड</a> </li> <li> <a href="https://in.wsxdn.com/zx054r/zw551r/1005038924.html" class="t-over" title="HTML इमेज: चरण-दर-चरण गाइड">HTML इमेज: चरण-दर-चरण गाइड</a> </li> <li> <a href="https://in.wsxdn.com/zx054r/zw551r/1005038925.html" class="t-over" title="HTML स्पैन टैग: शुरुआती लोगों के लिए गाइड">HTML स्पैन टैग: शुरुआती लोगों के लिए गाइड</a> </li> <li> <a href="https://in.wsxdn.com/zx054r/zw551r/1005038927.html" class="t-over" title="HTML इनपुट: चरण-दर-चरण गाइड">HTML इनपुट: चरण-दर-चरण गाइड</a> </li> <li> <a href="https://in.wsxdn.com/zx054r/zw551r/1005038929.html" class="t-over" title="HTML iframe: चरण-दर-चरण गाइड">HTML iframe: चरण-दर-चरण गाइड</a> </li> <li> <a href="https://in.wsxdn.com/zx054r/zw551r/1005054553.html" class="t-over" title="HTML <title> एलिमेंट का उपयोग कैसे करें">HTML <title> एलिमेंट का उपयोग कैसे करें</a> </li> <li> <a href="https://in.wsxdn.com/zx054r/zw551r/1005063717.html" class="t-over" title="HTML पेज में head टैग का उपयोग क्यों करते हैं?">HTML पेज में head टैग का उपयोग क्यों करते हैं?</a> </li> </ul> </aside> </aside> </div> <div class="container box4-2"> <div class="lanmu-list f-between"> <div class="lanmu"> <ol> <li> <div class="img-block"> <a href="https://in.wsxdn.com/zx054r/zw551r/1005064313.html" class="i-box"> <img src='/article/uploadfiles/202203/2022033116074962_S.jpg' loading='lazy' width='300' height='210' alt='HTML <q> टैग' border='0'> </a> <span> <a href="https://in.wsxdn.com/zx054r/zw551r/1005064313.html" class="r-over r-over-2" title="HTML <q> टैग"> HTML <q> टैग </a> <p> HTML <q> टैग क्या है? HTML में <q> टैग का उपयोग एक छोटे उद्धरण (short quotation) को निर्दिष्ट करने के लिए किया जाता है। <q> टैग के अंदर सेट टेक्स्ट के चारों ओर स्वचालित रूप से उद्धरण चिह्न (quotation marks) डाले जाते हैं। एट्रिब्यूट cite: उद्धरण के स्रोत URL को सेट करता है। उद </p> </span> </div> </li> </ol> </div> <div class="lanmu"> <ol> <li> <div class="img-block"> <a href="https://in.wsxdn.com/zx054r/zw551r/1005064347.html" class="i-box"> <img src='/article/uploadfiles/202203/2022033116083380_S.jpg' loading='lazy' width='300' height='210' alt='HTML <b> टैग' border='0'> </a> <span> <a href="https://in.wsxdn.com/zx054r/zw551r/1005064347.html" class="r-over r-over-2" title="HTML <b> टैग"> HTML <b> टैग </a> <p> HTML में b टैग बोल्ड टेक्स्ट सेट करने के लिए उपयोग किया जाता है। HTML5 विनिर्देश के अनुसार, महत्वपूर्ण टेक्स्ट के लिए <strong> टैग का उपयोग करें।आइए अब HTML में b टैग को लागू करने का एक उदाहरण देखें −उदाहरण<!DOCTYPE html> <html> <body> <h2>संदर्भ लिंक्स</h2> </p> </span> </div> </li> </ol> </div> <div class="lanmu"> <ol> <li> <div class="img-block"> <a href="https://in.wsxdn.com/zx054r/zw551r/1005064399.html" class="i-box"> <img src='/article/uploadfiles/202203/2022033116093174_S.jpg' loading='lazy' width='300' height='210' alt='HTML <dl> टैग: विवरण सूची परिभाषित करना' border='0'> </a> <span> <a href="https://in.wsxdn.com/zx054r/zw551r/1005064399.html" class="r-over r-over-2" title="HTML <dl> टैग: विवरण सूची परिभाषित करना"> HTML <dl> टैग: विवरण सूची परिभाषित करना </a> <p> HTML <dl> टैग <dl> एलिमेंट (डिस्क्रिप्शन लिस्ट / विवरण सूची) शब्द-परिभाषा जोड़े (term-description pairs) का एक समूह दर्शाता है। HTML5 में यह विवरण सूची है, HTML4 में परिभाषा सूची (definition list) कहलाता था। संबंधित टैग्स <dt> (डेफिनिशन टर्म) - शब्द/नाम <dd> (डेफिनिशन ड </p> </span> </div> </li> </ol> </div> </div> </div> <footer> <section class="container f-between f-align"> <a href="https://in.wsxdn.com" class="logo"> <img loading='lazy' src="https://in.wsxdn.com/css/img/logo.svg" alt="कंप्यूटर"> </a> <span class="f-end"> © कॉपीराइट <a href="https://in.wsxdn.com">https://in.wsxdn.com</a> सर्वाधिकार सुरक्षित </span> </section> </footer> </body> </html>