HTML

DOCTYPE क्या करता है?

DOCTYPE दस्तावेज़ प्रकार का संक्षिप्त रूप है। DOCTYPE हमेशा एक DTD - दस्तावेज़ प्रकार परिभाषा से जुड़ा होता है।

एक DTD परिभाषित करता है कि एक निश्चित प्रकार के दस्तावेज़ों को कैसे संरचित किया जाना चाहिए (यानी एक बटन में स्पैन हो सकता है लेकिन दिव नहीं), जबकि एक DOCTYPE यह घोषणा करता है कि एक दस्तावेज़ किस DTD का सम्मान करता है (यानी यह दस्तावेज़ HTML DTD का सम्मान करता है)।

वेबपेजों के लिए, DOCTYPE घोषणा आवश्यक है। इसका उपयोग उपयोगकर्ता एजेंटों को यह बताने के लिए किया जाता है कि आपका दस्तावेज़ HTML विनिर्देशों के किस संस्करण का सम्मान करता है। एक बार जब कोई उपयोगकर्ता एजेंट एक सही DOCTYPE को पहचान लेता है, तो वह दस्तावेज़ को पढ़ने के लिए इस DOCTYPE से मेल खाने वाले नो-क्विर्क्स मोड को ट्रिगर करेगा। यदि कोई उपयोगकर्ता एजेंट एक सही DOCTYPE को नहीं पहचानता है, तो वह क्विर्क्स मोड को ट्रिगर करेगा।

HTML5 मानकों के लिए DOCTYPE घोषणा <!DOCTYPE html> है।

आप एकाधिक भाषाओं में सामग्री वाले पृष्ठ को कैसे प्रस्तुत करते हैं?

मैं यह मान लूंगा कि यह सबसे सामान्य मामले के बारे में पूछ रहा है, जो यह है कि कई भाषाओं में उपलब्ध सामग्री वाले पृष्ठ को कैसे प्रस्तुत किया जाए, लेकिन पृष्ठ के भीतर की सामग्री को केवल एक सुसंगत भाषा में प्रदर्शित किया जाना चाहिए।

जब सर्वर पर एक HTTP अनुरोध किया जाता है, तो अनुरोध करने वाला उपयोगकर्ता एजेंट आमतौर पर भाषा वरीयताओं के बारे में जानकारी भेजता है, जैसे Accept-Language हेडर में। यदि ऐसा कोई विकल्प उपलब्ध है तो सर्वर दस्तावेज़ के एक संस्करण को उपयुक्त भाषा में वापस करने के लिए इस जानकारी का उपयोग कर सकता है। वापस किए गए HTML दस्तावेज़ में <html> टैग में lang विशेषता भी घोषित होनी चाहिए, जैसे <html lang="en">...</html>

बेशक यह एक खोज इंजन को यह बताने के लिए बेकार है कि वही सामग्री विभिन्न भाषाओं में उपलब्ध है, और इसलिए आपको <head> में hreflang विशेषता का भी उपयोग करना चाहिए। उदाहरण के लिए <link rel="alternate" hreflang="de" href="http://de.example.com/page.html" />

बैक एंड में, HTML मार्कअप में i18n प्लेसहोल्डर और YML या JSON प्रारूपों में संग्रहीत विशिष्ट भाषा के लिए सामग्री होगी। सर्वर तब उस विशेष भाषा में सामग्री के साथ HTML पृष्ठ को गतिशील रूप से उत्पन्न करता है, आमतौर पर एक बैक एंड फ्रेमवर्क की मदद से।

बहुभाषी साइटों के लिए डिज़ाइन या विकास करते समय आपको किन बातों का ध्यान रखना चाहिए?

  • अपने HTML में lang विशेषता का उपयोग करें।
  • उपयोगकर्ताओं को उनकी मूल भाषा में निर्देशित करना - उपयोगकर्ता को बिना किसी परेशानी के आसानी से अपना देश/भाषा बदलने की अनुमति दें।
  • रास्टर-आधारित छवियों (जैसे png, gif, jpg, आदि) में टेक्स्ट, एक स्केलेबल दृष्टिकोण नहीं है - किसी भी कंप्यूटर पर अच्छी दिखने वाली, गैर-सिस्टम फ़ॉन्ट प्रदर्शित करने के लिए छवि में टेक्स्ट डालना अभी भी एक लोकप्रिय तरीका है। हालांकि, छवि टेक्स्ट का अनुवाद करने के लिए, टेक्स्ट की प्रत्येक स्ट्रिंग को प्रत्येक भाषा के लिए एक अलग छवि बनाने की आवश्यकता होगी। इस तरह के कुछ प्रतिस्थापनों से अधिक कुछ भी जल्दी से नियंत्रण से बाहर हो सकता है।
  • प्रतिबंधात्मक शब्द/वाक्य की लंबाई - कुछ सामग्री दूसरी भाषा में लिखे जाने पर लंबी हो सकती है। डिज़ाइन में लेआउट या ओवरफ़्लो समस्याओं से सावधान रहें। ऐसी जगह डिज़ाइन करने से बचना सबसे अच्छा है जहाँ टेक्स्ट की मात्रा डिज़ाइन को बना या बिगाड़ सकती है। कैरेक्टर काउंट हेडलाइन्स, लेबल और बटन जैसी चीजों के साथ आते हैं। वे बॉडी टेक्स्ट या टिप्पणियों जैसे मुक्त-प्रवाह वाले टेक्स्ट के साथ कम समस्याग्रस्त होते हैं।
  • ध्यान रखें कि रंगों को कैसे देखा जाता है - रंगों को भाषाओं और संस्कृतियों में अलग-अलग तरह से देखा जाता है। डिज़ाइन में रंग का उचित उपयोग करना चाहिए।
  • दिनांक और मुद्राओं को स्वरूपित करना - कैलेंडर दिनांक कभी-कभी अलग-अलग तरीकों से प्रस्तुत किए जाते हैं। उदाहरण के लिए, यू.एस. में "मई 31, 2012" बनाम यूरोप के कुछ हिस्सों में "31 मई 2012"।
  • अनुवादित स्ट्रिंग्स को संयोजित न करें - "आज की तारीख है " + दिनांक जैसा कुछ भी न करें। यह अलग-अलग शब्द क्रम वाली भाषाओं में टूट जाएगा। इसके बजाय प्रत्येक भाषा के लिए पैरामीटर प्रतिस्थापन के साथ एक टेम्पलेट स्ट्रिंग का उपयोग करें। उदाहरण के लिए, अंग्रेजी और चीनी में निम्नलिखित दो वाक्यों को देखें: मैं {% date %} पर यात्रा करूंगा और {% date %} मैं प्रस्थान करूंगा। ध्यान दें कि भाषा के व्याकरण नियमों के कारण चर की स्थिति भिन्न है।
  • भाषा पढ़ने की दिशा - अंग्रेजी में, हम बाएं से दाएं, ऊपर से नीचे पढ़ते हैं, पारंपरिक जापानी में, टेक्स्ट ऊपर से नीचे, दाएं से बाएं पढ़ा जाता है।
  • उपयोगी-से-होना - पथ में लोकेल शामिल करें (जैसे en_US, zh_CN, आदि)।

`data-` विशेषताओं के लिए क्या अच्छा है?

जावास्क्रिप्ट फ्रेमवर्क के लोकप्रिय होने से पहले, फ्रंट एंड डेवलपर्स DOM के भीतर अतिरिक्त डेटा को स्टोर करने के लिए data- विशेषताओं का उपयोग करते थे, बिना अन्य हैक्स जैसे गैर-मानक विशेषताओं, DOM पर अतिरिक्त गुणों के बिना। इसका उद्देश्य पृष्ठ या एप्लिकेशन के लिए निजी कस्टम डेटा को स्टोर करना है, जिसके लिए कोई अधिक उपयुक्त विशेषता या तत्व नहीं हैं।

इन दिनों, data- विशेषताओं का उपयोग आम तौर पर प्रोत्साहित नहीं किया जाता है। एक कारण यह है कि उपयोगकर्ता ब्राउज़र में inspect element का उपयोग करके डेटा विशेषता को आसानी से संशोधित कर सकते हैं। डेटा मॉडल को जावास्क्रिप्ट के भीतर ही बेहतर ढंग से संग्रहीत किया जाता है और डेटा बाइंडिंग के माध्यम से DOM के साथ अपडेट किया जाता है, संभवतः एक लाइब्रेरी या एक फ्रेमवर्क के माध्यम से।

हालांकि, डेटा विशेषताओं का एक पूरी तरह से वैध उपयोग, सेलेनिम और कैपिबारा जैसे एंड टू एंड परीक्षण फ्रेमवर्क के लिए एक हुक जोड़ना है, बिना किसी अर्थहीन कक्षाओं या आईडी विशेषताओं को बनाए। तत्व को एक विशेष सेलेनिम स्पेक द्वारा पाए जाने का एक तरीका चाहिए और data-selector='the-thing' जैसा कुछ ऐसा करने का एक वैध तरीका है, बिना सिमेंटिक मार्कअप को अन्यथा जटिल किए।

HTML5 को एक खुले वेब प्लेटफॉर्म के रूप में मानें। HTML5 के बिल्डिंग ब्लॉक क्या हैं?

  • सिमेंटिक्स - आपको अपनी सामग्री का अधिक सटीक वर्णन करने की अनुमति देता है।
  • कनेक्टिविटी - आपको नए और अभिनव तरीकों से सर्वर के साथ संवाद करने की अनुमति देता है।
  • ऑफलाइन और स्टोरेज - वेबपेजों को क्लाइंट-साइड पर स्थानीय रूप से डेटा स्टोर करने और ऑफ़लाइन अधिक कुशलता से संचालित करने की अनुमति देता है।
  • मल्टीमीडिया - ओपन वेब में वीडियो और ऑडियो को फर्स्ट-क्लास नागरिक बनाना।
  • 2डी/3डी ग्राफिक्स और प्रभाव - प्रस्तुति विकल्पों की एक बहुत अधिक विविध श्रेणी की अनुमति देता है।
  • प्रदर्शन और एकीकरण - अधिक गति अनुकूलन और कंप्यूटर हार्डवेयर का बेहतर उपयोग प्रदान करना।
  • डिवाइस एक्सेस - विभिन्न इनपुट और आउटपुट उपकरणों के उपयोग की अनुमति देना।
  • स्टाइलिंग - लेखकों को अधिक परिष्कृत थीम लिखने देना।

एक `कुकी`, `सेशन स्टोरेज` और `स्थानीय स्टोरेज` के बीच अंतर का वर्णन करें।

उपरोक्त सभी वर्णित प्रौद्योगिकियां क्लाइंट साइड पर कुंजी-मूल्य भंडारण तंत्र हैं। वे केवल स्ट्रिंग के रूप में मानों को स्टोर करने में सक्षम हैं।

| | कुकी | स्थानीय स्टोरेज | सेशन स्टोरेज | | --- | --- | --- | --- | | आरंभकर्ता | क्लाइंट या सर्वर। सर्वर Set-Cookie हेडर का उपयोग कर सकता है | क्लाइंट | क्लाइंट | | समाप्ति | मैन्युअल रूप से सेट करें | हमेशा के लिए | टैब बंद होने पर | | ब्राउज़र सत्रों में लगातार | समाप्ति निर्धारित है या नहीं, इस पर निर्भर करता है | हाँ | नहीं | | हर HTTP अनुरोध के साथ सर्वर को भेजा गया | कुकीज़ स्वचालित रूप से कुकी हेडर के माध्यम से भेजी जा रही हैं | नहीं | नहीं | | क्षमता (प्रति डोमेन) | 4kb | 5MB | 5MB | | पहुंच | कोई भी विंडो | कोई भी विंडो | एक ही टैब |

नोट: यदि उपयोगकर्ता ब्राउज़र द्वारा प्रदान किए गए किसी भी तंत्र के माध्यम से ब्राउज़ डेटा को साफ़ करने का निर्णय लेता है, तो यह संग्रहीत किसी भी कुकी, स्थानीय स्टोरेज, या सेशन स्टोरेज को साफ़ कर देगा। स्थानीय पर्सिस्टेंस के लिए डिज़ाइन करते समय इसे ध्यान में रखना महत्वपूर्ण है, खासकर जब डेटाबेस या समान (जो निश्चित रूप से उपयोगकर्ता कार्यों के बावजूद बना रहेगा) में सर्वर साइड स्टोरिंग जैसे विकल्पों की तुलना करते हैं।

`<script>`, `<script async>` और `<script defer>` के बीच अंतर का वर्णन करें।

  • <script> - HTML पार्सिंग अवरुद्ध है, स्क्रिप्ट को तुरंत प्राप्त और निष्पादित किया जाता है, स्क्रिप्ट निष्पादित होने के बाद HTML पार्सिंग फिर से शुरू होती है।
  • <script async> - स्क्रिप्ट को HTML पार्सिंग के समानांतर प्राप्त किया जाएगा और उपलब्ध होते ही निष्पादित किया जाएगा (संभावित रूप से HTML पार्सिंग पूरी होने से पहले)। जब स्क्रिप्ट पृष्ठ पर किसी अन्य स्क्रिप्ट से स्वतंत्र हो, उदाहरण के लिए, विश्लेषण, तो async का उपयोग करें।
  • <script defer> - स्क्रिप्ट को HTML पार्सिंग के समानांतर प्राप्त किया जाएगा और पृष्ठ के पार्सिंग समाप्त होने पर निष्पादित किया जाएगा। यदि उनमें से कई हैं, तो प्रत्येक स्थगित स्क्रिप्ट को दस्तावेज़ में उनके सामने आने वाले क्रम में निष्पादित किया जाता है। यदि कोई स्क्रिप्ट पूरी तरह से पार्स किए गए DOM पर निर्भर करती है, तो defer विशेषता यह सुनिश्चित करने में उपयोगी होगी कि HTML को निष्पादित करने से पहले पूरी तरह से पार्स किया जाए। एक स्थगित स्क्रिप्ट में document.write नहीं होना चाहिए।

नोट: async और defer विशेषताएँ उन स्क्रिप्टों के लिए अनदेखा की जाती हैं जिनमें कोई src विशेषता नहीं होती है।

CSS `<link>`s को `<head></head>` के बीच और JS `<script>`s को `</body>` से ठीक पहले रखना आम तौर पर एक अच्छा विचार क्यों है? क्या आप कोई अपवाद जानते हैं?

<head> में <link>s डालना

<head> में <link>s डालना एक अनुकूलित वेबसाइट बनाने में उचित विनिर्देश का हिस्सा है। जब एक पृष्ठ पहली बार लोड होता है, तो HTML और CSS को एक साथ पार्स किया जा रहा होता है; HTML DOM (दस्तावेज़ ऑब्जेक्ट मॉडल) बनाता है और CSS CSSOM (CSS ऑब्जेक्ट मॉडल) बनाता है। दोनों एक वेबसाइट में दृश्यों को बनाने के लिए आवश्यक हैं, जिससे एक त्वरित "पहला सार्थक पेंट" समय मिलता है। यह प्रगतिशील रेंडरिंग एक श्रेणी अनुकूलन साइटें हैं जिन्हें उनके प्रदर्शन स्कोर में मापा जाता है। स्टाइलशीट को दस्तावेज़ के निचले भाग के पास रखना वह है जो कई ब्राउज़रों में प्रगतिशील रेंडरिंग को रोकता है। कुछ ब्राउज़र पृष्ठ के तत्वों को फिर से पेंट करने से बचने के लिए रेंडरिंग को अवरुद्ध करते हैं यदि उनकी शैलियाँ बदल जाती हैं। उपयोगकर्ता तब एक खाली सफेद पृष्ठ देखने के लिए फंस जाता है। अन्य समय में अनस्टाइल की गई सामग्री (FOUC) के फ्लैश हो सकते हैं, जो बिना स्टाइल लागू किए एक वेबपेज दिखाते हैं।

<script>s को </body> से ठीक पहले रखना

<script> टैग HTML पार्सिंग को अवरुद्ध करते हैं जबकि उन्हें डाउनलोड और निष्पादित किया जा रहा है जो आपके पृष्ठ को धीमा कर सकता है। स्क्रिप्ट को नीचे रखने से HTML को पार्स किया जा सकता है और उपयोगकर्ता को पहले प्रदर्शित किया जा सकता है।

<script>s को नीचे रखने का एक अपवाद तब होता है जब आपकी स्क्रिप्ट में document.write() होता है, लेकिन आजकल document.write() का उपयोग करना एक अच्छा अभ्यास नहीं है। साथ ही, <script>s को नीचे रखने का मतलब है कि ब्राउज़र स्क्रिप्ट को तब तक डाउनलोड करना शुरू नहीं कर सकता जब तक कि पूरा दस्तावेज़ पार्स न हो जाए। यह सुनिश्चित करता है कि आपका कोड जिसे DOM तत्वों में हेरफेर करने की आवश्यकता है, वह त्रुटि नहीं फेंकेगा और पूरी स्क्रिप्ट को रोक देगा। यदि आपको <head> में <script>s डालने की आवश्यकता है, तो defer विशेषता का उपयोग करें, जो HTML पार्स होने के बाद ही स्क्रिप्ट चलाने का समान प्रभाव प्राप्त करेगा लेकिन ब्राउज़र स्क्रिप्ट को पहले डाउनलोड कर सकता है।

ध्यान रखें कि क्लोजिंग </body> टैग से ठीक पहले स्क्रिप्ट डालने से यह भ्रम पैदा होगा कि एक खाली कैश पर पृष्ठ तेजी से लोड होता है (चूंकि स्क्रिप्ट दस्तावेज़ के बाकी हिस्सों को डाउनलोड करने में बाधा नहीं डालेगी)। हालांकि, यदि आपके पास कुछ कोड है जिसे आप पृष्ठ लोड के दौरान चलाना चाहते हैं, तो यह पूरे पृष्ठ के लोड होने के बाद ही निष्पादित होना शुरू होगा। यदि आप उन स्क्रिप्टों को <head> टैग में डालते हैं, तो वे पहले निष्पादित होना शुरू हो जाएंगे - तो एक प्राइम कैश पर पृष्ठ वास्तव में तेजी से लोड होता हुआ दिखाई देगा।

<head> और <body> टैग अब वैकल्पिक हैं

HTML5 विनिर्देश के अनुसार, <head> और <body> जैसे कुछ HTML टैग वैकल्पिक हैं। Google की शैली मार्गदर्शिका भी बाइट्स को बचाने के लिए उन्हें हटाने की सिफारिश करती है। हालांकि, यह अभ्यास अभी भी व्यापक रूप से अपनाया नहीं गया है और प्रदर्शन लाभ न्यूनतम होने की संभावना है और अधिकांश साइटों के लिए यह शायद ही मायने रखेगा।

प्रगतिशील रेंडरिंग क्या है?

प्रगतिशील रेंडरिंग वेबपेज के प्रदर्शन को बेहतर बनाने (विशेष रूप से, कथित लोड समय में सुधार) के लिए उपयोग की जाने वाली तकनीकों का नाम है ताकि सामग्री को जल्द से जल्द प्रदर्शित किया जा सके।

यह ब्रॉडबैंड इंटरनेट से पहले के दिनों में कहीं अधिक प्रचलित था, लेकिन यह अभी भी आधुनिक विकास में उपयोग किया जाता है क्योंकि मोबाइल डेटा कनेक्शन तेजी से लोकप्रिय (और अविश्वसनीय) होते जा रहे हैं!

ऐसी तकनीकों के उदाहरण:

  • छवियों का लेज़ी लोडिंग - पृष्ठ पर छवियां एक साथ लोड नहीं होती हैं। जब उपयोगकर्ता पृष्ठ के उस हिस्से में स्क्रॉल करता है जो छवि प्रदर्शित करता है, तो जावास्क्रिप्ट का उपयोग एक छवि लोड करने के लिए किया जाएगा।
  • दृश्यमान सामग्री को प्राथमिकता देना (या ऊपर-द-फोल्ड रेंडरिंग) - पृष्ठ की न्यूनतम CSS/सामग्री/स्क्रिप्ट को शामिल करें जो उपयोगकर्ता के ब्राउज़र में जल्द से जल्द प्रदर्शित होने के लिए प्रस्तुत की जाएगी, फिर आप अन्य संसाधनों और सामग्री को लोड करने के लिए स्थगित स्क्रिप्ट का उपयोग कर सकते हैं या DOMContentLoaded/load इवेंट को सुन सकते हैं।
  • एसिंक HTML खंड - बैक एंड पर पृष्ठ के निर्माण के दौरान HTML के कुछ हिस्सों को ब्राउज़र में फ्लश करना। तकनीक पर अधिक विवरण पाया जा सकता है।

आप एक छवि टैग में `srcset` विशेषता का उपयोग क्यों करेंगे? ब्राउज़र इस विशेषता की सामग्री का मूल्यांकन करते समय उपयोग की जाने वाली प्रक्रिया की व्याख्या करें।

जब आप उपयोगकर्ताओं को उनके डिवाइस डिस्प्ले चौड़ाई के आधार पर विभिन्न छवियां परोसना चाहते हैं तो आप srcset विशेषता का उपयोग करेंगे - रेटिना डिस्प्ले वाले उपकरणों को उच्च गुणवत्ता वाली छवियां परोसना उपयोगकर्ता अनुभव को बढ़ाता है जबकि निम्न-अंत वाले उपकरणों को कम रिज़ॉल्यूशन वाली छवियां परोसना प्रदर्शन बढ़ाता है और डेटा बर्बादी को कम करता है (क्योंकि एक बड़ी छवि परोसने से कोई दृश्य अंतर नहीं होगा)। उदाहरण के लिए: <img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt=""> ब्राउज़र को ग्राहक के रिज़ॉल्यूशन के आधार पर छोटी, मध्यम या बड़ी .jpg ग्राफिक प्रदर्शित करने के लिए कहता है। पहला मान छवि नाम है और दूसरा पिक्सेल में छवि की चौड़ाई है। 320px की डिवाइस चौड़ाई के लिए, निम्नलिखित गणनाएँ की जाती हैं:

  • 500 / 320 = 1.5625
  • 1000 / 320 = 3.125
  • 2000 / 320 = 6.25

यदि ग्राहक का रिज़ॉल्यूशन 1x है, तो 1.5625 सबसे करीब है, और 500w जो small.jpg के अनुरूप है, ब्राउज़र द्वारा चुना जाएगा।

यदि रिज़ॉल्यूशन रेटिना (2x) है, तो ब्राउज़र न्यूनतम से ऊपर के निकटतम रिज़ॉल्यूशन का उपयोग करेगा। इसका मतलब है कि यह 500w (1.5625) नहीं चुनेगा क्योंकि यह 1 से अधिक है और छवि खराब दिख सकती है। ब्राउज़र तब 2 के करीब परिणामी अनुपात वाली छवि का चयन करेगा जो 1000w (3.125) है।

srcsets उस समस्या को हल करते हैं जहाँ आप संकीर्ण स्क्रीन वाले उपकरणों को छोटी छवि फाइलें परोसना चाहते हैं, क्योंकि उन्हें डेस्कटॉप डिस्प्ले की तरह विशाल छवियों की आवश्यकता नहीं होती है - और वैकल्पिक रूप से यह भी कि आप उच्च घनत्व/कम घनत्व वाली स्क्रीन पर विभिन्न रिज़ॉल्यूशन वाली छवियां परोसना चाहते हैं।

क्या आपने पहले विभिन्न HTML टेम्प्लेटिंग भाषाओं का उपयोग किया है?

हाँ, Pug (पूर्व में Jade), ERB, Slim, Handlebars, Jinja, Liquid, और EJS कुछ ही नाम हैं। मेरे विचार में, वे कमोबेश समान हैं और सामग्री को एस्केप करने और प्रदर्शित होने वाले डेटा में हेरफेर करने के लिए सहायक फ़िल्टर की समान कार्यक्षमता प्रदान करते हैं। अधिकांश टेम्प्लेटिंग इंजन आपको प्रदर्शन से पहले कस्टम प्रोसेसिंग की आवश्यकता होने पर अपने स्वयं के फ़िल्टर को इंजेक्ट करने की भी अनुमति देंगे।

कैनवास और SVG के बीच क्या अंतर है?

कैनवास रास्टर-आधारित है, पिक्सेल के साथ काम करता है, जबकि SVG वेक्टर-आधारित है, आकृतियों के गणितीय विवरणों का उपयोग करता है। कैनवास अनिवार्य ड्राइंग का उपयोग करता है, जहां जावास्क्रिप्ट के साथ प्रत्येक चरण निर्दिष्ट होता है, जो एनिमेशन और गेम जैसे गतिशील और इंटरैक्टिव ग्राफिक्स के लिए आदर्श है।

इसके विपरीत, SVG घोषणात्मक ड्राइंग का उपयोग करता है, जिसमें HTML में सीधे परिभाषित आकृतियाँ और पथ होते हैं, जिससे यह अधिक सुलभ और SEO-अनुकूल हो जाता है। कैनवास अपने कम ओवरहेड के कारण जटिल दृश्यों के लिए इष्टतम है, लेकिन स्केलिंग से छवि गुणवत्ता का नुकसान हो सकता है। SVG, रिज़ॉल्यूशन-स्वतंत्र होने के कारण, गुणवत्ता का त्याग किए बिना विभिन्न स्क्रीन आकारों के अनुकूल होता है।

अंततः, कैनवास गतिशील, प्रदर्शन-गहन ग्राफिक्स के लिए उपयुक्त है, जबकि SVG स्केलेबल, रिज़ॉल्यूशन-स्वतंत्र ग्राफिक्स में उत्कृष्ट है, जिसमें अंतर्निहित पहुंच और SEO लाभ हैं।

HTML में खाली तत्व क्या हैं?

HTML में खाली तत्व वे तत्व होते हैं जिनमें उनके शुरुआती और समापन टैग के बीच कोई सामग्री नहीं होती है। इसके बजाय, वे स्व-समापन टैग होते हैं, जिसका अर्थ है कि उनके समापन कोण ब्रैकेट (>) से पहले एक फॉरवर्ड स्लैश (/) होता है। खाली तत्वों के कुछ सामान्य उदाहरणों में शामिल हैं:

  • <img>: दस्तावेज़ में छवियों को एम्बेड करने के लिए उपयोग किया जाता है।
  • <input>: उपयोगकर्ता इनपुट स्वीकार करने के लिए उपयोग किया जाता है।
  • <br>: लाइन ब्रेक या जबरन लाइन ब्रेक डालने के लिए उपयोग किया जाता है।
  • <hr>: क्षैतिज नियमों या विभाजकों को बनाने के लिए उपयोग किया जाता है।