HTML ब्यूटिफिकेशन कैसे काम करती है
ब्यूटिफायर आपके मार्कअप को tag by tag पढ़ता है, यह track करता है कि हर element कितना deeply nested है, और उसे consistent indentation के साथ फिर से emit करता है। यह कभी नहीं बदलता कि page क्या render करता है — केवल यह बदलता है कि source कैसा laid out है।
- टैग पार्स करें. लाइब्रेरी आपके input को tokens की stream में scan करती है: opening tags, closing tags, text content, comments, और script और style blocks की सामग्री। Quoted attribute values और pre तथा textarea elements के bodies एकल इकाइयों के रूप में treated होती हैं, इसलिए उनके अंदर का whitespace अकेला छोड़ दिया जाता है।
- Nesting track करें. जैसे-जैसे यह token stream पर चलता है, ब्यूटिफायर एक running indent level रखता है। हर opening tag जो self-closing नहीं है level को एक step deeper push करता है; हर matching closing tag उसे वापस pop करता है। वह depth तय करती है कि आपको वापस मिलने वाली हर line के सामने कितने indent units होंगे।
- अपने options लागू करें. आपका indent choice — 2 spaces, 4 spaces, या tab — एक level की चौड़ाई निर्धारित करता है। Wrap-at-column value attributes या text की लंबी lines को उस column के बाद break करती है जो आप चुनते हैं। Blank-line cap लंबी empty lines को आपके निर्धारित limit तक collapse करता है।
- मार्कअप पुनः उत्सर्जित करें. अंत में formatter उन indentation और line breaks के साथ tags को वापस print करता है जो उसने तय किए हैं। यदि आपने inline formatting चालू किया है, तो हर style block की सामग्री CSS formatter से और हर script block की सामग्री JS formatter से गुज़रती है, ताकि embedded code उसके आसपास के मार्कअप के साथ align हो।
HTML ब्यूटिफाई क्यों करें
- Minified pages पढ़ें. Production HTML bytes बचाने के लिए line breaks हटाकर ship होती है। ब्यूटिफाई करने से structure वापस आता है ताकि आप वह section खोज सकें जो चाहते हैं, एक missing closing tag देख सकें, और यह follow कर सकें कि document वास्तव में कैसे nested है।
- असंगत templates व्यवस्थित करें. जिस मार्कअप को कई लोगों ने edit किया है वह mixed indentation और tag placement में drift हो जाता है। ब्यूटिफायर से एक pass पूरी file को normalize करता है, इसलिए अगला commit वह change दिखाता है जो आपने किया बजाय reformatted whitespace की दीवार के।
- यह आपके page को slow नहीं करता. अधिकतर online formatters page खुलते ही अपनी पूरी library load करते हैं। यह टूल js-beautify को केवल तभी fetch करता है जब आप Beautify click करें या Live mode चालू करें, इसलिए पहला load कुछ kilobytes का होता है न कि कुछ सौ का और page तेज़ रहता है।
- कुछ भी आपके browser से नहीं जाता. पूरा काम आपके device पर होता है। आपका मार्कअप कभी server पर upload नहीं होता, जो तब महत्वपूर्ण है जब page किसी client का हो, internal URLs हों, या आपने कोई confidentiality agreement sign की हो।
सामान्य अनुप्रयोग
HTML ब्यूटिफाई करना तब उपयोगी होता है जब किसी को ऐसा मार्कअप पढ़ना हो जो पढ़ने के लिए नहीं लिखा गया था।
- Live page inspect करना: View Source से minified source paste करें ताकि उस layout bug के पीछे का मार्कअप खोज सकें जिसे आप locally reproduce नहीं कर सकते।
- CMS output cleanup: एक template को reformat करें जिसे page builder ने एक line पर export किया था, उसे repository में commit करने से पहले।
- Accessibility और SEO reviews: document expand करें ताकि heading order, landmark structure, और alt attributes को real DOM के विरुद्ध check कर सकें।
एक व्यावहारिक उदाहरण
एक minified snippet लें: <div><p>hi</p><span>x</span></div>। इसे ऊपर 2 spaces indentation के साथ paste करें, फिर Beautify click करें। आपको एक readable block मिलता है: <div> अपनी line पर, <p>hi</p> और <span>x</span> उसके नीचे एक level indented, और matching </div> नीचे aligned। Indentation को Tabs में switch करें और हर level two spaces से tab में shift हो जाता है। एक <style>a{color:red}</style> block जोड़ें, "Inline CSS और JS भी format करें" चालू करें, और rule अपनी indented lines पर expand हो जाता है।
FAQ
क्या यह मेरे browser में चलता है?
हाँ। js-beautify library पहली बार Beautify click करने या Live mode enable करने पर fetch होती है, फिर cached हो जाती है। आपका मार्कअप page से कभी नहीं जाता — कोई server round-trip नहीं, कोई upload नहीं।
क्या ब्यूटिफाई करने से मेरा page अलग render होगा?
नहीं। ब्यूटिफायर केवल tags के बीच whitespace और line breaks जोड़ता और हटाता है। Browser page build करते समय उस whitespace को ignore करता है, इसलिए rendered result identical होता है। एकमात्र बात ध्यान देने की है pre, textarea, या inline elements के अंदर whitespace-sensitive content, जिसे formatter जानबूझकर untouched छोड़ता है।
Inline CSS और JS toggle क्या करता है?
बंद होने पर style और script blocks की सामग्री बिल्कुल वैसी ही रहती है जैसी आपने paste की। चालू करने पर हर style block के अंदर CSS formatter चलता है और हर script block के अंदर JS formatter, ताकि embedded code आसपास के मार्कअप के साथ match करके indented हो।
"Wrap at column" क्या करता है?
यह वह line length निर्धारित करता है जिस पर कई attributes वाला tag, या text का लंबा run, multiple lines पर break होता है। 0 रखें ताकि हर element एक ही line पर रहे चाहे कितना भी लंबा हो। 80 या 120 set करें और formatter उस column के बाद की हर चीज़ wrap करता है, जिससे wide elements संकीर्ण editor में readable रहते हैं।
Browser-side HTML ब्यूटिफिकेशन आपको build step या upload के बिना readable मार्कअप देती है। एक minified या अव्यवस्थित page paste करें, अपना indentation और wrap width चुनें, decide करें कि inline CSS और JS reformat करना है या नहीं, फिर result copy या download करें। कुछ भी आपके device से नहीं जाता, कोई account नहीं, और library तभी load होती है जब आप कहें — इसलिए यह page खोलने पर megabyte नहीं, कुछ kilobytes खर्च होते हैं।