100% کامل شده تا

راهنمای استایل و استانداردهای برنامه نویسی در اچ‌تی‌ام‌ال

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو


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

در اینجا چند دستورالعمل و راهنمایی برای ایجاد کد HTML خوب آورده شده‌است.


همیشه Document Type را اعلام کنید

همیشه نوع سند (Document Type) را در اولین خط سند خود اعلان کنید:[۱]

Document Type صحیح برای HTML عبارت است از:

<!DOCTYPE html>


از نام عناصر با حرف کوچک استفاده کنید

در HTML، استفادهٔ ترکیبی از حروف کوچک و بزرگ در نام عناصر مجاز است.

پیشنهاد ما استفاده از عناصر با حروف کوچک است زیرا:

  • ترکیب نام‌ها با حروف کوچک و بزرگ بد است
  • توسعه دهندگان (Developers) معمولاً از نام‌های با حروف کوچک استفاده می‌کنند
  • حروف کوچک تمیزتر به نظر می‌رسند
  • نوشتن حروف کوچک ساده‌تر است
خوب:
<body>
<p>This is a paragraph.</p>
</body>


بد:

<BODY>
<P>This is a paragraph.</P>
</BODY>




همهٔ عناصر HTML را ببندید

در HTML بستن همهٔ عناصر لازم نیست، (به عنوان مثال عنصر <p>).

با این حال، ما اکیداً توصیه می‌کنیم تمام عناصر HTML را ببندید، مانند این:

خوب:
<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>


بد:

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


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

در HTML، ترکیب حروف بزرگ و کوچک برای نام‌های ویژگی (attribute names) مجاز است.

پیشنهاد ما استفاده از حروف کوچک برای نام ویژگی هاست زیرا:

  • ترکیب نام‌های با حروف بزرگ و کوچک خوب نیست
  • توسعه‌دهندگان (Developers) معمولاً از نام‌های با حروف کوچک استفاده می‌کنند
  • حروف کوچکتر تمیزتر به نظر می‌رسند
  • نوشتن حروف کوچک ساده‌تر است
خوب:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>


بد:

<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>


مقادیر ویژگی را در علامت نقل قول قرار دهید

در HTML، مقادیر ویژگی بدون نقل‌قول (بدون علامت " ") مجاز است.

با این حال، توصیه می‌کنیم مقادیر ویژگی را ذکر کنید، زیرا:

  • توسعه‌دهندگان معمولاً مقدارهای ویژگی را نقل‌قول می‌کنند
  • خواندن مقادیر نقل‌قول شده ساده‌تر است
  • اگر مقدار، دارای فاصله باشد، باید از علامت نقل‌قول " " استفاده کنید
خوب:
<table class="striped">


بد:

<table class=striped>


خیلی بد:

این کد کار نمی‌کند، زیرا مقدار دارای فاصله است:

<table class=table striped>


همیشه ویژگی‌های alt برای نبود تصویر و width و height را برای تصاویر مشخص کنید

همیشه ویژگی alt را برای تصاویر مشخص کنید. این ویژگی در صورتی اهمیت دارد که تصویر به دلایلی نتواند نمایش داده شود.

همچنین، همیشه width و height تصاویر را تعریف کنید. این امر پرش و سوسو زدن را کاهش می‌دهد، زیرا مرورگر می‌تواند قبل از بارگذاری فضا را برای تصویر ذخیره کند.

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


بد:

<img src="html5.gif">


علامت‌های یکسان و فاصله‌ها

در HTML قرار دادن فاصله در اطراف علامت‌های یکسان مجاز است. اما خواندن بدون فاصله ساده‌تر بوده و موجودیت‌ها را بهتر با هم گروه‌بندی می‌کند.

خوب:
<link rel="stylesheet" href="styles.css">


بد:

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


خودداری از خطوط کد طولانی

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

سعی کنید از خطوط کد طولانی خودداری کنید.



خطوط خالی و تورفتگی‌ها

خطوط خالی، فاصله‌ها یا تورفتگی‌ها را بدون دلیل اضافه نکنید.

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

برای خوانایی، دو space برای تورفتگی اضافه کنید. از کلید Tab استفاده نکنید.

خوب:
<body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>

</body>


بد:

<body>

  <h1>Famous Cities</h1>

  <h2>Tokyo</h2>

  <p>
    Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.
    It is the seat of the Japanese government and the Imperial Palace,
    and the home of the Japanese Imperial Family.
  </p>

</body>


مثال جدول خوب:
<table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Description of A</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Description of B</td>
  </tr>
</table>


مثال لیست خوب:
<ul>
  <li>London</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ul>


هرگز عنصر <title> را حذف نکنید

عنصر <title> در HTML مورد نیاز است.

محتویات title یا عنوان صفحه، برای بهینه‌سازی موتورهای جستجو (SEO) بسیار مهم هستند! عنوان صفحه توسط الگوریتم‌های موتور جستجو برای تعیین ترتیب هنگام فهرست بندی صفحات در نتایج جستجو استفاده می‌شود.

عنصر <title>:

  • عنوان را در نوار ابزار مرورگر تعریف می‌کند
  • هنگامی که صفحه به موارد دلخواه (Favorites) اضافه می‌شود، عنوان آن را ارائه می‌دهد
  • عنوان صفحه را در نتایج موتورهای جستجو نشان می‌دهد

بنابراین، سعی کنید عنوان (title) را تا حد ممکن دقیق و معنی دار قراردهید:

<title>HTML Style Guide and Coding Conventions</title>


حذف <html> و <body>؟

در HTML تگ <html> و <body> را می‌توان حذف کرد.

مثال
<!DOCTYPE html>
<head>
  <title>Page Title</title>
</head>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

Responsive demo.svg


با این حال ما حذف برچسب‌های <html> و <body> را پیشنهاد نمی‌کنیم.

حذف <body> ممکن است باعث ایجاد خطا در مرورگرهای قدیمی‌تر شود.

حذف <html> و <body> می‌تواند سبب خرابی نرم‌افزار XML و DOM شود.



حذف کردن <head>؟

در HTML می‌توان تگ <head> را نیز حذف کرد.

به‌طور پیش‌فرض، مرورگرها همه عناصر قبل <head> را به عنصر <head> اضافه می‌کنند.

مثال
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Responsive demo.svg


با این حال، ما حذف تگ <head> را پیشنهاد نمی‌کنیم.


عناصر خالی HTML را ببندید

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

مجاز :
<meta charset="utf-8">


این هم مجاز:
<meta charset="utf-8" />


اگر می‌خواهید نرم‌افزار XML/XHTML به صفحه شما دسترسی داشته باشد، استفاده از اسلش (/) ایده خوبی است.

در HTML بستن عناصر اختیاری است.


ویژگی lang را اضافه کنید

برای اعلام زبان صفحه وب، همیشه باید ویژگی lang را در داخل تگ <html> قرار دهید. این برای کمک به موتورهای جستجو و مرورگرها است.

مثال
<!DOCTYPE html>
<html lang="en-us">
<head>
  <title>Page Title</title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Responsive demo.svg



متا دیتا (Meta Data)

برای اطمینان از تفسیر مناسب و نمایه‌سازی (Indexing) صحیح موتورهای جستجو، زبان و کدگذاری کاراکتر <meta charset="charset"> باید هرچه سریع‌تر در یک سند HTML تعریف شوند:

نمونه کد <meta>:
<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>


تنظیم Viewport

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

باید عنصر <meta> زیر را در همهٔ صفحات وب خود اضافه کنید:

<meta name="viewport" content="width=device-width, initial-scale=1.0">


این دستورالعملی را در مورد نحوهٔ کنترل ابعاد و مقیاس‌بندی صفحه به مرورگر می‌دهد.

بخش width=device-width عرض صفحه را بگونه‌ای تنظیم می‌کند که از عرض صفحهٔ نمایش دستگاه پیروی کند (که بسته به دستگاه‌های مختلف متفاوت است).

بخش initial-scale=1.0 سطح اولیه بزرگنمایی را هنگامی که صفحه برای اولین بار بارگذاری می‌شود تنظیم می‌کند.

در اینجا نمونه‌ای از یک صفحه وب بدون متا تگ viewport و همان صفحه وب با متا تگ viewport آمده‌است:

Responsive demo.svg


نکته: اگر در حال مرور این صفحه در تلفن یا رایانه لوحی هستید، می‌توانید روی دو پیوند بالا کلیک کنید تا تفاوت را مشاهده کنید.


توضیحات در HTML

توضیحات کوتاه باید در یک خط نوشته شود:

<!-- This is a comment -->


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

<!--
  This is a long comment example. This is a long comment example.
  This is a long comment example. This is a long comment example.
-->


اگر به اندازه دو فاصله space تو رفتگی داشته باشند، مشاهدهٔ توضیحات طولانی آسانتر می‌شود.



استفاده ار برگه‌های استایل (Style Sheets)

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

نمونه
<link rel="stylesheet" href="styles.css">


قوانین کوتاه CSS را می‌توان بصورت فشرده نوشت:

نمونه
p.intro {font-family:Verdana;font-size:16em;}


قوانین CSS طولانی را می‌توان در چندین خط نوشت:

نمونه
body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}


  • آکولاد ابتدایی { را در همان خط انتخابگر (selector) قرار دهید
  • یک فاصله قبل از آکولاد ابتدایی استفاده کنید { + space
  • دو فاصله تو رفتگی به کار ببرید space + space
  • بعد از هر جفت خصوصیت-مقدار (property-value)، یک نقطه ویرگول ; استفاده کنید
  • اگر مقدار دارای فاصله است آن را در علامت نقل قول قرار دهید
  • آکولاد پایانی } را بدون فاصله ابتدایی، در یک خط جدید قرار دهید


بارگذاری جاوااسکریپت در HTML

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

نمونه
<script src="myscript.js">


دسترسی به عناصر HTML توسط جاوااسکریپت

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

دو وضعیت جاوااسکریپت نتایج متفاوتی را ایجاد می‌کنند:

مثال

getElementById("Demo").innerHTML = "Hello";

getElementById("demo").innerHTML = "Hello";

مثال
<!DOCTYPE html>
<html>
<body>

<p id="Demo">This is paragraph 1.</p>
<p id="demo">This is paragraph 2.</p>

<script>
// Only paragraph 2 will be overwritten
document.getElementById("demo").innerHTML = "HELLO.";
</script>

</body>
</html>

Responsive demo.svg



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

برخی از وب سرورها (Apache, Unix) در مورد نام فایل‌ها به بزرگی و کوچکی حروف حساس هستند: "london.jpg" با "London.jpg" متفاوت است.

وب سرورهای دیگر (Microsoft, IIS) حساس به بزرگی و کوچکی حروف نیستند: "london.jpg" با "London.jpg" یا "london.jpg" برابر است.

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

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

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



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

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

فایل‌های CSS باید دارای پسوند .css داشته باشند.

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



تفاوت بین پسوندهای .htm و .html

هیچ تفاوتی بین پسوندهای .htm و .html وجود ندارد!

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



پیش‌فرض نام فایل‌ها

هنگامی که یک URL نام فایل را مشخص نمی‌کند (مانند https://wikicod.ir/css) سرور یک نام فایل پیش‌فرضی را برمی‌گرداند. نام‌های فایل پیش‌فرض رایج: index.html ,index.htm, default.html و default.htm هستند.

اگر سرور شما فقط با نام "index.html" بعنوان نام فایل پیش‌فرض پیکربندی شده، فایل شما باید "index.html" نام گذاری شود نه "default.html".

با این حال سرورها می‌توانند با بیش از یک نام فایل پیکربندی شوند و معمولاً می‌توانید به میزان مورد نیاز نام فایل‌های پیش‌فرض تنظیم کنید.


منابع آموزشی




به‌روزرسانی شده: ۵ روز پیش