HTML Style Guide
یک راهنمای سبک (Style Guide) برای HTML آوردهام، که به شما کمک میکند کد HTML تمیز، منظم، قابلفهم و قابلنگهداری بنویسید:
🧭 راهنمای سبک HTML (HTML Style Guide)
1. ✅ استفاده از حروف کوچک (lowercase)
تمام تگها، نام attributeها و مقدارهای Boolean را با حروف کوچک بنویسید.
<!– درست –>
<input type=“text” disabled>
<!– نادرست –>
<INPUT TYPE=“TEXT” DISABLED>
2. ✅ استفاده از Doctype استاندارد
همیشه سند HTML را با doctype استاندارد HTML5 شروع کنید:
<!DOCTYPE html>
3. ✅ رعایت ساختار درست سند
<!DOCTYPE html>
<html lang=“fa”>
<head>
<meta charset=“UTF-8”>
<title>عنوان صفحه</title>
</head>
<body>
<!– محتوای صفحه –>
</body>
</html>
4. ✅ تورفتگی (Indentation)
از دو یا چهار فاصله (spaces) برای تورفتگی استفاده کنید. (توصیه: از tab استفاده نکنید)
<ul>
<li>مورد اول</li>
<li>مورد دوم</li>
</ul>
5. ✅ بسته شدن تگها
همیشه تگهای HTML را ببندید—even if they’re optional.
<!– درست –>
<p>سلام دنیا</p>
<!– نادرست –>
<p>سلام دنیا
تگهای خودبسته مانند <img> و <input> نیازی به اسلش ندارند:
<!– درست –>
<img src=“image.jpg” alt=“عکس نمونه”>
<!– نادرست –>
<img src=“image.jpg” alt=“عکس نمونه” />
6. ✅ استفاده از نقلقول (quotes) برای attribute ها
همیشه از نقلقول دوتایی (” “) برای مقدار ویژگیها استفاده کنید.
<!– درست –>
<a href=“https://example.com”>لینک</a>
<!– نادرست –>
<a href=https://example.com>لینک</a>
7. ✅ استفاده از عناصر معنایی
استفاده از عناصر معنایی مانند <header>, <main>, <section>, <article> به جای <div> و <span> برای معنا و ساختار صفحه.
8. ✅ استفاده از alt برای تصاویر
برای دسترسپذیری بهتر، همیشه برای تصاویر از ویژگی alt استفاده کنید.
<img src=“logo.png” alt=“لوگوی شرکت”>
9. ✅ مرتبسازی و گروهبندی منطقی attributeها
ترتیب ویژگیها را منطقی بچینید: id, class, type, name, value, href، و غیره.
<!– درست –>
<input id=“search” class=“input” type=“text” name=“q” placeholder=“جستجو…”>
10. ✅ نظرنویسی برای بخشهای مهم
برای خوانایی بیشتر، از کامنت استفاده کنید:
<!– منوی ناوبری اصلی –>
<nav>
…
</nav>
11. ✅ جدا کردن CSS و JavaScript
به جای نوشتن استایل یا اسکریپت درون تگها، آنها را در فایلهای جداگانه قرار دهید:
12. ❌ از عناصر منسوخ استفاده نکنید
از تگهای قدیمی مانند <center>, <font>, <b> خودداری کنید. به جای آنها از CSS و تگهای معنایی استفاده کنید.
دیدگاهتان را بنویسید