Theory
Text की विशाल दीवार
कल्पना कीजिए आप Notepad में अपनी portfolio site के लिए एक ख़ूबसूरत welcome note type करते हैं। आप साफ़ line breaks जोड़ते हैं, अपनी bio को तीन paragraphs में बाँटते हैं, और save दबाते हैं। पर जब आप अपने browser के अंदर यह file खोलते हैं, डर लगता है: सब कुछ एक विशाल, न पढ़ने-लायक़ paragraph में पिस गया है! browser ने आपके सारे Enters और spaces पूरी तरह नज़रअंदाज़ कर दिए। हम browser को कैसे बताएँ कि एक heading कहाँ ख़त्म होती है और एक paragraph कहाँ शुरू होता है?
Theory
चिपकने वाले Labels
HTML tags को उन चिपकने वाले labels की तरह सोचिए जो आप एक courier office में packages पर लगाते हैं। अगर आप एक box पर 'Fragile' label चिपकाते हैं, courier इसे अतिरिक्त सावधानी से सँभालता है। अगर आप एक 'Urgent' label चिपकाते हैं, यह तेज़ी से चलता है। box ख़ुद नहीं बदलता, पर label बदलता है कि handlers इसके साथ कैसे बर्ताव करते हैं। web development में, tags structural labels हैं जो browser को बिल्कुल बताते हैं कि आपके raw text content को कैसे समझें और दिखाएँ।
Theory
Tags, Elements, और Attributes
आइए अपनी theory exam के लिए मुख्य terms परिभाषित करें। एक tag angle brackets में बंद एक command है, जैसे <p>, जो browser को निर्देश देता है। एक element पूरा bundle है: opening tag, content text, और closing tag, जैसे <p>Hello</p>। एक attribute opening tag के अंदर अतिरिक्त configuration देता है, एक name और value pair के रूप में लिखा जैसे name="value"। हर standard HTML5 structure में ये components एक सख़्त hierarchy में व्यवस्थित होते हैं।
Practical
ज़रूरी HTML5 Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Portfolio</title>
</head>
<body>
<h1>Welcome to My Site</h1>
<p>This is my first webpage.</p>
</body>
</html>This example runs in Gri-Learn on the web, where you can edit it and see the output.
Theory
एक Attribute की Anatomy
आइए HTML code की एक professional line को अलग करें ताकि देखें attributes elements को कैसे modify करते हैं। <html lang="en"> देखिए।
पहले, <html> opening tag है। इसके अंदर, हम एक space जोड़ते हैं जिसके बाद lang आता है। यह attribute name है, जो language के लिए खड़ा है। अगला equals sign और straight double quotes के अंदर attribute value "en" आता है। यह browser को स्पष्ट रूप से बताता है कि पूरा document English में लिखा है। closing tag </html> बिल्कुल अंत में बैठता है।
Quiz
एक laboratory exam में, एक student `<p class=main>Welcome to my portfolio</p>` लिखता है। एक सख़्त university evaluator इस ख़ास line को ख़राब practice के रूप में क्यों flag कर सकता है?
- paragraph tag को हमेशा capital letters में लिखना होगा जैसे `<P>`।
- attribute value 'main' को valid HTML standards को साफ़-सुथरे मानने के लिए आदर्श रूप से double quotes के अंदर लपेटना चाहिए।
- Attributes केवल closing tags के अंदर रखे जा सकते हैं, कभी opening tags के अंदर नहीं।
- शब्द 'class' एक programming command है और structural HTML के अंदर इस्तेमाल नहीं हो सकता।
Show the answer
attribute value 'main' को valid HTML standards को साफ़-सुथरे मानने के लिए आदर्श रूप से double quotes के अंदर लपेटना चाहिए।
जबकि web browsers अत्यधिक माफ़ करने वाले हैं, university evaluation standards attribute values को double quotes में लपेटना माँगते हैं, जैसे class="main"। HTML5 tags case insensitive हैं, इसलिए lowercase standard है, और attributes को हमेशा अनन्य रूप से opening tag के भीतर रहना चाहिए।
Watch out
Overlapping Tag का जाल
descriptive exams में marks निचोड़ती एक बहुत आम ग़लती ग़लत tag nesting है। अगर आप चाहते हैं एक phrase bold और italic दोनों हो, आप शायद <b><i>My Portfolio</b></i> लिखें। यह ग़लत है! Tags को बिल्कुल उलटे क्रम में बंद होना चाहिए जिसमें वे खोले गए थे। सही format <b><i>My Portfolio</i></b> है। इसे algebra में brackets की तरह सोचिए: आप एक outer bracket को inner बंद करने से पहले बंद नहीं कर सकते।
Formula
Exam Template: पाँच ज़रूरी Elements
जब एक 5 mark question के लिए एक HTML5 document की baseline structure लिखने को कहा जाए, हमेशा इन 5 ज़रूरी items को बिल्कुल इस क्रम में शामिल कीजिए:
<!DOCTYPE html>(document type को HTML5 के रूप में declare करता है)<html>(root container element)<head>(webpage metadata और title रखता है)<title>(browser tab पर दिखता text set करता है)<body>(सारा दिखता content text और elements रखता है)
Think first
Core Distinction Challenge
tap करने से पहले, आँखें बंद कीजिए और एक साथी student को 'HTML Tag' और 'HTML Element' के बीच बिल्कुल अंतर मन में समझाइए। क्या आप इसे साफ़-सुथरे कह सकते हैं?
Show the answer
एक HTML tag बस individual code bracket ख़ुद है, जैसे <p> या </p>। एक HTML element पूरा complete package है: इसमें opening tag, भीतरी content text, और closing tag साथ मिलाकर एक अकेली structural unit के रूप में शामिल हैं।
Summary
Key takeaways
- HTML tags structural labels के रूप में काम करते हैं जो browser को raw text render करने का निर्देश देते हैं।
- एक element opening tag से closing tag तक पूरा block दर्शाता है।
- Attributes द्वितीयक configurations देते हैं और opening tag के अंदर name value pairs के रूप में रहते हैं।
- एक standard HTML5 document एक metadata head section और एक दिखते body section में बँटा है।
- layout bugs रोकने और exam marks बनाए रखने के लिए हमेशा tags को उलटे क्रम में साफ़-सुथरे nest कीजिए।
- Memory Hook: Tags wrappers हैं, attributes descriptions हैं, और elements पूरे candy bars हैं।