HTML फ़ॉर्मेटर — HTML को ऑनलाइन फ़ॉर्मेट करें

HTML फ़ॉर्मेटर कैसे इस्तेमाल करें

HTML मार्कअप पेस्ट करें।
इंडेंटेशन और एट्रिब्यूट रैपिंग चुनें।
फ़ॉर्मेट किया मार्कअप कॉपी करें या .html के रूप में डाउनलोड करें।

HTML फ़ॉर्मेटर की खूबियाँ

नेस्टेड ब्लॉक एलिमेंट को इंडेंट करता है; inline एलिमेंट अपने टेक्स्ट के साथ रहते हैं
<pre> और <textarea> का कंटेंट byte-दर-byte सुरक्षित रखता है
एम्बेड किए <style> को CSS फ़ॉर्मेटर से और <script> को JavaScript फ़ॉर्मेटर से फ़ॉर्मेट करता है
एट्रिब्यूट रैपिंग: कभी नहीं, सिर्फ़ लंबे टैग पर, या हर एट्रिब्यूट अलग लाइन पर
void एलिमेंट (<br>, <img>, <input> …) बिना क्लोज़िंग टैग के संभाले जाते हैं
कमेंट और IE conditional कमेंट रखता है; खाली लाइनें बनी रहती हैं
पूरे डॉक्यूमेंट और फ़्रैगमेंट, दोनों पर काम करता है

HTML फ़ॉर्मेटर का उदाहरण

एक फ़्रैगमेंट को फ़ॉर्मेट करना

इनपुट:

<div class="card"><h2>Title</h2><p>Some <b>bold</b> text</p><ul><li>One</li><li>Two</li></ul></div>

आउटपुट:

<div class="card">
  <h2>Title</h2>
  <p>Some <b>bold</b> text</p>
  <ul>
    <li>One</li>
    <li>Two</li>
  </ul>
</div>

HTML फ़ॉर्मेटर के बारे में अक्सर पूछे जाने वाले सवाल

क्या यह <pre> और <textarea> का कंटेंट सुरक्षित रखता है?

हाँ। pre और textarea का कंटेंट byte-दर-byte कॉपी होता है क्योंकि वहाँ व्हाइटस्पेस मायने रखता है। एम्बेड किए <script> और <style> ब्लॉक JavaScript और CSS फ़ॉर्मेटर से फ़ॉर्मेट होते हैं।

inline एलिमेंट कैसे संभाले जाते हैं?

<a>, <span>, <b> और <code> जैसे inline एलिमेंट अपने आसपास के टेक्स्ट के साथ उसी लाइन पर रहते हैं, ताकि पैराग्राफ़ पढ़ने योग्य बने रहें। ब्लॉक एलिमेंट को अपनी लाइन और इंडेंटेशन मिलती है।

क्या मैं हर एट्रिब्यूट अलग लाइन पर रख सकता हूँ?

हाँ। "One per line" या "Wrap long tags" चुनें (दूसरा विकल्प तभी रैप करता है जब टैग अधिकतम लाइन लंबाई से बड़ा हो)।

क्या यह अवैध HTML ठीक करता है?

नहीं। बेमेल या बिना बंद किए टैग यथासंभव फ़ॉर्मेट होते हैं और चेतावनी दिखती है, पर मार्कअप दोबारा नहीं लिखा जाता। इसे beautifier समझें, वैलिडेटर नहीं।

क्या conditional कमेंट रखे जाते हैं?

हाँ, सभी कमेंट डिफ़ॉल्ट रूप से रखे जाते हैं, <!--[if IE]> ब्लॉक सहित। सामान्य कमेंट हटाने के लिए "Keep comments" से टिक हटा दें।

तकनीकी नोट्स

यह formatter tokenizer + indentation printer है, HTML5 tree builder नहीं: implied end tag नहीं लगते, इसलिए <li>One<li>Two बंद नहीं होता, nest होता है, और भटका closing tag वहीं छपता है। Tag नाम lowercase होते हैं (<MyComponent> → <mycomponent>), जबकि attribute नाम, कोट शैली, boolean attribute और entity वैसे ही रहते हैं; बिना कोट वाली वैल्यू को डबल कोट मिलते हैं। script, style, pre और textarea का raw कंटेंट मेल खाते closing tag तक है।