راهنمای سبک‌نویسی

اصول و بهترین شیوه‌ها برای نوشتن کد HTML تمیز و حرفه‌ای

چرا سبک‌نویسی مهم است؟

کد تمیز و خوانا نه فقط برای شما، بلکه برای دیگر توسعه‌دهندگان هم مهم است. کد خوب نگهداری آسان‌تر، اشکال‌زدایی سریع‌تر و همکاری بهتر را ممکن می‌کند.

۱. استفاده از حروف کوچک برای تگ‌ها

همیشه تگ‌ها را با حروف کوچک بنویسید:

✅ درست: <p>, <div>, <span>
❌ غلط: <P>, <DIV>, <SPAN>

HTML به حروف بزرگ و کوچک حساس نیست، اما حروف کوچک استاندارد است.

۲. بستن تمام تگ‌ها

همیشه تگ‌های جفتی را ببندید:

✅ درست: <p>متن</p>
❌ غلط: <p>متن

تگ‌های تهی (مثل <br>، <img>) را می‌توان بدون بستن نوشت.

۳. استفاده از کوتیشن

همیشه مقادیر ویژگی‌ها را در کوتیشن بگذارید:

✅ درست: <a href="page.html">لینک</a>
❌ غلط: <a href=page.html>لینک</a>

از کوتیشن دوتایی (") استفاده کنید، مگر اینکه خود متن شامل کوتیشن باشد.

۴. تورفتگی (Indentation) یکنواخت

کد را با فاصله منظم بنویسید تا خوانا باشد:

✅ درست:
<div>
  <h2>عنوان</h2>
  <p>متن</p>
</div>

❌ غلط:
<div>
<h2>عنوان</h2>
<p>متن</p>
</div>

از ۲ یا ۴ فاصله برای هر سطح تورفتگی استفاده کنید.

۵. نام‌گذاری معنادار

از نام‌های توصیفی برای class و id استفاده کنید:

✅ درست: class="user-profile", id="main-header"
❌ غلط: class="div1", id="x"

از kebab-case (خط فاصله) استفاده کنید: user-profile نه userProfile.

۶. نام‌گذاری فایل‌ها

از حروف کوچک و خط فاصله استفاده کنید:

✅ درست: about.html, contact-us.html
❌ غلط: About.html, ContactUs.html

از فاصله در نام فایل استفاده نکنید.

۷. استفاده از تگ‌های معنایی

به جای div بی‌هدف، از تگ‌های معنایی استفاده کنید:

✅ درست: <header>, <nav>, <main>, <article>, <footer>
❌ غلط: <div class="header">, <div class="nav">

۸. DOCTYPE و charset

همیشه این دو خط را در ابتدای صفحه داشته باشید:

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  ...

۹. ساختار سند

همیشه ساختار استاندارد را رعایت کنید:

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>عنوان</title>
</head>
<body>
  <!-- محتوا -->
</body>
</html>

۱۰. کامنت‌گذاری

برای بخش‌های پیچیده کامنت بنویسید، اما زیاده‌روی نکنید:

<!-- بخش هدر -->
<header>...</header>

<!-- بخش اصلی -->
<main>...</main>

۱۱. خطوط خالی

بین بخش‌های مختلف خط خالی بگذارید تا خوانایی بهتر شود.

۱۲. اعتبارسنجی

کد خود را با W3C Validator بررسی کنید: https://validator.w3.org/

نکات مهم

این مبحث بخشی از دوره آموزش کامل HTML است.

ابزارهای مرتبط