راهنمای نوشتن صحیح HTML/CSS

در این مقاله قوانین فورمت و استایل HTML و CSS را مورد بررسی قرار میدهیم. این قوانین کمک به بالا رفتن کفیت کد نویسی میکند.

1. قوانین کلی

1.1 قوانین کلی استایل دهی

1.1.2 پروتکل

درصورت امکان، برای embed کردن منابع از پروتکل HTTPS استفاده کنید.

همواره برای تصاویر و دیگر مدیا فایل ها، استایل شیت ها، اسکریپتها از پروتکل HTTPS استفاده کنید، مگر اینکه فایل های متناظر روی HTTPS موجود نباشد.

<!-- Not recommended: omits the protocol --><script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<!-- Not recommended: uses the HTTP protocol --><script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<!-- Recommended --><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

/* Not recommended: omits the protocol */@import '//fonts.googleapis.com/css?family=Open+Sans';

/* Not recommended: uses the HTTP protocol */@import 'http://fonts.googleapis.com/css?family=Open+Sans';

/* Recommended */@import 'https://fonts.googleapis.com/css?family=Open+Sans';

1.2 قوانین کلی فورمت دادن

1.2.1 دندانه گذاری (indentation)

دندانه گذاری باید به اندازه دو space باشد.

برای دندانه گداری هرگز از تب استفاده نکنیدو

<ul><li>Fantastic
  <li>Great
</ul>

.example {
  color: blue;}

1.2.2 Capitalization

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

همه کدها باید با حروف کوچک نوشته شوند. این قانون شامل نام المان های HTML، اتریبیوت ها، مقادیر اتریبیوت ها (به جز text/CDATA)، سلکتورهای CSS، پراپرتی ها، و مقادیر پراپرتی ها میباشد (به جز string ها).

<!-- Not recommended --><A HREF="/">Home</A>

<!-- Recommended --><img src="google.png" alt="Google">

/* Not recommended */color: #E5E5E5;

/* Recommended */color: #e5e5e5;

1.2.3 فضاهای خالی انتهای تگ ها

فضاهای خالی انتهای تگ ها را پاک کنید.

فضاهای خالی انتهای تگ ها میتوانند مشکل ساز باشند.

<!-- Not recommended --><p>What?_

<!-- Recommended --><p>Yes please.

1.3 قوانین کلی متا

1.31 Encoding

از UTF-8 استفاده کنید و هرگز از BOM استفاده نکنید.

مطمئن شوید که ادیتور شما از UTF-8 برای encode کردن کاراکترها استفاده میکند.

از طریق تگ meta charset="utf-8" سند HTML خودرا encode کنید.

1.3.2 کامنت ها

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

برای توضیح کد خود کامنت بنویسید: کد شما چیست، چه هدفی را دنبال میکند، و چرا بجای راه حل های دیگر از این کد استفاده کرده اید؟

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

1.3.3 Action Items

آیتم های todo را با TODO مشخص کنید.

موارد todo را تنها با TODO مشخص کنید و از فورمتهای دیگر مانند @@ استفاده نکنید.

مخاطب را داخل پرانتز و با فرمت TODO(contact) مشخص کنید (مخاطب میتواند نام کاربری یا لیست ایمیل باشد).

action itemها میتوانند بعد از دو نقطه و با فورمت TODO: action item مشخص کنید.

{# TODO(john.doe): revisit centering #}<center>Test</center>

<!-- TODO: remove optional tags -->
<ul>
  <li>Apples</li>
  <li>Oranges</li>
</ul>

2. اچ تی ام ال یا HTML

2.1 قوانین استایل HTML

2.1.1 Document Type

از HTML5 استفاده کنید.

HTML5 برای همه سندهای HTML مناسب است: <!DOCTYPE html>

هرگز المان های void را نبندید، هرچند اینکار به لحاظ HTML ایرادی ندارد. مانند <br> و نه <br />

2.1.2 اعتبار HTML

تا آنجا که امکان دارد از HTML معتبر استفاده کنید.

از HTML معتبر استفاده کنید، مگر اینکه برای عملکرد مشکل ساز باشد.

از ابزار W3C HTML validator برای تست استفاده کنید.

<!-- Not recommended -->
<title>Test</title>
<article>This is only a test.

<!-- Recommended -->
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<article>This is only a test.</article>

2.1.3 معناشناسی

با توجه به معنایی که قرار است منتقل شود ازالمان های HTML استفاده کنید.

نوشتن دیدگاه

JComments

مقالات طراحی سایت