منسّق HTML

ما هو تنسيق HTML؟

منسّق HTML هو أداة تُجري تنسيق HTML (يُعرف أيضًا بالتجميل أو الطباعة الجميلة): تُضيف مسافات بادئة متسقة وفواصل أسطر وتباعدًا إلى ترميز HTML حتى تصبح بنيته التشعبية مرئية. تتجاهل المتصفحات المسافات البيضاء عند عرض HTML، لذا فإن مستندًا مكتوبًا في سطر واحد ينتج الناتج ذاته مقارنةً بمستند ذي مسافات بادئة دقيقة. الفرق بينهما حكر على البشر: HTML المنسّق أسهل قراءةً وتصحيحًا وصيانةً.

تُعرّف مواصفة HTML (التي تصونها WHATWG بوصفها HTML Living Standard) أكثر من 110 عنصرًا، لكلٍّ منها نموذج محتوى خاص به. العناصر الكتلية كـ <div> و<section> و<article> تبدأ عادةً في سطر جديد وتُضيف مسافة بادئة لعناصرها الفرعية. أما العناصر الفارغة كـ <br> و<img> و<input> فلا تحتوي على وسم إغلاق ولا عناصر فرعية. يفهم المنسّق الجيد هذه الفروق ويطبّق قواعد المسافات البادئة وفقًا لها، بدلًا من إضافة مسافة بيضاء بعد كل وسم بصورة عشوائية.

يصبح التنسيق ضروريًا فعلًا أثناء التطوير. فالـ 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

الأسئلة الشائعة