کدلپر - مرجع جامع آموزش برنامه‌نویسی

All Right Reserved © 2025 Codoloper

background codoloper

راهنمای استایل نویسی HTML

خانه

راهنمای استایل‌نویسی HTML

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

همیشه نوع سند (Document Type) را اعلان کنید

همیشه نوع سند را به عنوان اولین خط در سند خود اعلان کنید. نوع سند صحیح برای HTML این است:

<!DOCTYPE html>


 

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

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

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

  • توسعه‌دهندگان معمولاً از نام‌های با حروف کوچک استفاده می‌کنند.

  • حروف کوچک تمیزتر به نظر می‌رسند.

  • تایپ کردن حروف کوچک آسان‌تر است.

خوب:

<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 اجازه می‌دهد حروف بزرگ و کوچک را در نام صفات ترکیب کنید. با این حال، ما توصیه می‌کنیم که از نام صفات با حروف کوچک استفاده کنید، زیرا:

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

  • توسعه‌دهندگان معمولاً از نام‌های با حروف کوچک استفاده می‌کنند.

  • حروف کوچک تمیزتر به نظر می‌رسند.

  • تایپ کردن حروف کوچک آسان‌تر است.

خوب:

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


 

بد:



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

 

همیشه مقادیر صفات را در کوتیشن ("") قرار دهید

HTML اجازه می‌دهد مقادیر صفات بدون کوتیشن باشند. با این حال، ما توصیه می‌کنیم مقادیر صفات را در کوتیشن قرار دهید، زیرا:

  • توسعه‌دهندگان معمولاً مقادیر را در کوتیشن قرار می‌دهند.

  • مقادیر داخل کوتیشن خواناتر هستند.

  • اگر مقدار شامل فاصله (space) باشد، باید از کوتیشن استفاده کنید.

خوب:

<table class="striped">

بد:

<table class=striped>


 

بسیار بد: این کد کار نخواهد کرد، زیرا مقدار آن شامل فاصله است:

 
 
<table class=table striped>

 

همیشه برای تصاویر، صفات alt، width و height را مشخص کنید

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

خوب:

<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 راحت نیست. سعی کنید از خطوط کد بیش از حد طولانی اجتناب کنید.

خطوط خالی و تورفتگی (Indentation)

بدون دلیل، خطوط خالی، فاصله یا تورفتگی اضافه نکنید. برای خوانایی، خطوط خالی را برای جدا کردن بلوک‌های کد بزرگ یا منطقی اضافه کنید. برای خوانایی، دو فاصله تورفتگی اضافه کنید. از کلید 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.</p>

  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom.</p>

  <h2>Paris</h2>
  <p>Paris is the capital of France. The Paris area is one of the largest population centers in Europe.</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.</p>
<h2>London</h2><p>London is the capital city of England. It is the most populous city in the United Kingdom.</p>
<h2>Paris</h2><p>Paris is the capital of France. The Paris area is one of the largest population centers in Europe.</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 الزامی است. محتوای عنوان صفحه برای بهینه‌سازی موتورهای جستجو (SEO) بسیار مهم است! عنوان صفحه توسط الگوریتم‌های موتور جستجو برای تصمیم‌گیری در مورد ترتیب نمایش صفحات در نتایج جستجو استفاده می‌شود.

عنصر <title>:

  • یک عنوان در نوار ابزار مرورگر تعریف می‌کند.

  • عنوانی برای صفحه هنگام اضافه شدن به علاقه‌مندی‌ها (favorites) فراهم می‌کند.

  • عنوانی برای صفحه در نتایج موتورهای جستجو نمایش می‌دهد.

بنابراین، سعی کنید عنوان را تا حد امکان دقیق و معنادار بسازید:

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


 

حذف کردن <html> و <body>؟

یک صفحه HTML بدون تگ‌های <html> و <body> نیز معتبر (validate) خواهد بود:

مثال



<head>
  <title>Page Title</title>
</head>

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

با این حال، ما اکیداً توصیه می‌کنیم که همیشه تگ‌های <html> و <body> را اضافه کنید! حذف کردن <body> می‌تواند در مرورگرهای قدیمی‌تر باعث خطا شود. حذف کردن <html> و <body> همچنین می‌تواند نرم‌افزارهای DOM و XML را دچار مشکل کند.

 

حذف کردن <head>؟

تگ <head> در HTML نیز می‌تواند حذف شود. مرورگرها تمام عناصر قبل از <body> را به یک عنصر <head> پیش‌فرض اضافه خواهند کرد.

مثال



<!DOCTYPE html>
<html>
  <title>Page Title</title>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>
 

با این حال، ما استفاده از تگ <head> را توصیه می‌کنیم.

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

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

مجاز:

<meta charset="utf-8">

 

همچنین مجاز:

<meta charset="utf-8" />

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

صفت 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>
 

فراداده (Meta Data)

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

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="UTF-8" />
    <title>Page Title</title>
  </head>
</html>

تنظیم ویوپورت (Viewport)

ویوپورت، ناحیه قابل مشاهده کاربر از یک صفحه وب است. این ناحیه بسته به دستگاه متفاوت است - در یک تلفن همراه کوچک‌تر از صفحه کامپیوتر خواهد بود. شما باید عنصر <meta> زیر را در تمام صفحات وب خود قرار دهید:

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

این دستورالعمل‌هایی را در مورد نحوه کنترل ابعاد و مقیاس‌بندی صفحه به مرورگر می‌دهد. بخش width=device-width عرض صفحه را طوری تنظیم می‌کند که از عرض صفحه دستگاه پیروی کند (که بسته به دستگاه متفاوت خواهد بود). بخش initial-scale=1.0 سطح بزرگ‌نمایی اولیه را هنگام اولین بارگذاری صفحه توسط مرورگر تنظیم می‌کند. در اینجا نمونه‌ای از یک صفحه وب بدون متا تگ ویوپورت و همان صفحه وب با متا تگ ویوپورت آورده شده است:

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

بدون متا تگ ویوپورت

با متا تگ ویوپورت

کامنت‌های 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.
-->

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

استفاده از شیوه‌نامه‌ها (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) قرار دهید.

  • قبل از آکولاد باز از یک فاصله استفاده کنید.

  • از دو فاصله برای تورفتگی استفاده کنید.

  • بعد از هر زوج «خصوصیت-مقدار» (property-value)، از جمله آخری، از نقطه‌ویرگول (;) استفاده کنید.

  • فقط در صورتی که مقدار شامل فاصله باشد، از کوتیشن در اطراف آن استفاده کنید.

  • آکولاد بسته را در یک خط جدید، بدون فاصله در ابتدای آن، قرار دهید.

 

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

 

برای بارگذاری اسکریپت‌های خارجی از نحو ساده استفاده کنید (صفت type ضروری نیست):

<script src="myscript.js">


 

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

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

مثال

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

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

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

برخی از وب سرورها (Apache, Unix) به نام فایل‌ها حساس به حروف (case sensitive) هستند: "london.jpg" را نمی‌توان به صورت "London.jpg" دسترسی داشت. سایر وب سرورها (Microsoft, IIS) حساس به حروف نیستند: "london.jpg" را می‌توان به صورت "London.jpg" دسترسی داشت. اگر از ترکیبی از حروف بزرگ و کوچک استفاده می‌کنید، باید از این موضوع آگاه باشید. اگر از یک سرور غیرحساس به حروف به یک سرور حساس به حروف منتقل شوید، حتی خطاهای کوچک وب‌سایت شما را از کار می‌اندازد! برای جلوگیری از این مشکلات، همیشه از نام فایل با حروف کوچک استفاده کنید!

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

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

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

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

تفاوت بین .htm و .html چیست؟

هیچ تفاوتی بین پسوندهای فایل .htm و .html وجود ندارد! هر دو توسط هر مرورگر وب و وب سروری به عنوان HTML در نظر گرفته می‌شوند.

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

هنگامی که یک URL در انتهای خود نام فایلی را مشخص نمی‌کند (مانند "https://www.codoloper.com/‎")، سرور فقط یک نام فایل پیش‌فرض مانند "index.html"، "index.htm"، "default.html" یا "default.htm" را اضافه می‌کند. اگر سرور شما فقط با "index.html" به عنوان نام فایل پیش‌فرض پیکربندی شده باشد، فایل شما باید "index.html" نام‌گذاری شود، نه "default.html". با این حال، سرورها را می‌توان با بیش از یک نام فایل پیش‌فرض پیکربندی کرد؛ معمولاً می‌توانید هر تعداد نام فایل پیش‌فرض که می‌خواهید تنظیم کنید.