HTML ফরম্যাটার

HTML ফরম্যাটিং কী?

একটি HTML ফরম্যাটার এমন একটি টুল যা HTML ফরম্যাটিং (যাকে বিউটিফিকেশন বা প্রিটি-প্রিন্টিংও বলা হয়) সম্পাদন করে: এটি HTML মার্কআপে সামঞ্জস্যপূর্ণ ইন্ডেন্টেশন, লাইন ব্রেক ও স্পেসিং যোগ করে যাতে এর নেস্টিং কাঠামো দৃশ্যমান হয়। ব্রাউজার HTML রেন্ডার করার সময় হোয়াইটস্পেস উপেক্ষা করে, তাই একটি একক লাইনে লেখা ডকুমেন্ট সতর্কভাবে ইন্ডেন্ট করা ডকুমেন্টের মতোই আউটপুট তৈরি করে। পার্থক্যটা পুরোটাই মানুষের জন্য: ফরম্যাট করা HTML পড়া, ডিবাগ করা এবং রক্ষণাবেক্ষণ করা সহজ।

HTML স্পেসিফিকেশন (WHATWG কর্তৃক HTML Living Standard হিসেবে রক্ষণাবেক্ষণ করা হয়) ১১০-এরও বেশি এলিমেন্ট সংজ্ঞায়িত করে, প্রতিটির নিজস্ব কন্টেন্ট মডেল রয়েছে। <div>, <section> ও <article>-এর মতো ব্লক-লেভেল এলিমেন্ট সাধারণত নতুন লাইনে শুরু হয় এবং তাদের চাইল্ডগুলো ইন্ডেন্ট করে। <br>, <img> ও <input>-এর মতো ভয়েড এলিমেন্টের কোনো ক্লোজিং ট্যাগ বা ইন্ডেন্ট করার জন্য চাইল্ড নেই। একটি ভালো ফরম্যাটার এই পার্থক্যগুলো বোঝে এবং প্রতিটি ট্যাগের পরে অন্ধভাবে হোয়াইটস্পেস যোগ করার পরিবর্তে সেই অনুযায়ী ইন্ডেন্টেশন নিয়ম প্রয়োগ করে।

ফরম্যাটিং সবচেয়ে বেশি গুরুত্বপূর্ণ উন্নয়নের সময়। মিনিফাইড বা মেশিন-জেনারেটেড HTML, CMS প্ল্যাটফর্মের আউটপুট এবং ব্রাউজার DevTools থেকে কপি করা মার্কআপ প্রায়ই একটি একক ঘন লাইন হিসেবে আসে। সঠিক ইন্ডেন্টেশন ছাড়া একটি অনুপস্থিত ক্লোজিং ট্যাগ খুঁজে বের করা বা গভীরভাবে নেস্টেড কাঠামো অনুসরণ করা অনেক বেশি সময় লাগে। একটি HTML ফরম্যাটার একটি ধাপেই সেই টেক্সটের দেয়ালকে একটি সুসংগঠিত ইন্ডেন্টেড, পাঠযোগ্য ট্রি কাঠামোতে রূপান্তরিত করে।

এই HTML ফরম্যাটার কেন ব্যবহার করবেন?

যেকোনো HTML পেস্ট করুন এবং তাৎক্ষণিকভাবে সঠিকভাবে ইন্ডেন্ট করা আউটপুট পান। কোনো প্লাগইন ইনস্টল করতে হবে না, কোনো কনফিগারেশন ফাইল লিখতে হবে না, কোনো অ্যাকাউন্ট তৈরি করতে হবে না।

HTML ফরম্যাটারের ব্যবহারের ক্ষেত্র

HTML ইন্ডেন্টেশনের নিয়ম

একটি HTML ফরম্যাটার প্রতিটি এলিমেন্ট ধরনকে কীভাবে পরিচালনা করে তা নির্ভর করে তার কন্টেন্ট মডেলের উপর। নিচের সারণিতে সাধারণ এলিমেন্ট এবং ২-স্পেস ও ৪-স্পেস সেটিংসে সেগুলো কীভাবে ইন্ডেন্ট হয় তা দেখানো হয়েছে। উভয়ই ব্রাউজারে একই রেন্ডারিং তৈরি করে; পার্থক্য শুধু পঠনযোগ্যতায়।

ফরম্যাটার বনাম মিনিফায়ার বনাম লিন্টার

এই তিনটি টুল HTML-এ কাজ করে কিন্তু ভিন্ন উদ্দেশ্য পূরণ করে। ফরম্যাটিং ও মিনিফিকেশন বিপরীত রূপান্তর; লিন্টিং হোয়াইটস্পেস পরিবর্তন না করেই ত্রুটি পরীক্ষা করে।

কোড উদাহরণ

জনপ্রিয় ভাষা ও টুলে প্রোগ্রামেটিক্যালি 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

প্রায়শই জিজ্ঞাসিত প্রশ্ন