मुफ़्त HTML फ़ॉर्मेटर और ब्यूटीफ़ायर

HTML फ़ॉर्मेटिंग क्या है?

HTML फ़ॉर्मेटिंग (जिसे «beautification» या «pretty-printing» भी कहते हैं) minification का उल्टा है। एक फ़ॉर्मेटर किसी भी रूप में HTML लेता है, minified प्रोडक्शन आउटपुट, ब्राउज़र इंस्पेक्टर से कॉपी-पेस्ट की हुई, टेम्पलेट इंजन से उत्पन्न, या केवल हाथ से बेढ़ंगी ढंग से लिखी हुई, और उसे संगत indentation, ब्लॉक तत्वों के बीच लाइन ब्रेक, और एक पूर्वानुमेय दृश्य संरचना के साथ फिर से उत्सर्जित करता है। ब्राउज़र पार्स समय पर अतिरिक्त whitespace को अनदेखा करते हैं, इसलिए फ़ॉर्मेटिंग बदलती है कि स्रोत कैसा दिखता है पर कभी नहीं बदलती कि पृष्ठ कैसे रेंडर होता है। बोझ क्यों उठाएँ? क्योंकि मानव आँखें indented पदानुक्रम को दृश्य रूप से सपाट टैग सूप से तेज़ी से पार्स करती हैं। कोड समीक्षा, डिबगिंग, HTML संरचना सीखना, markup को किसी अन्य डेवलपर को सौंपना, परिवर्तनों के लिए दो संस्करणों की तुलना करना, सब काफ़ी आसान हो जाता है जब दस्तावेज़ का पेड़ indentation से दृश्य रूप से स्पष्ट होता है।

वास्तविक दुनिया के पाँच कार्यप्रवाह जहाँ एक फ़ॉर्मेटर अपनी जगह कमाता है: (1) minified प्रोडक्शन HTML जो ब्राउज़र के «View Source» या DevTools के «Copy outer HTML» से किसी डिबगर में वापस चिपकाया जाता है; (2) CMS textarea से निकाला गया HTML जहाँ WYSIWYG संपादक ने दृश्य रूप से साफ़ आउटपुट पर अव्यवस्थित स्रोत उत्पन्न किया; (3) टेम्पलेट इंजन आउटपुट (Jinja, Twig, Handlebars, ERB) की डिबगिंग जहाँ रेंडर किया गया HTML आपकी अपेक्षा से मेल नहीं खाता; (4) कोड समीक्षा के लिए ऑटो-जेनरेटेड HTML (React सर्वर-साइड रेंडरिंग, Pandoc, दस्तावेज़ कनवर्टर) को पठनीय रूप में बदलना; (5) ईमेल टेम्पलेट HTML को साफ़ करना उससे पहले कि उसे एक मार्केटिंग प्लेटफ़ॉर्म को सबमिट किया जाए जो आयात पर आपकी फ़ॉर्मेटिंग को छीन सकता है।

प्रमुख HTML फ़ॉर्मेटर

js-beautify (Einar Lielmanis, 2007 से आगे) JavaScript पारिस्थितिकी तंत्र का लंबे समय से स्थापित फ़ॉर्मेटर है, एक ही लाइब्रेरी से HTML, CSS, JavaScript और JSON संभालता है। HTML फ़ॉर्मेटर वही है जो beautifier.io के सार्वजनिक चेहरे को चलाता है और जिसने ऐतिहासिक रूप से दर्जनों «format HTML online» साइटों को बैकअप दिया। Prettier (James Long, 2017) राय-वाला फ़ॉर्मेटर है जो आधुनिक फ्रंटएंड पारिस्थितिकी तंत्र पर हावी होने आया; HTML समर्थन लॉन्च के तुरंत बाद आया। Prettier का डिज़ाइन दर्शन «लगभग कोई कॉन्फ़िगरेशन नहीं» है, एक indent शैली (डिफ़ॉल्ट 2 स्पेस), एक लाइन-चौड़ाई लक्ष्य (printWidth: 80), एक सेट विशेषता-आवरण नियम। ट्रेड-ऑफ़ है bikeshedding के बिना टीमों के बीच संगति; लागत है कम व्यक्तिगत लचीलापन। HTML Tidy (Dave Raggett ने 1997 में W3C में, अब HTACG द्वारा अनुरक्षित) मूल है, यह वेब के आधुनिक फ़ॉर्मेटर दृश्य से पहले का है और मूल रूप से 1990 के दशक के अंत के पुराने, टूटे, अप्रचलित HTML को साफ़ करने के लिए डिज़ाइन किया गया था। Tidy अभी भी macOS पर डिफ़ॉल्ट रूप से (/usr/bin/tidy) और अधिकांश Linux वितरणों पर आता है; 2026 में कम सामान्य रूप से उपयोग होता है पर अपनी कठोरता के लिए अभी भी सम्मानित। आधुनिक कार्यप्रवाह में, Prettier नए प्रोजेक्टों के लिए डिफ़ॉल्ट है, VS Code (HTML फ़ाइलों के लिए डिफ़ॉल्ट फ़ॉर्मेटर), JetBrains IDEs, और Husky + lint-staged के माध्यम से pre-commit hooks में एकीकृत। यह उपकरण उन मामलों के लिए है जहाँ आपके पास Prettier चलाने वाला बिल्ड पाइपलाइन नहीं है, चिपकाओ, फ़ॉर्मेट करो, बाहर कॉपी करो।

Indentation परंपराएँ

आधुनिक HTML में तीन indentation शैलियाँ प्रतिस्पर्धा करती हैं। 2 स्पेस आधुनिक वेब डिफ़ॉल्ट है, GitHub के HTML/CSS Style Guide, Google HTML/CSS Style Guide, Prettier का डिफ़ॉल्ट, WHATWG शैली उदाहरण और npm पर प्रकाशित अधिकांश फ्रंट-एंड पैकेज इसे उपयोग करते हैं। तर्क: HTML गहराई से नेस्ट होता है (एक विशिष्ट घटक 6-10 indentation स्तर हो सकता है), और 2 स्पेस लाइनों को 80-कॉलम डिस्प्ले के दाएँ किनारे से बाहर भागने से रोकते हैं। 4 स्पेस पुरानी Java / Microsoft परंपरा है जो कुछ legacy प्रोजेक्टों और PSR-12 PHP मानक में बची है; क्षैतिज स्थान की लागत पर दृश्य रूप से स्पष्ट पदानुक्रम पैदा करती है। Tabs को Linux कर्नेल समुदाय, कुछ Go प्रोजेक्टों और उन डेवलपरों द्वारा पसंद किया जाता है जो तर्क देते हैं कि tab वर्ण प्रत्येक देखने वाले को अपनी दृश्य चौड़ाई पसंद सेट करने देते हैं। «tabs vs spaces» तर्क अधिकांश पाठकों से पुराना है और जीता नहीं जा सकता; व्यावहारिक उत्तर है प्रति प्रोजेक्ट एक चुनना और अपने फ़ॉर्मेटर को इसे लागू करने देना। यह उपकरण तीनों प्रदान करता है।

Inline बनाम Block तत्व, whitespace का जाल

HTML फ़ॉर्मेटिंग में सबसे बड़ा एकल gotcha block-स्तरीय और inline तत्वों के बीच का भेद है। Block तत्व (<div>, <p>, <section>, <article>, <ul>) पैराग्राफ-शैली ब्लॉकों के रूप में बहते हैं; उनके बीच का whitespace कुछ भी दृश्य के रूप में रेंडर नहीं होता, इसलिए एक फ़ॉर्मेटर उनके चारों ओर स्वतंत्र रूप से लाइन ब्रेक और indentation जोड़ सकता है। Inline तत्व (<span>, <a>, <strong>, <em>, <code>) पाठ के भीतर बहते हैं; उनके बीच का whitespace रेंडर होता है। <p>Hello <strong>world</strong>!</p> पर विचार करें: «Hello» और खुलने वाले <strong> के बीच का स्पेस एक असली स्पेस वर्ण है जो शब्दों के बीच दिखाई देगा। यदि एक भोला फ़ॉर्मेटर उस लाइन को तोड़े और <strong> को उसकी अपनी लाइन पर indent करे, तो रेंडर आउटपुट चुपचाप दृश्य whitespace प्राप्त करता है और अब «Hello world» एक अतिरिक्त स्पेस के साथ पढ़ सकता है। बदतर, फ़ॉर्मेटर जो inline तत्वों के बीच whitespace छीनते हैं वे आसन्न शब्दों को मिला सकते हैं: «Helloworld» बिना स्पेस। «inline tags सुरक्षित रखें» विकल्प (यहाँ डिफ़ॉल्ट चालू) फ़ॉर्मेटर को बताता है कि inline तत्वों को उनके आसपास के पाठ के साथ उसी लाइन पर रखे, अधिकांश वास्तविक दुनिया के HTML के लिए सुरक्षित व्यवहार।

संरक्षित सामग्री, pre, textarea, script, style

चार HTML तत्वों के पास whitespace-महत्वपूर्ण सामग्री है जिसे फिर से फ़ॉर्मेट नहीं करना चाहिए: <pre> पाठ को ठीक वैसे ही दिखाता है जैसे लिखा है, लाइन ब्रेक और स्पेस सहित; <textarea> की प्रारंभिक सामग्री whitespace से बचती है; <script> में JavaScript है जिसका सिमेंटिक्स whitespace पर निर्भर करता है (या कम से कम जहाँ indent जोड़ने से स्रोत भ्रष्ट होगा); <style> में CSS है जिसे CSS-aware फ़ॉर्मेटर द्वारा फिर से फ़ॉर्मेट किया जाना चाहिए, HTML द्वारा नहीं। प्रोडक्शन HTML फ़ॉर्मेटर (Prettier, Tidy, js-beautify) इन तत्वों का पता लगाते हैं और उनकी सामग्री को फिर से फ़ॉर्मेट करना छोड़ देते हैं। इस उपकरण के लिए ईमानदार प्रकटीकरण: कार्यान्वयन एक प्रोडक्शन लाइब्रेरी को लपेटने के बजाय हाथ से बनाया गया है, और inline-vs-block + संरक्षित-सामग्री हैंडलिंग रूढ़िवादी है पर पूरी तरह दोष-सहिष्णु नहीं। यदि आप भारी प्रोडक्शन HTML इसके माध्यम से चलाते हैं और आउटपुट <pre> ब्लॉक के अंदर ग़लत दिखता है या एक script तोड़ता है, तो सुरक्षित विकल्प है Prettier को स्थानीय रूप से उपयोग करें (यह एक-कमांड इंस्टॉल है: npm install -g prettier, फिर prettier --parser html input.html)। साधारण टेम्पलेट और घटक-स्तरीय HTML के लिए, यह उपकरण आम मामले संभालता है।

विशेषता और स्व-बंद टैग परंपराएँ

HTML विशेषताओं की अपनी फ़ॉर्मेटिंग विकल्प हैं। छोटी विशेषता सूचियाँ एक लाइन पर फ़िट होती हैं (<a href="/hi/about" class="link">); लंबी सूचियाँ प्रति लाइन एक लिपटी होती हैं, अक्सर बंद होने वाले > के साथ अपनी ही लाइन पर। Prettier का printWidth: 80 डिफ़ॉल्ट तब wrapping ट्रिगर करता है जब एक लाइन 80 वर्णों से अधिक होगी, जो आधुनिक परंपरा है। कुछ टीमें विशेषता क्रम लागू करती हैं (पहले class, फिर id, फिर data-*, फिर ARIA, फिर event handlers); अधिकांश फ़ॉर्मेटर मौजूदा विशेषता क्रम का सम्मान करते हैं बजाय पुनः-क्रमबद्ध करने के, क्योंकि पुनः-क्रमबद्ध करना सूक्ष्म मामलों (CSS विशिष्टता, JavaScript class lookups) में व्यवहार बदल सकता है। स्व-बंद टैग: HTML5 void तत्वों (<br>, <hr>, <img>, <input>, <meta>, <link>, HTML5 में कुल 14 void तत्व हैं) पर trailing slash की आवश्यकता नहीं है, पर XHTML और JSX को है (<br />)। फ़ॉर्मेटर या तो slash को संरक्षित करते हैं यदि मौजूद है, उसे हटा देते हैं (HTML5-clean), या उसे जोड़ देते हैं (XHTML-friendly), कॉन्फ़िगरेशन के आधार पर। यह उपकरण इनपुट का अनुसरण करता है, यदि आपका स्रोत <br /> उपयोग करता है, आउटपुट उसे रखता है; यदि आप <br> उपयोग करते हैं, आउटपुट उसे रखता है।

सामान्य उपयोग के मामले

• कोड समीक्षा · सहकर्मियों के साथ साझा करने से पहले HTML को साफ़ करें।
• डीबगिंग · अच्छी तरह फ़ॉर्मेट किया गया कोड लापता टैग या ग़लत नेस्टिंग को पहचानना आसान बनाता है।
• टेम्पलेट सफ़ाई · टेम्पलेट या बिल्ड टूल द्वारा जनरेट किए गए HTML को पुनः फ़ॉर्मेट करें।
• डेवलपर हैंडऑफ़ · एक ही प्रोजेक्ट पर काम कर रहे अन्य डेवलपर्स के लिए कोड को अधिक पठनीय बनाएँ।
• सीखना · इंडेंटेशन पैटर्न देखकर HTML संरचना को बेहतर समझें।
• ईमेल टेम्पलेट निरीक्षण। ईमेल-टेम्पलेट बिल्डर (Mailchimp, ConvertKit) अक्सर inline-स्टाइल HTML उत्पन्न करते हैं जो पढ़ना कठिन है; इसे फ़ॉर्मेट करना परिवर्तनों को सबमिट करने से पहले संरचना को दृश्य बनाता है।

आधुनिक पाइपलाइन, सेव पर Prettier

बिल्ड पाइपलाइन वाले प्रोजेक्टों के लिए, 2026 का डिफ़ॉल्ट है Prettier जो आपके संपादक में सेव पर और pre-commit hook के माध्यम से हर commit पर चलता है। VS Code Prettier को HTML के लिए डिफ़ॉल्ट फ़ॉर्मेटर के रूप में भेजता है जब एक्सटेंशन स्थापित होता है; Format Document (Windows/Linux पर Shift+Alt+F, macOS पर Shift+Option+F) के साथ ट्रिगर करें या सेटिंग्स में "editor.formatOnSave": true सक्षम करें। JetBrains IDEs (WebStorm, IntelliJ) Settings → Languages & Frameworks → JavaScript → Prettier के माध्यम से Prettier को एकीकृत करते हैं। Pre-commit hooks Husky + lint-staged के माध्यम से commit की अनुमति देने से पहले हर staged फ़ाइल पर Prettier चलाते हैं, सुनिश्चित करते हुए कि कोई unformatted HTML रिपॉज़िटरी तक न पहुँचे। CI checks फ़ॉर्मेटिंग drift पकड़ने के लिए pull requests पर prettier --check चलाते हैं। यह सब उन एक-बार के स्निपेट्स के लिए मायने नहीं रखता जो कहीं और से चिपकाए गए, यही इस in-browser उपकरण के लिए है। लंबी अवधि की प्रोजेक्ट कार्य के लिए, Prettier सेट करें; in-browser उपकरण बाकी सब के लिए घर्षण-मुक्त विकल्प है।

गोपनीयता: यहाँ केवल-ब्राउज़र क्यों मायने रखता है

HTML अक्सर ऐसी चीज़ें रखता है जिन्हें आप तीसरे पक्ष को नहीं दिखाना चाहते: आंतरिक admin उपकरण टेम्पलेट, अप्रकाशित उत्पाद पृष्ठ markup, class नामों में प्रयोग परिकल्पनाओं के साथ A/B-test वेरिएंट, व्यक्तिगत सामग्री वाले ईमेल टेम्पलेट, placeholder में PII वाले ग्राहक डैशबोर्ड। सर्वर-साइड फ़ॉर्मेटर आपके HTML को तीसरे-पक्ष सेवा पर अपलोड करते हैं जहाँ यह लॉग में बैठता है। यह उपकरण JavaScript के माध्यम से पूरी तरह आपके ब्राउज़र में चलता है, Format क्लिक करते समय DevTools के Network टैब में सत्यापित करें, या लोड होने के बाद पृष्ठ को ऑफ़लाइन (एयरप्लेन मोड) करें और फ़ॉर्मेटर अभी भी काम करता है। अप्रकाशित उत्पाद टेम्पलेट, आंतरिक admin पृष्ठ, A/B-test वेरिएंट, या किसी भी HTML के लिए सुरक्षित जिसे आप किसी अजनबी की हार्ड ड्राइव पर कॉपी नहीं देखना चाहते।

अक्सर पूछे जाने वाले प्रश्न

HTML सुंदरीकरण क्या है?

HTML सुंदरीकरण आपके कोड को इंडेंटेशन और लाइन ब्रेक जोड़कर अधिक पठनीय बनाने के लिए पुनः फ़ॉर्मेट करता है। यह पठन और डीबगिंग को सरल बनाता है।

क्या फ़ॉर्मेटिंग ब्राउज़र में मेरे HTML की उपस्थिति बदलती है?

नहीं। फ़ॉर्मेटिंग केवल स्पेस और इंडेंटेशन जोड़ता है। ब्राउज़र HTML में अतिरिक्त स्पेस को अनदेखा करते हैं। आपका फ़ॉर्मेट किया गया HTML उसी तरह रेंडर होता है।

इनलाइन टैग क्या हैं?

इनलाइन टैग (जैसे <span>, <a>, <strong>) टेक्स्ट में लाइन ब्रेक बनाए बिना डाले जाते हैं। "preserve inline" विकल्प उन्हें एक पंक्ति में रखता है।

2 स्पेस, 4 स्पेस, या tabs?

2 स्पेस आधुनिक वेब डिफ़ॉल्ट है, GitHub, Google HTML/CSS Style Guide, Prettier, WHATWG शैली उदाहरण और अधिकांश npm पैकेज इसे उपयोग करते हैं। 4 स्पेस पुरानी Java / Microsoft / PHP परंपराओं में बने हुए हैं। Tabs को Linux कर्नेल और कुछ Go प्रोजेक्टों द्वारा पसंद किया जाता है। तर्क अधिकांश पाठकों से पुराना है और जीता नहीं जा सकता; व्यावहारिक उत्तर है आपके प्रोजेक्ट के पहले से उपयोग किए जाने वाले (या टीम की प्रचलित परंपरा) से मेल खाना और एक फ़ॉर्मेटर को इसे लागू करने देना। प्रोजेक्ट संदर्भ के बिना एकल स्निपेट के लिए, 2 स्पेस 2026 में सबसे सुरक्षित डिफ़ॉल्ट है।

यदि मैं पहले से Prettier उपयोग करता हूँ तो क्या मुझे यह उपयोग करना चाहिए?

शायद नहीं, आपके संपादक का Prettier एकीकरण सेव पर यह कर रहा है, पूर्ण HTML AST जागरूकता और प्रोडक्शन फ़ॉर्मेटर जिस संरक्षित-सामग्री हैंडलिंग की आवश्यकता रखते हैं, उसके साथ। यह उपकरण उन मामलों के लिए है जिन्हें आपका बिल्ड पाइपलाइन कवर नहीं करता: ब्राउज़र इंस्पेक्टर से चिपकाया गया HTML, ईमेल या चैट से स्निपेट, टेम्पलेट इंजन आउटपुट जिसे आप निरीक्षण करना चाहते हैं, किसी भी प्रोजेक्ट संदर्भ के बाहर एक-बार की फ़ॉर्मेटिंग। लंबी अवधि के प्रोजेक्ट कार्य के लिए, Prettier को स्थानीय रूप से सेट करें; घर्षण-मुक्त एक-बार के काम के लिए, यह उपकरण सही आकार है।

क्या मेरी HTML फ़ाइलें अपलोड की जाती हैं?

नहीं। फ़ॉर्मेटिंग JavaScript के माध्यम से पूरी तरह आपके ब्राउज़र में चलती है। आप जो HTML चिपकाते हैं वह कभी नेटवर्क पार नहीं करता, Format क्लिक करते समय DevTools के Network टैब में सत्यापित करें, या लोड होने के बाद पृष्ठ को ऑफ़लाइन (एयरप्लेन मोड) करें और उपकरण अभी भी काम करता है। अप्रकाशित उत्पाद टेम्पलेट, आंतरिक admin पृष्ठ, A/B-test वेरिएंट, व्यक्तिगत सामग्री वाले ईमेल टेम्पलेट, या किसी भी HTML के लिए सुरक्षित जिसे आप किसी अजनबी की हार्ड ड्राइव पर कॉपी नहीं देखना चाहते।

संबंधित टूल