इस्तेमाल करने का तरीका
- इनपुट बॉक्स में HTML पेस्ट करें, .html फ़ाइल खोलें, या उदाहरण आज़माएं।
- इंडेंटेड, पठनीय मार्कअप के लिए सुंदर बनाएं चुनें या कॉम्पैक्ट आउटपुट के लिए मिनिफ़ाई करें।
- सुंदर बनाते समय 2 स्पेस, 4 स्पेस या टैब चुनें, और तय करें कि टिप्पणियां रखी जाएं या नहीं।
- परिणाम कॉपी करें या इसे .html फ़ाइल के रूप में डाउनलोड करें।
यह कैसे काम करता है
फ़ॉर्मेटर HTML को एक उदार टोकनाइज़र से पढ़ता है, बिल्कुल ब्राउज़र की तरह, और उसे फिर से लिखता है। यह इनपुट को कभी रेंडर नहीं करता, इसलिए पेस्ट किए गए कोड में स्क्रिप्ट नहीं चल सकतीं और वेब से कुछ भी लोड नहीं होता।
Beautify प्रत्येक ब्लॉक-स्तरीय तत्व (div, p, ul, li, section, table, …) को उसकी नेस्टिंग गहराई के अनुसार इंडेंट करके अलग पंक्ति पर रखता है। टेक्स्ट और इनलाइन तत्व जैसे a, b, em, span, code, img और br एक ही पंक्ति पर बने रहते हैं, इसलिए शब्दों और लिंक के बीच के रिक्त स्थान इस तरह नहीं बदलते कि रेंडर किए गए पेज में बदलाव आए। टेक्स्ट में लगातार रिक्त स्थान और पंक्ति विराम एक ही स्पेस बन जाते हैं, जैसा ब्राउज़र वैसे भी प्रदर्शित करता है।
pre, textarea, script और style तत्वों की सामग्री को हूबहू वैसे ही कॉपी किया जाता है जैसे लिखा गया हो, जिसमें उसका व्हाइटस्पेस और कोई भी < या > वर्ण शामिल हैं। br, img, input, meta और link जैसे वॉइड तत्वों को कभी क्लोज़िंग टैग नहीं मिलता। इनलाइन SVG में <path /> जैसे सेल्फ-क्लोज़िंग टैग सेल्फ-क्लोज़िंग ही रखे जाते हैं।
Minify टेक्स्ट में व्हाइटस्पेस को सिंगल स्पेस में बदल देता है, ब्लॉक तत्वों के आस-पास के व्हाइटस्पेस को हटा देता है, विशेषताओं के बीच के रिक्त स्थान को सामान्य करता है, और यदि “टिप्पणियाँ रखें” बंद है, तो टिप्पणियों को हटा देता है। सशर्त टिप्पणियाँ हमेशा रखी जाती हैं।
यह टूल अमान्य HTML को ठीक नहीं करता, गुम टैग नहीं जोड़ता, विशेषताओं को पुनः क्रमित नहीं करता, या style और script तत्वों के अंदर CSS और JavaScript को minify नहीं करता। जो तत्व खुले छोड़ दिए जाते हैं वे अपने पैरेंट के अंत में बंद कर दिए जाते हैं, और बिना मिलान वाले ओपनिंग टैग वाला क्लोज़िंग टैग जैसा लिखा है वैसा ही रखा जाता है।
उदाहरण
जनरेट किया गया मार्कअप पढ़ना
एक CMS एक टेम्पलेट को एक लंबी पंक्ति में आउटपुट करता है। 2 स्पेस के साथ Beautify करने पर नेविगेशन, सूची आइटम और मुख्य सामग्री इंडेंटेड ट्री के रूप में दिखते हैं, जबकि “कीमतों में <strong>VAT</strong> शामिल है।” एक पठनीय पंक्ति पर रहता है।
ईमेल टेम्पलेट तैयार करना
आकार घटाने के लिए टिप्पणियाँ बंद करके किसी HTML ईमेल को Minify करें। मूल्य तालिका वाला <pre> ब्लॉक और इनलाइन <style> बिल्कुल वैसे ही छोड़ दिए जाते हैं जैसे वे थे।
संरचना की जाँच करना
जब कोई क्लोज़िंग </div> गायब हो, तो Beautify किए गए आउटपुट में आगे के तत्व एक स्तर अधिक गहराई तक इंडेंट होकर दिखते हैं, जिससे यह देखना आसान हो जाता है कि तत्व कहाँ समाप्त होना चाहिए था।
अक्सर पूछे जाने वाले सवाल
क्या सुंदर बनाने से मेरा पेज अलग दिखेगा?
लगभग सभी मामलों में नहीं। ब्लॉक एलिमेंट्स के अंदर का व्हाइटस्पेस सिकुड़कर लाइन ब्रेक में बदल जाता है, जिसे ब्राउज़र अनदेखा कर देते हैं। टेक्स्ट और इनलाइन एलिमेंट्स एक ही लाइन पर रहते हैं, और pre, textarea, script और style को नहीं छुआ जाता। ऐसे पेज जो सामान्य एलिमेंट्स पर CSS white-space: pre पर निर्भर करते हैं, वे अपवाद हैं।
क्या यह पेज के अंदर की CSS और JavaScript को मिनिफ़ाई करता है?
नहीं। script और style की सामग्री को जैसा लिखा है वैसा ही रखा जाता है ताकि वह खराब न हो। स्टाइलशीट को अलग से मिनिफ़ाई करने के लिए CSS फ़ॉर्मेटर का उपयोग करें।
क्या किसी अनजान स्रोत से HTML पेस्ट करना सुरक्षित है?
हाँ। इनपुट को केवल टेक्स्ट के रूप में लिया जाता है और इसे कभी पेज में डाला नहीं जाता, इसलिए इसकी स्क्रिप्ट नहीं चलतीं और इसकी छवियां या लिंक लोड नहीं होते।
क्या यह मेरा HTML मान्य करता है?
नहीं। यह जानबूझकर लचीला है और टूटे मार्कअप को अस्वीकार करने के बजाय फ़ॉर्मेट करता है। बेमेल क्लोज़िंग टैग रखे जाते हैं, इसलिए इंडेंटेशन से आप उन्हें पहचान सकते हैं, लेकिन कोई त्रुटि सूची नहीं बनती।
गोपनीयता
आपका HTML केवल आपके ब्राउज़र में प्रोसेस होता है और कभी रेंडर या अपलोड नहीं होता। कुछ भी संग्रहीत नहीं किया जाता या एनालिटिक्स में शामिल नहीं किया जाता।