تابز مدیا | آموزش قدم به قدم برنامه نویسی

HTML Style Guide

🔹 1. حروف کوچک (Lowercase)

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


<!-- درست -->
<html>
  <body>
    <p>سلام دنیا</p>
  </body>
</html>

<!-- نادرست -->
<HTML>
  <BODY>
    <P>سلام دنیا</P>
  </BODY>
</HTML>

🔹 2. بستن همه تگ‌ها

همیشه تگ‌ها رو به‌صورت صحیح ببند.


<!-- درست -->
<p>این یک پاراگراف است.</p>

<!-- نادرست -->
<p>این یک پاراگراف است.

🔹 3. استفاده از نقل‌قول برای اتریبیوت‌ها

مقدار اتریبیوت‌ها همیشه داخل " " یا ' ' باشه.


<!-- درست -->
<a href="https://example.com">لینک</a>

<!-- نادرست -->
<a href=https://example.com>لینک</a>

🔹 4. فاصله و تورفتگی (Indentation)

برای خوانایی بهتر، داخل تگ‌ها تورفتگی (۲ یا ۴ فاصله) رعایت بشه.


<!DOCTYPE html>
<html>
  <head>
    <title>نمونه</title>
  </head>
  <body>
    <h1>سلام</h1>
    <p>این یک متن است.</p>
  </body>
</html>

🔹 5. قرار دادن `<!DOCTYPE html>`

همیشه در ابتدای سند HTML5، داک‌تایپ مشخص بشه:


<!DOCTYPE html>

🔹 6. استفاده از تگ‌های معنایی (Semantic)

به‌جای <div> یا <span> بی‌معنی، از تگ‌های معنادار مثل <header>, <nav>, <main> استفاده کن.

🔹 7. ترتیب بخش‌های HTML

ساختار استاندارد یک سند HTML به این شکل باشه:


<!DOCTYPE html>
<html lang="fa">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>عنوان صفحه</title>
  </head>
  <body>
    <!-- محتوای اصلی -->
  </body>
</html>

🔹 8. نام‌گذاری کلاس و آیدی

کلاس‌ها و آیدی‌ها با حروف کوچک و خط تیره (-) نوشته بشن.
از اسامی معنی‌دار استفاده کن.


<!-- درست -->
<div class="main-header"></div>

<!-- نادرست -->
<div class="MainHeader"></div>
<div class="mh"></div>

🔹 9. جدا کردن CSS و JavaScript

بهتره استایل‌ها و اسکریپت‌ها داخل فایل جدا باشن.


<!-- درست -->
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>

<!-- نادرست -->
<style>p { color: red; }</style>
<script>alert("hi")</script>

🔹 10. کامنت‌گذاری

برای توضیح بخش‌های کد از کامنت استفاده کن.


<!-- این بخش مربوط به هدر سایت است -->
<header>
  <h1>سایت من</h1>
</header>

✅ رعایت این نکات باعث می‌شه کد HTMLت:

خواناتر
حرفه‌ای‌تر
سازگار با مرورگرها و SEO باشه.