نکات و معیار استایل هیٹل3ل(5) و کد

HTML کوڈ کباوتی

ویب توسعه کار چارچا کے استعمال میں کوڈ کی کباوتی اور نویسی میں غیر یقینی تھے

2000 سے 2010 کے درمیان، متعدد ویب توسعه کاروں نے HTML سے XHTML کو تبدیل کیا تھا

XHTML کے ذریعے، توسعه کار کو اپنا اپنا 'فورمٹ کئے گئے' کوڈ لکھنا پڑتا تھا

HTML5 کا استعمال میں کوڈ کا��ید کافی سستا ہوتا ہے

HTML5 کے ذریعے، آپ کو اپنا اپنابہترین کارروائی، استایل رہنما اور کوڈ کی کباوتی.

اسمارٹ اور مستقبل پر یقین رکھنے والا

استایل کا منطقی استعمال، دوسروں کو آپ کا HTML سمجھنا اور استعمال کرنا آسان بنادیتا ہے

مستقبل میں، XML ریڈر جیسے پروگرام آپ کا HTML پڑھنا چاہیں گے

خوب فورمٹ کئے گئے 'تقریباً XHTML' نویسی استعمال کریں، تاکہ وہ بہتر کام کریں

توضیح:اپنے استایل کو بہتر، پاک، چمکدار اور فورمٹ کئے گئے رکھیں

صحیح نوعیت استعمال کریں

پیش کے سارے ساتھ اپنے ڈوکومنٹ کا نوعیت اعلان کریں:

<!DOCTYPE html>

اگر آپ کچھ وقت سے چھوٹی حروف کا استعمال کرتے آپ تو آپ کریسکتے ہیں:

<!doctype html>

چھوٹی حروف کا استعمال کریں

HTML5 کا استعمال میں عناصر کا نام میں میزج حروف کا استعمال کیا جاسکتا ہے

ہم چھوٹی حروف کا استعمال کی سفارش دیتے ہیں:

  • میزج حروف کا استعمال ناموں میں بے چارہ ہوتا ہے
  • توسعه کار چھوٹی حروف کا استعمال کرنا عادت کرتے ہیں (مثلاً XHTML میں)
  • چھوٹی حروف سے پاکتر توجہ دہانی:
  • چھوٹی حروف کو لکھنا آسان ہوتا ہے

کم سے کم خوشگوار:

<SECTION> 
  <p>یہ ایک پاراگراف ہے.</p>
</SECTION>

بے چارہ:

<Section> 
  <p>یہ ایک پاراگراف ہے.</p>
</SECTION>

کم سے کم توجہ دہانی:

<section> 
  <p>یہ ایک پاراگراف ہے.</p>
</section>

تمام HTML عناصر کو بند کرنا

HTML5 میں، آپ کو تمام عناصر کو بند کرنا نہیں پڑتا (مثلاً <p> عناصر)。

ہم منصوبہ بند کرنا سفارش دیتے ہیں:

به نظر نمی‌رسد خوب باشد:

<section>
  <p>This is a paragraph.
  <p>This is a paragraph.
</section>

به نظر می‌رسد خوب است:

<section>
  <p>یہ ایک پاراگراف ہے.</p>
  <p>یہ ایک پاراگراف ہے.</p>
</section>

بستن عناصر HTML خالی

در HTML5، بستن عناصر خالی انتخابی است.

این روش مجاز است:

<meta charset="utf-8">

همچنین این روش نیز مجاز است:

<meta charset="utf-8" />

خط تیره (Slash) در XHTML و XML ضروری است.

اگر انتظار دارید نرم‌افزار XML به صفحه شما دسترسی داشته باشد، حفظ این عادت یک ایده خوب است.

استفاده از نام‌های ویژگی‌های کوچک‌تر

HTML5 اجازه می‌دهد که نام‌های ویژگی‌ها به صورت مخلوط از حروف بزرگ و کوچک باشند.

ما توصیه می‌کنیم که از نام‌های ویژگی‌های کوچک‌تر استفاده کنید:

  • ترکیب نام‌های ویژگی‌ها خوب نیست
  • توسعه‌دهندگان عادت دارند از نام‌های ویژگی‌های کوچک‌تر استفاده کنند (مثلاً در XHTML)
  • نام‌های ویژگی‌های کوچک‌تر در برخی موارد خالص‌تر به نظر می‌رسند
  • نام‌های ویژگی‌های کوچک‌تر نوشتن آسان‌تر است

به نظر نمی‌رسد خوب باشد:

<div CLASS="menu">

به نظر می‌رسد خوب است:

<div class="menu">

مقدار ویژگی‌ها با قوس‌ها

HTML5 اجازه می‌دهد که مقدار ویژگی‌ها بدون قوس‌ها باشد.

ما توصیه می‌کنیم که مقدار ویژگی‌ها را در قوس‌ها قرار دهید:

  • اگر مقدار ویژگی شامل مقدار باشد، باید از قوس‌ها استفاده شود
  • مزایای ترکیبی استایل بسیار بد است
  • مقدارهایی که در قوس‌ها قرار دارند، خواناتر هستند

این مقدار ویژگی معتبر نیست، زیرا شامل فضاهای خالی است:

<table class=table striped>

این روش معتبر است:

<table class="table striped">

ویژگی‌های ضروری

لطفاً همیشه از تصاویر استفاده کنید alt ویژگی‌ها. این ویژگی مهم است وقتی تصویر قابل نمایش نیست.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

لطفاً همیشه اندازه تصاویر را تعریف کنید. این کار باعث کاهش چشمک‌زدن می‌شود، زیرا مرورگر قبل از بارگذاری تصویر فضای لازم را برای آن رزرو می‌کند.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

فضاها و برابر (Equal)

فضاهای بین برابر (Equal) قانونی است:

<link rel = "stylesheet" href = "styles.css">

اما فاصله‌های کمتر خواناتر است، اما فاصله‌های کمتر خواناتر است و اجزا را بهتر به هم نزدیک می‌کند:

<link rel="stylesheet" href="styles.css">

از سطرهای کد بلند خودداری کنید

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

سعی کنید از افزایش طول سطرهای کد بیش از 80 کاراکتر خودداری کنید.

سطرهای خالی و فاصله‌ها

لطفاً از اضافه کردن سطرهای خالی بی‌دلیل خودداری کنید.

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

برای افزایش خوانایی، از دو فاصله برای فضاسازی استفاده کنید. از استفاده از TAB خودداری کنید.

لطفاً از سطرهای خالی و فاصله‌های غیرضروری استفاده نکنید.

ضروری نہیں:}

<body>
  <h1>مقتدر شہر</h1>
  <h2>توکیو</h2>
  <p>
    توکیو جاپان کی راجدھانی ہے، بڑی توکیو علاقے کا مرکز،
    اور دنیا میں سب سے زیادہ آبادی والا میٹرپولیٹن علاقہ.
    یہ جاپانی حکومت کا مقام اور شاہی گھر کا مقام ہے،
    اور جاپانی شاہی کنبے کا گھر.
  </p>
</body>

بہتر:

<body>
<h1>مقتدر شہر</h1>
<h2>توکیو</h2>
<p>
توکیو جاپان کی راجدھانی ہے، بڑی توکیو علاقے کا مرکز،
اور دنیا میں سب سے زیادہ آبادی والا میٹرپولیٹن علاقہ.
یہ جاپانی حکومت کا مقام اور شاہی گھر کا مقام ہے،
اور جاپانی شاہی کنبے کا گھر.
</p>
</body>

تخته نمونہ:

<table>
  <tr>
    <th>نام</th>
    <th>تفصیل</th>
  <tr>
  <tr>
    <td>A</td>
    <td>A کا تفصیل</td>
  <tr>
  <tr>
    <td>B</td>
    <td>بی کا تفصیل</td>
  <tr>
</table>

لیسٹ نمونہ:

<ol>
  <li>لندنA</li>
  <li>پیرس</li>
  <li>توکیو</li>
</ol>

چھوڑنا <html> اور <body>؟

HTML5 معیار میں، <html> اور <body> تگ کو بھی چھوڑا جاسکتا ہے。

ایک بار کچھ کا طور پر HTML5 میں تصدیق کا کوڈ:

مثال

<!DOCTYPE html>
<head>
  <title>صفحہ کا عنوان</title>
</head>
<h1>یہ ایک سرلیک ہے</h1>
<p>یہ ایک پاراگراف ہے.</p>

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

ہم <html> اور <body> تگ کو چھوڑنے کا مشورہ نہیں دیتے۔

<html> تگ، متن کا ریشه تگ ہے۔ یہ صفحہ زبان کو طے کرنے کا مثالی مقام ہے。

<!DOCTYPE html>
<html lang="en-US">

دست یاب اپلی کیشن (اسکرین ریڈر) اور سرچ انجنوں کے لئے، زبان کا اعلان اہم ہوتا ہے。

چھوڑنا <html> یا <body> کو DOM اور XML سافٹ ویئر کا سقوط پیدا کر سکتا ہے。

چھوڑنا <body> پرانی براوزر (IE9) میں خطا پیدا کر سکتا ہے。

چھوڑنا <head>؟

HTML5 معیار میں، <head> تگ کو بھی چھوڑا جاسکتا ہے。

مقصد سے، براوزر <body> سے پہلے کا تمام عناصر کو اپنے طور پر <head> عناصر میں شامل کرتا ہے。

مقصد <head> تگ کو چھوڑنا، آپ کو HTML کی پیچیدگی کو کم سکتا ہے:

مثال

<!DOCTYPE html>
<html>
<title>صفحہ کا عنوان</title>
<body>
  <h1>یہ ایک سرلیک ہے</h1>
  <p>یہ ایک پاراگراف ہے.</p>
</body>
</html>

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

توضیح:برای توسعه‌دهندگان وب، استفاده از روش‌های ساده‌سازی برچسب‌ها ناشناخته است. ایجاد قوانین زمان می‌برد.

مetadata

عنصر <title> در HTML5 ضروری است. لطفاً تا حد امکان از عنوان‌های معنی‌دار استفاده کنید.

<title>نحوه نوشتن و استایل کد HTML5</title>

برای اطمینان از تفسیر صحیح و شاخص‌سازی درست توسط موتورهای جستجو، تعریف زبان و کد کاراکتر در سند زودتر از همه انجام شود:

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>نحوه نوشتن و استایل کد HTML5</title>
</head>

هیٹل3ل نظرات

توضیحات کوتاه باید در یک خط نوشته شوند و یک فضای خالی در پس از <!-- و پیش از --> اضافه شود:

<!-- This is a comment -->

توضیحات طولانی که چند خط را پوشش می‌دهند، باید از طریق <!-- و --> در خط‌های مجزا نوشته شوند:

<!-- 
  این یک مثال توضیح طولانی است. این یک مثال توضیح طولانی است. این یک مثال توضیح طولانی است.
  این یک مثال توضیح طولانی است. این یک مثال توضیح طولانی است. این یک مثال توضیح طولانی است.
-->

توضیحات طولانی‌تر، اگر دو فضا خالی درج شوند، آسان‌تر دیده می‌شوند.

پوشش‌های استایل

لطفاً از ساده‌ترین نحوه برای پیوند دادن به پوشش‌های استایل استفاده کنید (ویژگی type ضروری نیست):

<link rel="stylesheet" href="styles.css">

قوانین کوتاه می‌توانند به یک خط فشرده شوند، مانند این:

p.into {font-family:"Verdana"; font-size:16em;}

قوانین طولانی باید به خطوط چندگانه تقسیم شوند:

بدنه {
  رنگ پس‌زمینه: lightgrey;
  فونت: "Arial Black", Helvetica, sans-serif;
  اندازه فونت: ۱۶em;
  رنگ: سیاه;
}
  • بازساز و انتخابگر در یک خط قرار دارند
  • پیش از بازساز، از فضای خالی استفاده کنید
  • از فضای خالی دو تایی برای درجیل استفاده کنید
  • پس از هر属性 و ارزش، از دو نقطه و یک فضای خالی استفاده کنید
  • پس از هر کاما یا نقاط ویرگول، از فضای خالی استفاده کنید
  • پس از هر جفت属性 و ارزش (درclculating)، از نقاط ویرگول استفاده کنید
  • فقط در صورتی که ارزش شامل فضای خالی باشد، از قیدن ارزش با نقل قول استفاده کنید
  • بسترساز را در خط جدیدی قرار دهید، بدون استفاده از فضای خالی پیش از آن
  • از گذشتن از ۸۰ کاراکتر در هر خط خودداری کنید

توضیح:در پس از کاما یا نقاط ویرگول، اضافه کردن فضای خالی، قوانین نوشتاری عمومی است.

در HTML بارگذاری JavaScript

لطفاً از نحوه ساده برای بارگذاری اسکریپت‌های خارجی استفاده کنید (نسبت به ویژگی type الزامی نیست):

<script src="myscript.js">

دسترسی به عناصر HTML از طریق JavaScript

پیامدهای استفاده از استایل‌های HTML ناخوشایند ممکن است منجر به خطاهای JavaScript شود.

این دو دستور JavaScript نتایج متفاوتی را ایجاد می‌کنند:

var obj = getElementById("Demo")
var obj = getElementById("demo")

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

اگر ممکن است، در HTML از قراردادهای نام‌گذاری مشابه (با JavaScript) استفاده کنید.

لطفاً به راهنمای سبک JavaScript مراجعه کنید.

از نام‌های فایل کوچک استفاده کنید

بیشتر سرورهای وب (Apache، Unix) به بزرگ‌کوچک‌کشی نام فایل‌ها حساس هستند:

نمی‌توان به London.jpg از طریق london.jpg دسترسی داشت.

سرورهای وب دیگر (مایکروسافت، IIS) به بزرگ‌کوچک‌کشی حساس نیستند:

توانایی دسترسی به London.jpg از طریق london.jpg یا London.jpg.

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

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

برای جلوگیری از این مشکلات، همیشه نام فایل‌ها را به صورت کوچک استفاده کنید (اگر ممکن است).

پسوند فایل‌ها

نام فایل‌های HTML باید از پسوند .html(بجای .htm)

فایل‌های CSS باید از پسوند .css.

فایل‌های JavaScript باید از پسوند .js.