HTML क्या है

docs.scrimba.com

आपने जो भी वेबसाइट देखी है वह HTML में लिखे गए एक साधारण टेक्स्ट दस्तावेज़ से शुरू होती है। पेज पर जो headings, paragraphs, buttons, images, और links आप देखते हैं, वह सभी इसी एक भाषा में वर्णित हैं। इससे पहले कि आप पेज को style कर सकें या इसे interactive बना सकें, आप वर्णन करते हैं कि इस पर क्या है, और वह वर्णन HTML है।

एक पेज सिर्फ structured text है

HTML का मतलब HyperText Markup Language है। महत्वपूर्ण शब्द है markup: HTML साधारण टेक्स्ट लेने और यह चिह्नित करने का एक तरीका है कि कौन से हिस्से headings हैं, कौन से paragraphs हैं, कौन से links हैं, इत्यादि। आप कंप्यूटर को निर्देश नहीं दे रहे हैं। आप content को लेबल कर रहे हैं ताकि ब्राउज़र जान सके कि प्रत्येक piece क्या है और इसे कैसे दिखाया जाए।

इसे हाथ से एक दस्तावेज़ को format करने जैसे सोचें। आप शीर्षक को circle करते हैं, section headings को underline करते हैं, और एक photo के चारों ओर एक box खींचते हैं। HTML वह है जो आप इस circling और underlining को इस तरह से करते हैं जिसे एक ब्राउज़र समझता है।

HTML एक declarative भाषा है: आप यह वर्णन करते हैं कि आप क्या structure चाहते हैं, न कि इसे produce करने के लिए क्या कदम हैं। कोई logic नहीं है, कोई loops नहीं हैं, कोई variables नहीं हैं। आप कहते हैं "यह एक heading है, यह एक paragraph है, यह तीन items की एक list है", और ब्राउज़र उस वर्णन को screen पर कुछ में बदलने के लिए ज़िम्मेदार है।

यही कारण है कि HTML सामान्य अर्थ में एक programming language नहीं है। यह कुछ भी compute नहीं करता। यह content को structure करता है। यह अंतर महत्वपूर्ण है जब आप CSS और JavaScript जोड़ते हैं, क्योंकि तीनों में से प्रत्येक का एक job है जो वह अच्छा है, और HTML का job structure है।

HTML एक declarative markup language है जिसे ब्राउज़र एक DOM (the Document Object Model: the live, in-memory representation of the page जिसे CSS style करता है और JavaScript manipulate करता है) कहे जाने वाले objects के tree में parse करता है। आपका source text input है; DOM वह है जिसे ब्राउज़र वास्तव में render करता है और हर दूसरी web technology किससे बात करती है।

वह framing HTML के बहुत सारे behavior को समझाता है। HTML parsing deliberately forgiving है: एक missing closing tag या एक misnested element शायद ही कभी एक error throw करता है, क्योंकि parser एक defined recovery algorithm का पालन करता है और वैसे भी एक valid tree बनाता है। यह एक feature है, carelessness नहीं। इसने दो दशक के imperfect pages को काम करते रहना जारी रखा। इसका मतलब यह भी है कि "it renders" correctness का एक weak test है: ब्राउज़र लगभग कुछ भी से एक DOM construct करेगा, इसलिए अपने markup को अच्छी तरह से structure करना आपके ऊपर है, न कि parser पर।

<h1>स्वागत है</h1>
<p>यह मेरे पहले वेब पेज पर टेक्स्ट का एक paragraph है।</p>

दो lines, दो pieces of structure: एक heading और एक paragraph। ब्राउज़र labels को पढ़ता है और पहली line को बड़ी और bold दिखाता है, दूसरी को ordinary body text के रूप में।

Junoएक पेज सिर्फ structured text है HTML यह है कि आप पेज के parts को कैसे label करते हैं ताकि ब्राउज़र जान सके कि वे क्या हैं। आप निर्देश नहीं लिख रहे हैं, आप content को mark up कर रहे हैं: यह bit एक heading है, यह bit एक paragraph है। यही पूरा idea है, और बाकी सब इस पर बनता है।

Junoएक पेज सिर्फ structured text है HTML declarative है: आप structure describe करते हैं, ब्राउज़र बाकी को संभालता है। कोई logic यहाँ नहीं रहता, जो बिल्कुल कारण है कि यह CSS और JavaScript के साथ pairs करता है। HTML के job को अपने दिमाग में स्पष्ट रखें और बाकी दोनों को place करना आसान हो जाता है।

Junoएक पेज सिर्फ structured text है ब्राउज़र आपके markup को DOM में parse करता है, और वह tree वह है जिस पर बाकी सब act करता है। Parsing deliberately forgiving है, इसलिए it renders लगभग कुछ भी prove नहीं करता। Well-formed structure आपकी ज़िम्मेदारी है, और यह उस moment को return करता है जब CSS और JavaScript उस tree को पढ़ना शुरू करते हैं जो आपने built किया है।

Elements, tags, और attributes

HTML का अधिकांश हिस्सा elements से बना है। एक element के आमतौर पर एक opening tag, कुछ content, और एक closing tag होता है:

<p>नमस्ते।</p>

<p> opening tag है, </p> closing tag है (note the slash), और "नमस्ते।" बीच में content है। एक साथ वे एक paragraph element बनाते हैं। Tags labels हैं; content वह है जो visitor पढ़ता है।

आप एक tag को एक attribute से अतिरिक्त information भी दे सकते हैं। एक link को जानना चाहिए कि यह कहाँ जाता है, इसलिए आप इसे एक href attribute के साथ बताते हैं:

<a href="https://scrimba.com">Scrimba पर जाएँ</a>

एक element एक opening tag, उसका content, और एक closing tag है। Attributes opening tag के अंदर name="value" pairs के रूप में जाते हैं और element को configure करते हैं: href एक link पर इसके destination को set करता है, src एक image पर इसकी file को set करता है, alt fallback text को set करता है।

<a href="https://scrimba.com" target="_blank">Scrimba पर जाएँ</a>

कुछ elements के पास कोई content नहीं है और कोई closing tag नहीं है। ये void elements हैं: <img>, <br>, <input>, <hr>। वे अपने attributes में सब कुछ carry करते हैं, इसलिए wrap करने के लिए कुछ नहीं है और close करने के लिए कुछ नहीं है।

शब्दावली सटीक होने लायक है, क्योंकि लोग इसे loosely use करते हैं और इससे बाद में confusion होता है। एक tag वह पाठ है जो आप type करते हैं, <p> या </p>। एक element पूरी चीज़ है जो parser produce करता है: tags प्लस उनका content प्लस कोई भी descendants। एक attribute opening tag पर एक name="value" pair है जो element की एक property को set करता है।

Void elements (<img>, <input>, <br>, <hr>, <meta>, <link>) के पास कोई content model नहीं है और इसलिए कोई closing tag नहीं है; trailing slash जो आप कभी-कभी देखते हैं (<br />) HTML में optional है और कोई प्रभाव नहीं है, XHTML से एक holdover। Attribute values strings हैं, भले ही वे numbers या booleans को represent करते हैं: disabled एक boolean attribute है जिसकी mere presence true है, और <input value="5"> string "5" को hold करता है जब तक कि कोई चीज़ इसे number के रूप में read न करे। यह जानना कि DOM इस layer पर stringly-typed है, आपको JavaScript के string attribute values को read करना शुरू करते समय bugs की एक class से बचाता है।

JunoElements, tags, और attributes एक element एक opening tag, कुछ content, और एक closing tag है, जैसे <p>...</p>। Attributes opening tag में जाते हैं और details add करते हैं, जैसे एक link किस तरफ point करता है। हर tag को memorise करने की चिंता न करें। आप उन्हें एक समय में कुछ सीखेंगे जब आपको उनकी ज़रूरत होगी।

JunoElements, tags, और attributes Tags पाठ हैं, element पूरी चीज़ है, attributes इसे configure करते हैं। Void elements जैसे <img> और <input> के लिए देखें: कोई content नहीं, कोई closing tag नहीं, सब कुछ attributes में रहता है। अभी शब्दावली को सही तरीके से प्राप्त करना बाकी docs को cleaner पढ़ता है।

JunoElements, tags, और attributes Tag, element, और attribute का मतलब तीन अलग-अलग चीजें हैं, और उन्हें सीधा रखना तब pay off करता है जब आप debug करते हैं। Attribute values इस layer पर strings हैं, भले ही numbers और booleans हों, इसलिए पहली बार जब value JavaScript में एक string के रूप में वापस आता है, आप पहले से जानेंगे कि क्यों। Void elements पर optional slash कुछ नहीं करता; इसे ignore करें।

HTML, CSS, और JavaScript काम को कैसे divide करते हैं

एक finished web page आमतौर पर तीन languages से built होता है, और हर एक का एक job होता है:

• HTML structure है: headings, text, images, और buttons।
• CSS style है: colours, fonts, spacing, और layout।
• JavaScript behaviour है: जब आप click, type, या scroll करते हैं तब क्या होता है।

इसे picture करने का एक common तरीका: HTML एक घर की walls और rooms हैं, CSS paint और furniture हैं, और JavaScript electricity है जो चीजों को switch on करता है। आप पहले walls सीख रहे हैं, क्योंकि structure exist होने तक paint या wire करने के लिए कुछ नहीं है।

तीन languages एक layered stack बनाते हैं, और layering intentional है। HTML structure और meaning provide करता है। CSS वह structure को read करता है और describe करता है कि यह कैसा दिखना चाहिए। JavaScript structure को read और change करता है events के response में।

उन्हें separated रखना एक discipline है जो early में build करने लायक है। जब आपका content HTML में रहता है, आपका presentation CSS में, और आपका behaviour JavaScript में, आप प्रत्येक को change कर सकते हैं बिना दूसरों को disturb किए। उन्हें mix करना, उदाहरण के लिए <br> tags के साथ layout force करना या हर जगह inline styles, पहली बार काम करता है और तेजी से painful हो जाता है।

तीनों के across separation of concerns सिर्फ tidiness नहीं है, यह वह है जो pages को resilient बनाता है। एक page जिसका meaning पूरी तरह से अपने HTML द्वारा carry किया जाता है gracefully degrade होता है: अगर CSS load करने में fail करता है, content अभी भी readable और ordered है; अगर JavaScript disabled है या error करता है, core content अभी भी वहाँ है। यह progressive enhancement के लिए practical argument है: पहले HTML में एक working document build करें, फिर top पर style और behaviour layer करें।

यह एक accessibility और performance argument भी है। Assistive technology DOM को read करता है, इसलिए meaning जो HTML में रहता है उसके लिए यह available है, जबकि meaning जो CSS के साथ faked है या late से JavaScript द्वारा injected किया गया है अक्सर नहीं है। और HTML वह है जिसे ब्राउज़र पहले parse और paint कर सकता है; content जो एक JavaScript round trip पर depend करता है appear करने के लिए content है जो user wait करता है। जब आप deciding कर रहे हैं कि page का एक piece कहाँ रहना चाहिए, default answer HTML है, और आप stack को up में move करते हैं केवल जब structure alone job को नहीं कर सकता।

JunoHTML, CSS, और JavaScript काम को कैसे divide करते हैं तीन languages, तीन jobs: HTML structure है, CSS style है, JavaScript behaviour है। आप HTML के साथ शुरू कर रहे हैं क्योंकि यह वह part है जिस पर सब कुछ बैठता है। एक बार ये walls ऊपर हो गईं, paint और wiring के लिए somewhere है।

JunoHTML, CSS, और JavaScript काम को कैसे divide करते हैं HTML में structure, CSS में presentation, JavaScript में behaviour, intentionally separated। एक को change करें बिना दूसरों को break किए, और HTML में layout को fake करने की urge को resist करें। वह habit अभी build करना cheap है और later unlearn करना expensive है।

JunoHTML, CSS, और JavaScript काम को कैसे divide करते हैं HTML में meaning डालें और page gracefully degrade होता है जब CSS या JavaScript fall over करता है, जो भी वह है जो इसे accessible और fast बनाता है। यही पूरा case है progressive enhancement के लिए। जब आप unsure हैं कि कहाँ कुछ belongs है, stack के bottom से शुरू करें और केवल climb करें जब structure alone इसे carry नहीं कर सकता।

आपका पहली बार एक पूरे page को देखना

यहाँ एक complete, अगर tiny, web page है। आप इसका हर part properly अगले chapters में meet करेंगे, इसलिए अभी details के बारे में चिंता न करें। अभी के लिए, notice करें कि यह पूरी तरह से tags और attributes से बना है जो आप पहले से देख चुके हैं:

नीचे एक minimal लेकिन complete HTML document है। हर real page लगभग इसी shape से शुरू होता है: एक doctype, एक <html> root, एक <head> page के बारे में जानकारी के लिए, और एक <body> content के लिए जो visitor देखता है।

एक complete document के पास एक required skeleton है, और यह closely read करने लायक है भले ही यह boilerplate जैसा लगता हो। हर line का एक job है, और अगले chapters explain करते हैं कि हर एक अपनी जगह क्यों earn करता है बजाय इसे एक magic incantation माना जाए जो copy किया जाता है।

<!DOCTYPE html>
<html lang="hi">
  <head>
    <meta charset="UTF-8" />
    <title>मेरा पहला पेज</title>
  </head>
  <body>
    <h1>स्वागत है</h1>
    <p>यह मेरे पहले वेब पेज पर टेक्स्ट का एक paragraph है।</p>
  </body>
</html>

Top से read करें: पहली line ब्राउज़र को बताती है कि यह एक modern HTML page है, <html> सब कुछ wrap करता है, <head> behind-the-scenes information को hold करता है जैसे page title, और <body> जो आप actually देखते हैं उसे hold करता है। पहले से heading और paragraph <body> के अंदर रहते हैं, क्योंकि वे visitor के लिए content हैं।

<head> metadata को hold करता है: things about the page जो page body में show नहीं किए जाते हैं, जैसे इसका title (जो ब्राउज़र tab में appear होता है) और इसका character encoding। <body> visible content को hold करता है। यह split, page के बारे में information बनाम page की content, हर document की पहली structural decision है।

Ordering को note करें और यह क्यों महत्वपूर्ण है: <meta charset> head में पहले आता है इसलिए parser को पता है कि बाकी के bytes को कैसे decode करना है इससे पहले कि यह उन्हें read करता है। <html> पर lang attribute screen readers और translation tools को inform करता है। यह सब decoration नहीं है। Head यह configure करता है कि document को कैसे parse और समझा जाता है, और body वह content है जो वह configuration apply करता है। अगला chapter, अपना पहला HTML page पर, इस skeleton को line by line लेता है।

Junoआपका पहली बार एक पूरे page को देखना हर page एक छोटे, repeating skeleton से build होता है: एक doctype, फिर <html> एक <head> और एक <body> को wrap करता है। Head behind-the-scenes info है, body वह है जो लोग देखते हैं। आप यह properly अगले ले जाएंगे, इसलिए अभी एक quick look सब कुछ है जो आपको चाहिए।

Junoआपका पहली बार एक पूरे page को देखना Core split head में metadata है, body में visible content है। लगभग हर document जो आप लिखते हैं इसी exact shape से शुरू होता है, इसलिए recognition पर sight करना worth है। अगला chapter हर line को walks करता है।

Junoआपका पहली बार एक पूरे page को देखना Skeleton एक reason के लिए ordered है: charset content से पहले इसलिए parser बाकी को decode कर सकता है, lang assistive tech और translation के लिए। इसे filler में से कोई भी treat न करें। Structure और अभी समझें और head magic की एक block महसूस करना बंद हो जाता है जो आप paste करते हैं।