HTML Formatter

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

HTML फ़ॉर्मेटर एक ऐसा उपकरण है जो HTML फ़ॉर्मेटिंग (जिसे beautification या pretty-printing भी कहते हैं) करता है: यह HTML मार्कअप में consistent इंडेंटेशन, लाइन ब्रेक और रिक्त स्थान जोड़ता है ताकि उसकी नेस्टिंग संरचना दृश्यमान हो सके। ब्राउज़र HTML रेंडर करते समय रिक्त स्थान को अनदेखा करते हैं, इसलिए एक ही पंक्ति में लिखा दस्तावेज़ और सावधानी से इंडेंट किया गया दस्तावेज़ एक जैसा आउटपुट देते हैं। अंतर केवल मनुष्यों के लिए है: फ़ॉर्मैट किया गया HTML पढ़ना, डीबग करना और maintain करना आसान होता है।

HTML विनिर्देश (जिसे WHATWG HTML Living Standard के नाम से जाना जाता है) 110 से अधिक एलिमेंट परिभाषित करता है, जिनमें से प्रत्येक का अपना content model होता है। Block-level एलिमेंट जैसे <div>, <section>, और <article> आमतौर पर नई पंक्ति पर आरंभ होते हैं और अपने child एलिमेंट को इंडेंट करते हैं। Void एलिमेंट जैसे <br>, <img>, और <input> का कोई closing tag नहीं होता और उनके कोई child नहीं होते। एक अच्छा फ़ॉर्मेटर इन भेदों को समझता है और इंडेंटेशन नियम उसी हिसाब से लागू करता है — न कि हर tag के बाद अंधाधुंध रिक्त स्थान जोड़ता है।

फ़ॉर्मेटिंग विकास के दौरान सबसे अधिक महत्वपूर्ण होती है। CMS प्लेटफ़ॉर्म से मिलने वाला मिनिफ़ाइड या मशीन-निर्मित HTML, और ब्राउज़र DevTools से copy किया गया मार्कअप अक्सर एक ही लाइन में आता है। उचित इंडेंटेशन के बिना, कोई लापता closing tag ढूंढना या गहरी नेस्टेड संरचना का पता लगाना काफी समय लेता है। HTML फ़ॉर्मेटर उस टेक्स्ट की दीवार को एक ही चरण में ठीक से इंडेंट किए गए, पठनीय tree संरचना में बदल देता है।

इस HTML Formatter का उपयोग क्यों करें?

कोई भी HTML चिपकाएं और तुरंत ठीक से इंडेंट किया गया आउटपुट प्राप्त करें। कोई plugin install करने की ज़रूरत नहीं, कोई कॉन्फ़िगरेशन फ़ाइल लिखने की नहीं, कोई खाता बनाने की नहीं।

HTML Formatter के उपयोग के मामले

HTML इंडेंटेशन नियम

HTML फ़ॉर्मेटर प्रत्येक एलिमेंट प्रकार को उसके content model के आधार पर संसाधित करता है। नीचे दी गई तालिका सामान्य एलिमेंट और 2-स्पेस तथा 4-स्पेस सेटिंग के साथ उनके इंडेंटेशन को दर्शाती है। दोनों ब्राउज़र में एक जैसा rendering देते हैं; अंतर केवल पठनीयता का है।

Formatter बनाम Minifier बनाम Linter

ये तीनों tools HTML पर काम करते हैं लेकिन अलग-अलग उद्देश्यों की पूर्ति करते हैं। फ़ॉर्मेटिंग और minification विपरीत रूपांतरण हैं; linting रिक्त स्थान बदले बिना त्रुटियाँ जाँचता है।

कोड उदाहरण

लोकप्रिय भाषाओं और उपकरणों में HTML को प्रोग्रामेटिक रूप से कैसे फ़ॉर्मैट करें:

import { html as beautify } from 'js-beautify'

const ugly = '<div><p>Hello</p><ul><li>One</li><li>Two</li></ul></div>'

const formatted = beautify(ugly, {
  indent_size: 2,
  indent_char: ' ',
  wrap_line_length: 80,
  preserve_newlines: false,
})
// → <div>
// →   <p>Hello</p>
// →   <ul>
// →     <li>One</li>
// →     <li>Two</li>
// →   </ul>
// → </div>

from bs4 import BeautifulSoup

ugly = '<div><p>Hello</p><ul><li>One</li><li>Two</li></ul></div>'

soup = BeautifulSoup(ugly, 'html.parser')
print(soup.prettify(formatter='minimal'))
# → <div>
# →  <p>
# →   Hello
# →  </p>
# →  <ul>
# →   <li>One</li>
# →   <li>Two</li>
# →  </ul>
# → </div>

package main

import (
    "bytes"
    "fmt"
    "golang.org/x/net/html"
    "strings"
)

func main() {
    ugly := "<div><p>Hello</p></div>"
    doc, _ := html.Parse(strings.NewReader(ugly))

    var buf bytes.Buffer
    html.Render(&buf, doc)
    fmt.Println(buf.String())
    // renders normalized HTML — pair with indent logic for pretty output
}

# Format a single file in place
npx prettier --write index.html

# Format and print to stdout (pipe-friendly)
npx prettier --parser html index.html

# Format with 4-space indentation
npx prettier --tab-width 4 --parser html index.html

# Format HTML from stdin
echo '<div><p>Hello</p></div>' | npx prettier --parser html

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