راهنمای استایل و توافق‌نام‌های کد HTML(5)

قراردادهای HTML

توسعه‌دهندگان وب اغلب در مورد سبک‌ها و گرامرهای استفاده شده در HTML شک دارند.

در دوره‌ی 2000 تا 2010، بسیاری از توسعه‌دهندگان وب از HTML به XHTML تغییر کردند.

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

HTML5 در ویرایش کدها کمی سست‌تر عمل می‌کند.

با HTML5، شما باید چیزی برای خودتان ایجاد کنید:بهترین عملکرد، راهنمای سبک و قراردادهای کد.

هوشمند و با تضمین آینده

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

در آینده، برنامه‌هایی مانند خواننده‌های XML ممکن است نیاز به خواندن HTML شما داشته باشند.

با استفاده از گرامر خوب

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

لطفاً نوع مستند را صحیح استفاده کنید

لطفاً همیشه نوع مستند را در اولین خط مستند خود اعلام کنید:

<!DOCTYPE html>

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

<!doctype html>

نام‌های عناصر را کوچک کنید

HTML5 اجازه می‌دهد از حروف مخلوط了大 و کوچک در نام‌های عناصر استفاده شود.

ما پیشنهاد می‌دهیم نام‌های عناصر را کوچک کنید:

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

به نظر بد می‌رسد:

<SECTION> 
  <p>این یک پاراگراف است.</p>
</SECTION>

خیلی بد است:

<Section> 
  <p>این یک پاراگراف است.</p>
</SECTION>

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

<section> 
  <p>این یک پاراگراف است.</p>
</section>

تمام عناصر HTML را ببندید

در HTML5، شما نیازی به بستن تمام عناصر (مثلاً عناصر <p>) ندارید.

ما پیشنهاد می‌دهیم تمام عناصر HTML را ببندیم:

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

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

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

<section>
  <p>این یک پاراگراف است.</p>
  <p>این یک پاراگراف است.</p>
</section>

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

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

اینطور است:

<meta charset="utf-8">

همچنین اینطور است:

<meta charset="utf-8" />

خط افقی (/) در 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">

فضای خالی و برابر

فضای خالی در دو طرف برابر است:

<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>توضیح B</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>

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

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

متاداده‌ها

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

<title>HTML5 Syntax and Coding Style</title>

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

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Syntax and Coding Style</title>
</head>

نظرات HTML

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

<!-- This is a comment -->

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

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

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

استایل‌ها

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

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

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

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

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

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • باز کردن قفل و انتخاب‌گر در یک خط قرار دارند
  • از یک فاصله خالی قبل از باز کردن قفل استفاده کنید
  • استفاده از پیش‌بینی دو کاراکتری برای فضاسازی
  • پس از هر ویژگی و ارزش از دو نقطه ویرگول و یک فاصله استفاده کنید
  • پس از هر کاما یا نقطه ویرگول از فاصله خالی استفاده کنید
  • پس از هر جفت ارزش و ویژگی (شامل آخرین آن) از نقطه ویرگول استفاده کنید
  • فقط در صورتی که ارزش شامل فاصله باشد، از نقل قول برای احاطه ارزش استفاده کنید
  • بستن قفل در یک خط جدید قرار دهید، قبل از آن فاصله خالی استفاده نشود
  • ممانعت از اینکه هر خط بیش از 80 کاراکتر باشد

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

در 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.