HTML फ़ॉर्मेटर और ब्यूटिफ़ायर
बिखरा हुआ HTML पेस्ट करें और उसे सुव्यवस्थित करें (साफ़ इंडेंट, हर लाइन में एक टैग) या छोटा करें (सब कुछ एक ही लाइन में)। स्टेटस लाइन बताती है कि कोई टैग खुला छूट गया है या ग़लत जगह बंद हुआ है, और साथ में लाइन संख्या भी देती है। सब कुछ आपके अपने डिवाइस पर चलता है — आप जो पेस्ट करते हैं, वह कभी आपके ब्राउज़र से बाहर नहीं जाता।
यह HTML फ़ॉर्मेटर कैसे काम करता है
टूल आपके HTML को एक-एक अक्षर करके पढ़ता है और उसे टुकड़ों में बाँटता है: खुलने वाले टैग, बंद होने वाले टैग, खाली टैग, सादा टेक्स्ट, नोट्स, डॉकटाइप लाइन, और वे चार ब्लॉक जिनकी सामग्री हूबहू कॉपी की जाती है। फिर वह इन टुकड़ों को दोबारा लिखता है — हर बार कोई टैग खुलने पर एक कदम दाईं ओर खिसकता है और बंद होने पर एक कदम वापस आता है, इसलिए कोई लाइन बाईं ओर से कितनी दूर है, उससे पता चलता है कि वह कितनी गहराई में नेस्टेड है। क्योंकि यह कुछ फेंकने के बजाय इन्हीं टुकड़ों पर काम करता है, आपकी फ़ाइल में से कुछ भी खोता नहीं — आपके एट्रिब्यूट अपना क्रम, अपने कोट्स और अपनी स्पेसिंग बनाए रखते हैं, और आपके नोट्स बिना छुए आगे आते हैं। मिनिफ़ाई इसका उल्टा करता है: यह टैग्स के बीच के स्पेस और लाइन ब्रेक हटा देता है ताकि फ़ाइल एक छोटी-सी लाइन बन जाए, लेकिन हर वह स्पेस बनाए रखता है जो किसी विज़िटर को सच में दिखता है।
ब्यूटिफ़ाई बनाम मिनिफ़ाई बनाम संरचना जाँच
| बटन | यह क्या करता है | इसे कब इस्तेमाल करें… |
|---|---|---|
| ब्यूटिफ़ाई | लाइन ब्रेक और इंडेंट जोड़ता है (2 स्पेस, 4 स्पेस या एक टैब)। | जब आपको ऐसा HTML पढ़ना या ठीक करना हो जो एक लंबी लाइन में आया हो। |
| मिनिफ़ाई | टैग्स के बीच के स्पेस हटाता है; लोगों को दिखने वाले स्पेस बनाए रखता है। | जब आपको भेजने या सहेजने के लिए सबसे छोटी फ़ाइल चाहिए। |
| संरचना जाँच | हर बार टाइप करने पर चलती है और टैग की पहली गड़बड़ी को उसकी लाइन संख्या के साथ बताती है। | जब कोई टैग अपनी जगह पर नहीं है और आप ढूँढ नहीं पा रहे कि कौन-सा। |
यह जाँच अपने-आप चलती है, इसलिए आपको यह दोनों मोड में मिलती है। यह सिर्फ़ यह देखती है कि आपके टैग सही क्रम में खुलते और बंद होते हैं या नहीं — यह पूरा HTML वैलिडेटर नहीं है, और यह नहीं बताएगी कि कोई एट्रिब्यूट नाम असली है या नहीं, या आपका पेज स्टैंडर्ड के हर नियम पर खरा उतरता है या नहीं।
एक उदाहरण, क़दम-दर-क़दम
यह रहा एक छोटा-सा मेन्यू, ठीक उसी हालत में जैसा कोई बिल्ड टूल उसे छोड़ता है — सब कुछ एक लाइन में, एक भी फ़ालतू स्पेस नहीं:
<ul class="menu"><li><a href="/">Home</a></li><li><a href="/tools/">Tools</a></li></ul>2 स्पेस वाले इंडेंट के साथ ब्यूटिफ़ाई दबाएँ, और आपको यह मिलता है:
<ul class="menu">
<li><a href="/">Home</a></li>
<li><a href="/tools/">Tools</a></li>
</ul>तीन बातों पर ध्यान दें। हर लिस्ट आइटम अपनी अलग लाइन पर है और लिस्ट से दो स्पेस अंदर है, जिससे दिखता है कि वह लिस्ट का हिस्सा है। लिंक अपने लिस्ट आइटम वाली लाइन पर ही रहता है, क्योंकि उसे तोड़ने से तैयार पेज पर एक ऐसा स्पेस आ जाता जो पहले नहीं था। और बंद होने वाले टैग अपने खुलने वाले टैग के ठीक नीचे आते हैं — इसी से कोई ग़ायब टैग तुरंत नज़र में आ जाता है। अब सुव्यवस्थित वर्ज़न पर मिनिफ़ाई दबाएँ, और आपको पहली लाइन फिर से मिल जाती है, अक्षर-दर-अक्षर:
<ul class="menu"><li><a href="/">Home</a></li><li><a href="/tools/">Tools</a></li></ul>HTML टैग संदर्भ
हर टैग के साथ एक जैसा बर्ताव नहीं होता, और ऐसा जान-बूझकर है। यह पूरी सूची है कि फ़ॉर्मेटर हर तरह के टैग के साथ क्या करता है।
| टैग का प्रकार | कौन-कौन से | फ़ॉर्मेटर क्या करता है |
|---|---|---|
| खाली ("void") टैग | area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr | इन 13 टैग्स के, और पुराने हो चुके param के, अंदर कुछ नहीं होता। टूल इनके लिए कभी बंद करने वाला टैग नहीं जोड़ता और इनके नीचे कभी कुछ इंडेंट नहीं करता। |
| हूबहू कॉपी होने वाले ब्लॉक | <script>, <style>, <pre>, <textarea> | खुलने और बंद होने वाले टैग के बीच का सब कुछ ठीक वैसा ही कॉपी होता है। अंदर के स्पेस, टैब और लाइन ब्रेक को कभी छुआ नहीं जाता, क्योंकि उन्हें बदलने से आपका कोड या आपका पेज बदल जाएगा। |
| शब्दों की लाइन के बीच रहने वाले टैग | <a>, <b>, <br>, <code>, <em>, <img>, <small>, <span>, <strong>, <sub>, <sup> | ये आसपास के शब्दों वाली लाइन पर ही रहते हैं। इन्हें अलग लाइन पर ले जाने से तैयार पेज पर एक स्पेस जुड़ जाएगा, इसलिए टूल ऐसा नहीं करता। |
| सामान्य टैग | <div>, <p>, <ul>, <table>, <section>, <header>, <form> | हर टैग नई लाइन से शुरू होता है, और उसके अंदर का सब कुछ एक कदम दाईं ओर खिसक जाता है। इसी से पेज का ढाँचा आसानी से दिखता है। |
| लोगों के लिए नोट्स | <!-- a note --> | नोट्स हूबहू कॉपी होते हैं — पुराने <!--[if IE]> वाले नोट्स भी, जिन्हें सिर्फ़ Internet Explorer पढ़ता था। |
| पहली लाइन | <!DOCTYPE html> | ब्राउज़र को बताती है कि यह एक आधुनिक HTML पेज है। इसे हूबहू कॉपी किया जाता है और यह हमेशा अपनी अलग पहली लाइन पर रहती है। |
| टैग जिन्हें आप खुला छोड़ सकते हैं | li, p, tr, td, th, dt, dd, option, thead, tbody | HTML आपको इन टैग्स का बंद करने वाला टैग छोड़ने देता है, इसलिए उसका न होना सामान्य है और उसे कभी ग़लती के रूप में नहीं बताया जाता। |
संरचना जाँच आपको क्या बताएगी
- कभी बंद न होने वाला टैग — आपको टैग का नाम और वह लाइन मिलती है जिस पर उसे खोला गया था।
- ग़लत जगह पर बंद करने वाला टैग — जैसे, किसी पैराग्राफ़ को तब बंद करना जब कोई बोल्ड टैग अभी खुला हो। आपको दोनों लाइन संख्याएँ मिलती हैं।
- ऐसा बंद करने वाला टैग जिसके पास बंद करने को कुछ नहीं — आम तौर पर कॉपी-पेस्ट से बचा रह गया टुकड़ा।
- हूबहू कॉपी होने वाला ऐसा ब्लॉक जो कभी ख़त्म नहीं होता — बिना बंद करने वाले टैग का script या style ब्लॉक बाक़ी पूरे पेज को निगल जाता है, और इसे पकड़ने का यही सबसे तेज़ तरीका है।
सिर्फ़ पहली गड़बड़ी दिखाई जाती है, क्योंकि HTML में एक ग़लत जगह रखा टैग आम तौर पर उसके बाद की हर चेतावनी की वजह बनता है। पहली ठीक करें, और बाक़ी आम तौर पर अपने-आप हट जाती हैं।
आम इस्तेमाल
- "view source" से सहेजा या कॉपी किया गया पेज पढ़ना, जो लगभग हमेशा एक ही लाइन में आता है।
- किसी ई-मेल टेम्पलेट या CMS ब्लॉक को वर्ज़न कंट्रोल में डालने से पहले साफ़ करना, ताकि अगला बदलाव एक छोटे, पढ़ने लायक़ अंतर के रूप में दिखे।
- किसी स्निपेट को साइज़ की सीमा वाली जगह पर पेस्ट करने से पहले छोटा करना, और बाद में उस पर काम करने के लिए उसे फिर से सुव्यवस्थित करना।
- वह एक बिना बंद हुआ
divढूँढना जिसने आपके आधे लेआउट को ग़लत जगह धकेल दिया है।
प्राइवेसी
फ़ॉर्मेटर पूरी तरह आपके अपने डिवाइस पर चलता है। आपका HTML आपके अपने ब्राउज़र के अंदर ही पढ़ा और दोबारा लिखा जाता है, कभी किसी सर्वर पर नहीं भेजा जाता, और न सहेजा जाता है न लॉग किया जाता है — इसलिए यह काम की फ़ाइलों और किसी भी निजी चीज़ के लिए सुरक्षित है, और पेज लोड होने के बाद नेटवर्क बंद होने पर भी काम करता रहता है।
अक्सर पूछे जाने वाले सवाल
- HTML फ़ॉर्मेटर या ब्यूटिफ़ायर क्या करता है?
- यह आपके HTML को फिर से ऐसे रूप में ले आता है जिसे कोई इंसान पढ़ सके। बिल्ड टूल, टेम्पलेट इंजन या "view source" से कॉपी किए गए पेज अक्सर एक बहुत लंबी लाइन में ठुँसे होते हैं, जिनसे हर स्पेस हटा दिया गया होता है। फ़ॉर्मेटर हर टैग को उसकी अपनी लाइन पर रखता है और किसी टैग के अंदर के टैग्स को एक कदम दाईं ओर खिसका देता है, ताकि आप एक नज़र में देख सकें कि कौन-सा हिस्सा किसके अंदर है। यह आपकी सामग्री नहीं बदलता: टैग के नाम, एट्रिब्यूट, कोट्स, नोट्स और टेक्स्ट सब ठीक वैसे ही आते हैं जैसे आपने लिखे थे। सिर्फ़ टैग्स के बीच के स्पेस और लाइन ब्रेक दोबारा लिखे जाते हैं, और आप चुनते हैं कि वे 2 स्पेस हों, 4 स्पेस हों या एक टैब।
- क्या HTML को सुव्यवस्थित करने या छोटा करने से मेरा पेज दिखने में बदल जाएगा?
- इसे इस तरह बनाया गया है कि ऐसा न हो। ब्राउज़र पेज के अंदर स्पेस, टैब और लाइन ब्रेक के किसी भी सिलसिले को एक ही स्पेस मानता है, इसलिए टैग्स को नई लाइनों पर ले जाना आम तौर पर सुरक्षित है। सिर्फ़ एक जगह यह सुरक्षित नहीं है: शब्दों की लाइन के अंदर बैठे टैग्स के बीच, जैसे किसी लिंक के बगल में बोल्ड टैग — वहाँ लाइन ब्रेक जोड़ने से तैयार पेज पर एक फ़ालतू स्पेस दिखने लगेगा। यह टूल ऐसे टैग्स के पूरे सिलसिले को एक ही लाइन पर साथ रखता है, और जहाँ आपने स्पेस रखा था वहाँ असली स्पेस बनाए रखता है। यह script, style, pre और textarea ब्लॉक्स के अंदर की स्पेसिंग को भी कभी नहीं छूता, क्योंकि वह स्पेसिंग उन ब्लॉक्स के मतलब का हिस्सा है।
- script, style, pre और textarea के अंदर का कोड क्यों नहीं छेड़ा जाता?
- क्योंकि इन चार ब्लॉक्स में स्पेसिंग का मतलब होता है, और इन्हें दोबारा इंडेंट करने से आपका पेज टूट सकता है। pre ब्लॉक टेक्स्ट को ठीक वैसा ही दिखाता है जैसा टाइप किया गया था, इसलिए उसमें दिखने वाला हर स्पेस जान-बूझकर रखा गया है; और textarea अपनी सामग्री को एक बदले जा सकने वाले बॉक्स में दिखाता है, इसलिए कोई भटका हुआ टैब उस बॉक्स में दिखने लगेगा। style ब्लॉक CSS है और script ब्लॉक JavaScript — इनमें से कोई भी HTML है ही नहीं, इसलिए किसी HTML टूल का इन्हें फिर से जमाने से कोई लेना-देना नहीं। यह टूल खुलने वाला टैग पढ़ता है, उससे मेल खाने वाले बंद टैग तक सब कुछ अक्षर-दर-अक्षर कॉपी करता है, और आगे बढ़ जाता है। इसी वजह से आपके JavaScript के अंदर का "से छोटा" चिह्न इसे कभी भ्रमित नहीं करता।
- संरचना जाँच किन चीज़ों को देखती है, और क्या यह वैलिडेटर है?
- यह एक तेज़ सरसरी जाँच है, पूरा वैलिडेटर नहीं। जैसे-जैसे आप टाइप करते हैं, यह आपके टैग्स से होकर गुज़रती है और याद रखती है कि कौन-से टैग अभी खुले हैं। यह आपको तीन बातें बताती है: ऐसा टैग जो खोला गया पर कभी बंद नहीं हुआ, ऐसा बंद करने वाला टैग जो उस टैग से मेल नहीं खाता जिसे उसे बंद करना था, और ऐसा बंद करने वाला टैग जिससे मेल खाने के लिए कोई टैग खुला ही नहीं है। हर गड़बड़ी लाइन संख्या के साथ बताई जाती है ताकि आप सीधे उस पर पहुँच सकें। यह जानती है कि br और img जैसे खाली टैग्स को बंद करने वाले टैग की ज़रूरत नहीं होती, और HTML आपको li, p, tr और td को खुला छोड़ने देता है, इसलिए यह उनके बारे में चेतावनी नहीं देगी। यह नहीं जाँचती कि आपके एट्रिब्यूट नाम असली हैं या नहीं, या आपका पेज पूरे HTML स्टैंडर्ड पर खरा उतरता है या नहीं।
- क्या br और img जैसे खाली टैग्स में बंद करने वाला स्लैश ज़रूरी है?
- नहीं। HTML में 13 खाली टैग — area, base, br, col, embed, hr, img, input, link, meta, source, track और wbr, साथ में पुराना हो चुका param — अपने अंदर कुछ नहीं रख सकते, इसलिए बंद करने को कुछ है ही नहीं। क्लोज़िंग ब्रैकेट से पहले स्लैश लिखने की इजाज़त है और हर ब्राउज़र उसे अनदेखा कर देता है, इसीलिए पुराने कोड में यह इतना ज़्यादा मिलता है: यह XHTML से आया है, जहाँ स्लैश ज़रूरी था। दोनों तरीके काम करते हैं, इसलिए आपने जो भी लिखा हो, यह टूल उसे ठीक वैसा ही छोड़ देता है। यह कभी इनमें से किसी के लिए बंद करने वाला टैग अपनी ओर से नहीं जोड़ेगा, क्योंकि किसी खाली एलिमेंट का बंद करने वाला टैग एक असली ग़लती है, जिस पर कुछ टूल शिकायत करते हैं।
- क्या मेरा HTML कहीं भेजा जाता है?
- नहीं। पूरा टूल सादे JavaScript का एक छोटा-सा हिस्सा है जो आपके अपने डिवाइस पर चलता है। आप जो पेस्ट करते हैं वह आपके सामने वाले पेज में ही रहता है: न कोई अपलोड, न पीछे कोई सर्वर, न कुछ सहेजा जाता है, न कुछ लॉग में लिखा जाता है। इसलिए यह काम की फ़ाइलों, अधूरे पेजों, ई-मेल टेम्पलेट्स और ऐसी किसी भी चीज़ के लिए सुरक्षित है जिसमें किसी ग्राहक का नाम या कोई गुप्त कुंजी हो। इसका यह भी मतलब है कि पेज एक बार लोड हो जाने के बाद नेटवर्क बंद होने पर भी यह काम करता रहता है, और बहुत बड़ी फ़ाइल की सीमा सिर्फ़ आपका अपना डिवाइस है, कोई अपलोड सीमा नहीं।