Core structure of HTML and Meta tags | Hindi
Summary
TLDRThe video provides an introduction to HTML, covering the basics of HTML structure, tags, and their significance. It explains the importance of understanding HTML as a structural language rather than just a markup language. The speaker emphasizes the role of tags like H1 and H2, and their relevance in organizing web pages. The video also touches on the significance of properly closing tags and using self-closing tags for better coding practices. The content is designed to strengthen foundational knowledge in HTML, preparing viewers for more advanced topics in web development.
Takeaways
- 😀 HTML is a structural markup language that helps in creating the foundation of a webpage.
- 📝 The use of heading tags (H1, H2, etc.) in HTML is crucial for defining the hierarchy and importance of content on a webpage.
- 🌐 The script discusses the importance of understanding HTML tags and their implications for search engine optimization (SEO).
- 🔍 Search engines like Google and Yahoo understand the structure and hierarchy defined by HTML tags to index content effectively.
- 📚 HTML is not just a single structural language; there are other markup languages like XHTML and LaTeX, but HTML is widely supported by browsers.
- 🎯 The 'DOCTYPE' declaration at the beginning of an HTML document informs the browser about the type of document being served.
- 🌐 The 'lang' attribute in HTML is used to define the language of the content, which is important for accessibility and SEO.
- 📝 The 'title' tag within the 'head' section of an HTML document is essential as it defines the title of the webpage displayed in the browser tab.
- 📐 The 'meta' tags in HTML provide additional information about the document, such as character set, viewport settings, and SEO-related information.
- 📝 The script emphasizes the importance of closing HTML tags properly to avoid errors and maintain good coding practices.
- 🛠️ The 'head' and 'body' are the two main parts of an HTML document, with the 'head' containing metadata and the 'body' containing the visible content.
Q & A
What is the primary purpose of the <h1> tag in HTML?
-The <h1> tag in HTML is used to define the most important heading on a page, which is typically the title of the page or the main topic of the content.
Why is it important to understand the structure of HTML?
-Understanding the structure of HTML is important because it helps in creating a well-organized and semantically meaningful webpage that is easier for both users and search engines to interpret.
What is the difference between the <h1> and <h2> tags in terms of heading hierarchy?
-The <h1> tag represents the highest level of heading, while the <h2> tag is the next level down in the hierarchy, indicating a subheading or a secondary topic within the page.
What does the term 'syntactical language' refer to in the context of HTML?
-In the context of HTML, a 'syntactical language' refers to a set of rules and conventions that dictate how elements and tags are structured and formatted in the markup language.
What is the role of the <meta> tags in HTML?
-The <meta> tags in HTML provide metadata about the HTML document, such as character set, page description, keywords, and other information that is not displayed directly on the page but can be used by browsers and search engines.
Why should closing tags be used in HTML even if they are optional?
-Closing tags should be used in HTML to ensure proper nesting of elements and to avoid potential issues with browser rendering. It is also a good practice for maintaining code readability and compatibility with different programming languages that may require closing tags.
What is the significance of the 'DOCTYPE' declaration in an HTML document?
-The 'DOCTYPE' declaration in an HTML document is significant because it tells the browser which version of HTML the document is written in, ensuring that the browser renders the page in standards mode.
What is the difference between 'presentational structure language' and 'descriptive language' in HTML?
-A 'presentational structure language' in HTML is concerned with how elements are displayed visually, while a 'descriptive language' focuses on the meaning and structure of the content, rather than its appearance.
Why is it recommended to include a 'description' meta tag in an HTML document?
-It is recommended to include a 'description' meta tag in an HTML document to provide a brief summary of the page's content. This can help search engines understand the page better and improve its visibility in search results.
What is the purpose of the 'lang' attribute in HTML?
-The 'lang' attribute in HTML is used to indicate the language of the content within an element, which helps search engines and assistive technologies to correctly interpret and display the content.
What are some common attributes that can be added to HTML tags to provide additional information or functionality?
-Some common attributes that can be added to HTML tags include 'id', 'class', 'style', 'title', and 'alt', which can be used to identify elements, apply styles, provide tooltips, and offer alternative text for images, respectively.
Outlines
💻 Introduction to HTML and its Importance
The paragraph begins by welcoming the audience back and recapping the basics of HTML, including installing VS Code and writing the first HTML code. It emphasizes that HTML is more than just large and small headings defined by `<h1>` and `<h2>` tags. The paragraph explains the fundamental importance of understanding HTML tags, their usage, and how they contribute to a webpage's structure. The speaker highlights that while many think HTML is just for formatting, it actually defines the core structure of a webpage, which is crucial for search engines like Google and Yahoo to index content properly.
🌐 Understanding HTML Structure and Meta Tags
This paragraph delves into the visual and structural aspects of HTML, explaining the difference between the `head` and `body` sections. It highlights the importance of elements like the title and favicon, which are part of the `head` section but have visual aspects on a webpage. The paragraph also introduces meta tags, explaining their role in providing additional information about the document that is not directly visible on the page. The speaker encourages exploring Google's developer resources for recommended meta tags that can help optimize a webpage for search engines. The paragraph concludes by stressing the importance of adhering to proper syntax, such as closing tags, especially when working with modern web technologies like React.
Mindmap
Keywords
💡HTML
💡Tag
💡h1 Tag
💡DOCTYPE
💡Head
💡Body
💡Meta Tags
💡Attributes
💡Structural Language
💡Self-Closing Tags
Highlights
Introduction to HTML and its importance in web development.
Explanation of the difference between H1 and H2 tags and their use in headings.
The significance of HTML structure in SEO and how search engines interpret headings.
HTML as a markup language and its evolution from earlier versions like XHTML.
Introduction to the concept of 'syntactical language' in HTML.
The role of HTML tags in defining the importance of content on a webpage.
How to properly use HTML tags to enhance the structure and SEO of a webpage.
The importance of closing tags in HTML and the impact of not closing them.
Explanation of meta tags and their role in providing information about the document.
Discussion on character sets and their importance in web content display.
The concept of self-closing tags in HTML and their usage.
The importance of using proper HTML document type declaration for browser interpretation.
Explanation of how HTML structure helps in creating a clear hierarchy of content.
The role of HTML in defining the visual aspect of a webpage.
How to use HTML tags to include a favicon on a webpage.
The importance of understanding HTML syntax for effective web development.
Discussion on the use of HTML tags for creating a responsive and accessible website.
The impact of HTML5 on modern web development and its features.
How to use HTML tags effectively to improve website ranking on search engines.
The importance of learning HTML for anyone interested in web development.
Transcripts
हान जी स्वागत है वापस से आपका चाय और
कोर्ट में तो अब जब सब लोगों को यह समझ
में ए चुका है की एचटीएमएल का पहला पेज
कैसे आए वीएस कोड कैसे इंस्टॉल हो और कैसे
हमें फर्स्ट अपना कोड लिखना है लिए थोड़ी
सी बातें कर लेते हैं एचटीएमएल के बारे
में भी मुझे अच्छे से अच्छे से पता है की
आप सभी लोग ये जानते हैं की एच1 टैग के
अंदर हेडिंग बड़ी होती है जब आप h2 टैग
लिखते हैं तो ये हेडिंग हमेशा थोड़ी सी
छोटी आती है स्मॉलर बट ऐसा नहीं है इसके
पीछे भी एक रीजन है और वही आपका एचटीएमएल
के फाउंडेशन कोर्स स्ट्रक्चर को मजबूत
बनाएगी एचटीएमएल बहुत सारे लोग मानते हैं
की ठीक है एच1 टैग बड़ी हेडिंग के लिए ह
तू है अटैक स्मॉलर हेडिंग के लिए बट मुझे
पता है आप में से बहुत लोगों को पता है की
कस का उसे करते हुए आप किसी भी h2 टैग को
एच1 हेडिंग से भी बड़ा कर सकते हैं तो फिर
मतलब ही क्या है एचटीएमएल में सब कुछ ही
पैराग्राफ में लिख दीजिए
एचटीएमएल पे इतना ध्यान देने की जरूरत ही
क्यों है ध्यान देने की जरूरत है एचटीएमएल
कहने को तो एक मार्कअप लैंग्वेज नया फुल
फॉर्म भी देखेंगे जो की आप पढ़ सकते हैं
गूगल पर एक मार्कअप लैंग्वेज है बट मैं
नहीं चाहता की आप इसको याद रखें आज अन
मार्कअप लैंग्वेज मैं चाहता हूं आप इसको
याद रखें आज अन syntextical लैंग्वेज
सिंपल एंड डिक्लेरटिव लैंग्वेज ये
लैंग्वेज क्या करती है आपके पेज के
स्ट्रक्चर को बनाती है तो ये स्ट्रक्चरल
लैंग्वेज है और सिर्फ वैसा ही नहीं है की
एक ही स्ट्रक्चर लैंग्वेज है बहुत सारी और
भी स्ट्रक्चर लैंग्वेज होती है इनसाइड
बहुत सारे लोग इसको डिवाइड भी करते हैं
प्रेजेंटेशन स्ट्रक्चर लैंग्वेज और
डिस्क्रिप्शन लैंग्वेज और भी बहुत सारे
नाम हैं आपको जाने की जरूरत नहीं है और
सिर्फ एचटीएमएल ही एक स्ट्रक्चर लैंग्वेज
नहीं है आपके पास स्मैकडाउन भी है लेटेक्स
भी है बहुत सारी और लैंग्वेज है बट इसका
सपोर्ट ब्राउज़र में सबसे ज्यादा है
इसीलिए एचडी मैंने इतनी पॉप्युलर है और
इसकी जितने भी टैग्स हैं वो सब अपने आप
में एक इंपॉर्टेंट रखते हैं एच1 का मतलब
ये नहीं है की वहां पर हेडिंग बड़ी होगी
और h2 का मतलब ये नहीं की वहां पे हेडिंग
छोटी होगी h1 का मतलब है पेज के अंदर ये
जितनी हेडिंग्स है ये पेज का कोर पार्ट है
ये सबसे इंपॉर्टेंट चीज है इसी तरह से जब
आप हेडिंग तू लिखते हैं तो ये एक सब
हैडिंग है सेकंड इंपॉर्टेंट है और गूगल
याहू इंडेक्स जितने भी सर्च इंजन है इन सब
बातों को अच्छे से समझते हैं बहुत सारे
लोग क्या करते हैं आपने देखा होगा सिंपली
लिखते हैं फुटर और फुटर के अंदर लिख देते
हैं पैराग्राफ और यहां पे लिखते हैं अपना
एड्रेस
लिख सकते हैं कोई प्रॉब्लम नहीं है कस से
आप उसको फुटर में भी ले जा सकते हैं लेकिन
बहुत सारे लोगों को कुछ खर्चा ही नहीं
करना पड़ता है गूगल पे अपना रैंकिंग और
अपना एड्रेस देने के लिए और सिंपलीफाई
लिखते हैं उसके बाद एड्रेस टैग के अंदर
अपने सारे पैराग्राफ इंक्लूड करते हैं
गूगल को ऑटोमेटेकली पता है क्योंकि आपको
स्ट्रक्चर अच्छे से पता था एचटीएमएल
लैंग्वेज का उसको गूगल को पता है उसने
स्ट्रक्चर में से एड्रेस में से आपका
एड्रेस लिया और रेस्ट कर दिया तो एचटीएमएल
की आपको जितनी अच्छी नॉलेज होगी इसलिए
नहीं की यह हेडिंग्स को बड़ा और छोटा करती
है इसलिए क्योंकि हर एक टैग का एक
इंपॉर्टेंस
ही आपके पेज के स्ट्रक्चर को बनाता है आई
थिंक अब ज्यादा इंटरेस्टिंग लग रहा है
एचटीएमएल ओके तो स्टार्ट करते हैं सबसे
पहले जानने के लिए क्या चीज इंपॉर्टेंट है
और क्या चीज पता होनी चाहिए एक्सक्लेमेटरी
लिखते ही तब हिट किया तो सबसे पहले हमें
पता तो लग गया की ठीक है ये बेसिक
स्ट्रक्चर आता है लेकिन जैसे ही हम फर्स्ट
लाइन पे गए तो हमें मिला दो टाइप एचटीएमएल
के जितने भी टैग्स हैं हान इन्हीं सब को
हम टैग्स बोलते हैं ये जितने भी टैक्स है
ये सारे केस इन सेंसेटिव है आप चाहे तो
हेड लिखिए चाहे तो हेड लिखिए कोई फर्क
नहीं पड़ता है लेकिन यूजुअली मोस्ट केसेस
में आप इनको लोअर केस ही रखते हैं जो सबसे
पहला टैग है वो है डॉक टाइप जैसा की मैंने
आपको बताया इंटरनेट के स्टार्टिंग दौर में
ये सब कुछ एचटीएमएल नहीं था एक्सएमएल भी
था उसके अलावा एक्स एचटीएमएल भी था
लेटेक्स भी था तो आपका डॉक्यूमेंट किसी भी
टाइप का हो सकता है ये चीज सिर्फ ब्राउज़र
को बताती है की ये जो डॉक्यूमेंट हम सर्व
कर रहे हैं ये एचटीएमएल टाइप का है इसके
बाद हमने कहा एचटीएमएल और obbvious सी बात
है वह देश विदेश में पुरी एचटीएमएल
पॉप्युलर हो गई है तो लैंग्वेज भी डिफाइन
करनी पड़ती है की इंग्लिश में है हिंदी
में है जहां पे नहीं इसमें है या किसी और
लैंग्वेज में है उसके बाद सबसे जो
इंपॉर्टेंट पार्ट है ये सब हम यहां पे हटा
देते हैं एक एचटीएमएल का जो स्ट्रक्चर है
वो इस तरह से होता है और इसको और जाने के
लिए एचटीएमएल हमेशा इस तरह से होता है
फरदार एचटीएमएल के दो चाइल्ड हैं यह
टर्मिनोलॉजी हमें पता होनी यहां पे जरूरी
है क्योंकि इसके बाद हम डोम भी सीखेंगे और
दम के लिए सब इंपॉर्टेंट है नोटिस करिए
हीर की यहां पे एचटीएमएल है उसके अंदर
हमारे दो चाइल्ड्स हैं हेड और बॉडी और
बॉडी के अंदर फरदार आप और चाइल्ड कर सकते
हैं हेड के अंदर ऑल चाइल्ड ऐड कर सकते हैं
जैसे की मैंने टाइटल ऐड कर
इसका मैंने हम दे देता हूं सिंपली टाइटल
बॉडी के अंदर मैंने सिंपली एक ह वैन ऐड कर
और लिख दिया टेस्ट
है तो हमारा रिलेशन जो है एचटीएमएल का वह
टाइटल से है ग्रांड चाइल्ड अब ऐसा नहीं है
की आपको ग्रांड ग्रांड चाइल्ड केयर कुछ
दौर पे अंदर जाना हो यूजुअली पैरेंट
चाइल्ड एंड ग्रांड चाइल्ड यहीं तक
रिलेशनशिप रखते हैं और भी हो सकते हैं ऐसा
नहीं है h1 के अंदर एक और ए टैग ए के यहां
पे भी और वैल्यूज ए सकती है बट ऐसा करेंगे
नहीं आपके लिए इंपॉर्टेंट है जो जानना वो
सारा चीज मैं आपको यहीं पे बताता हूं तो
एचटीएमएल के अंदर हमने हेड लिखा और हेड के
अंदर बॉडी लिखा अब जब हम एक वेब पेज पर
जाते हैं तो जितना भी आपको यहां पे पेज
दिख रहा है ये सब है आपकी बॉडी का पार्ट
जो की विजुअल एस्पेक्ट है जो हेड के अंदर
है उसमें से सिर्फ दो चीज विजुअल होती है
पहला जो पार्ट है वो है आपका टाइटल और
दूसरा है फेविकोल अब दूसरी जितनी भी
वेबसाइट पे जाते हैं आपको जैसे यहां पे एक
छोटा सा आइकन मिला है सी एस कोड का एक
छोटा सा आइकन मिला है ये सब होता है सारे
खान और ऐसा नहीं है की आपको सिंटेक्स याद
करने की जरूरत है बस आपको पता होना चाहिए
मुझे फेविकोल लगाना है तो आप सिंपली यहां
पे जाइए और सिंपली जैसे आप टाइटल के अंदर
फेविकोल लिखेंगे ये आपको कोई इमेज ऐड करनी
है आपको मिड सजेस्ट कर देगा
यह भी करेंगे बट अभी के लिए नहीं अभी हमें
इतना पता लग गया अब हमने देखा की जैसे ही
हम यह सारा कम करते द तो एक और चीज आती थी
वह थी मेटा टैग्स अब यह मेटा टैक्स क्या
चीज है कुछ इनफॉरमेशन आपके डॉक्यूमेंट के
बारे में जो आप पेज पे लिखना नहीं चाहते
बट पेज को या सर्वर को या जो भी स्पेस को
विजिट करने आए कोई ऑटोमेटिक बोट रोल उसे
ये सब पता होना चाहिए जैसे की इस पेज के
अंदर हम जो कैरेक्टर सेट उसे कर रहे हैं
वो उर्फ 16 है बहुत सारे कैरक्टर सेट्स
होते हैं जैसे की आप अगर पेज पे स्माइली
सपोर्ट करना चाहते हैं तो उर्फ 16 में
सपोर्ट करूंगा यहां पे और भी हम पढ़ेंगे
स्काई कैरेक्टर्स और चीजों के बारे में अब
आपने लिखा नाम व्यू पोर्ट और विथ डिवाइस
था मेंस जब ये पेज बाय डिफाल्टर रेंडर हो
तो क्या इसका जूम लेवल हो टैबलेट पे एक
ऐसा दिखे वेबसाइट पे कैसा दिखे वो सब उसके
बारे में है तो ये सब हमें पता कहां से
लगे हैं सबसे बेस्ट जो रिसोर्स मुझे लगा
की आपको जो मेटा टैग्स के बारे में देखना
है मेटा टैग्स इन एचडी म और जो बेस्ट
पार्ट है वो है गूगल पे
क्योंकि गूगल जो रिकमेंड करता है
developer.google पर वह सारे वोट से जो
आपकी वेबसाइट के सो में सबसे ज्यादा आपकी
हेल्प करेगी
थोड़ा सा
यहां पर
नाम डिस्क्रिप्शन
[संगीत]
ये सारे टैग्स आपको लगाने चाहिए तो अब
आपको पता है आप लगा सकते
जितने भी टाइप्स के टैग्स हैं वो आपको
सीधा ही मिल जाएंगे जैसे आपको
डिस्क्रिप्शन वाला टैग चाहिए या आपको एज
वाला टेक्सचर चाहिए जो भी आपको चाहिए मुझे
डिस्क्रिप्शन चाहिए तो आप सिंपली यहां पे
नाम डिस्क्रिप्शन और जो भी कंटेंट का
डिस्क्रिप्शन है वो आप डायरेक्टली लिख
सकते हैं यही जो पेज है वहां पे हम कुछ सब
लोड करवाते हैं कई बार वो हम कस के पार्ट
में देखेंगे अभी सिर्फ इतना ही ओके तो
आपको पता लग गया की डॉग टाइप एचटीएमएल है
हमारा एचटीएमएल है उसके अंदर हेड है बॉडी
है अब एक और इंपॉर्टेंट चीज आपको पता होनी
चाहिए नोटिस कीजिए हेड ओपन हो रहा है और
क्लोज भी हो रहा है बॉडी भी ओपन हो रही है
और क्लोज भी हो रही है ये सिंटेक्स है
लेकिन डॉग टाइप है जो की सिर्फ ओपन हो रहा
है क्लोज नहीं हो रहा है नौ ये
raycommendation है की कोई भी टैग को अगर
आप ओपन करते हैं तो उसको क्लोज भी करिए
जैसे ह वैन टैग है तो उसको क्लोज भी करिए
ब्राउज़र आपको कोई प्रॉब्लम नहीं देगा आप
सिंपली यहां पर हेडिंग लिख सकते हैं और आप
चाहे तो इसको रिमूव कर सकते हैं ये आपको
तब भी पेज सर करेगा एचटीएमएल सबसे
रेलूक्टेंट है यह आपको कोई एरर्स नहीं
देता यूजुअली बट यह अच्छी बात नहीं है
क्यों क्योंकि जब आप लेटर ऑन रिएक्ट
सीखेंगे या और कोई लैंग्वेज सीखेंगे वहां
पे ये प्रैक्टिस बहुत इंपॉर्टेंट है और यस
एरर्स आते हैं इनके बिना कुछ टैग्स
हालांकि क्लोजिंग टैग्स नहीं होते हैं
जैसे बी टैग वो स्टैंडर्ड लोन है इसको
लिखने का जो अच्छा बाद में रिएक्ट का
तरीका वो है की रिएक्ट इसमें एरर देता है
क्योंकि ये क्लोजिंग टैग नहीं है तो इसको
हम सेल्फ क्लोजिंग बना सकते हैं ये ज्यादा
बटोर तरीका है फ्यूचर प्रूफ होने के लिए
तो यह सारे हमारे टैग्स हैं एलिमेंट्स भी
इनको बोलते हैं या टैग्स भी जो मर्जी आए
आप नाम दीजिए सिंपली है ये h1 है यह हमारा
टैग है टैग्स के अंदर कुछ अटरीब्यूट्स भी
हो सकते हैं बट अभी के लिए इतना ही आपने
समझ लिया की अब हेड टैग है क्या है और
बेसिक आपको पता है अब हम थोड़ा स्पीड में
जा सकते हैं ये सीखने के लिए की क्या h1
टैग्स है क्या उनकी इंपॉर्टेंस है क्या
उनके और अटरीब्यूट्स है या अटरीब्यूट होते
क्या है ये सब तो चलते हैं नेक्स्ट वीडियो
में और फटाफट से हमारे सारे जितने टैग्स
हैं जो इंपॉर्टेंट है उन सबको कवर करते
हैं
Ver Más Videos Relacionados
5.0 / 5 (0 votes)