قراردادهای کدزنی و راهنمای استایل
هوشمند و پایدار در آینده باشید
استفاده سازگار از استایل، فهم HTML شما را برای دیگران ساده‌تر می‌کند.[۱]
استفاده کردن نحو خوش فرم "نزدیک به XHTML" می‌تواند هوشمندانه باشد.
همیشه کد خود را مرتب، تمیز و خوش‌فرم نگاه دارید.
از نوع سند صحیح استفاده کنید
همیشه نوع سند را در اولین خط سند خود اعلان کنید:
<!DOCTYPE html>
اگر می‌خواهید سند با تگ‌های با حروف کوچک سازگار باشد، می‌توانید از کد زیر استفاده کنید:
<!doctype html>
از نام های عنصر با حرف کوچک استفاده کنید
در HTML استفاده از ترکیب حروف کوچک و بزرگ در نام عنصرها مجاز است.
پیشنهاد ما استفاده از عنصرهای با حروف کوچک است زیرا:
- ترکیب نام‌ها با حروف کوچک و بزرگ بد است
- توسعه دهندگان معمولاً از نام‌های با حروف کوچک استفاده می‌کنند
- حروف کوچک تمیزتر به نظر می‌رسند
- نوشتن حروف کوچک ساده‌تر است
بد
1 <SECTION>
2 <p>This is a paragraph.</p>
3 </SECTION>
خیلی بد
1 <Section>
2 <p>This is a paragraph.</p>
3 </SECTION>
خوب
1 <section>
2 <p>This is a paragraph.</p>
3 </section>
همهٔ عنصرهای HTML را ببندید
در HTML بستن همه عنصرها لازم نیست، (به عنوان مثال عنصر <p>).
ما پیشنهاد می‌کنیم همهٔ عنصرهای HTML را ببندید.
بد
1 <section>
2 <p>This is a paragraph.
3 <p>This is a paragraph.
4 </section>
خوب
1 <section>
2 <p>This is a paragraph.</p>
3 <p>This is a paragraph.</p>
4 </section>
عنصرهای خالی HTML را ببندید
در HTML بستن عنصرها اختیاری است.
مجاز
<meta charset="utf-8">
این هم مجاز
<meta charset="utf-8" />
با این حال، نماد خط مورب (/) در XHTML و XML لازم است.
اگر می‌خواهید نرم‌افزار XML به صفحه شما دسترسی داشته باشد، استفاده از خط مورب (/) ایده خوبی است.
از نام های ویژگی با حروف کوچک استفاده کنید
در HTML استفاده از حروف بزرگ و کوچک برای نام‌های ویژگی‌ها مجاز است.
پیشنهاد ما استفاده از حروف کوچک برای نام ویژگی هاست زیرا:
- ترکیب نام‌های با حروف بزرگ و کوچک خوب نیست
- توسعه دهندگان معمولاً از نام‌های با حروف کوچک استفاده می‌کنند (مانند XHTML)
- حروف کوچکتر تمیزتر به نظر می‌رسند
- نوشتن حروف کوچک ساده‌تر است
بد
<div CLASS="menu">
خوب
<div class="menu">
مقادیر ویژگی را در علامت نقل قول قرار دهید
در HTML مقدارهای ویژگی بدون نقل قول (بدون علامت " ") مجاز است.
پیشنهاد ما استفاده از ویژگی‌های دارای علامت نقل قول است زیرا:
- توسعه دهندگان معمولاً مقدارهای ویژگی را نقل قول می‌کنند (مانند XHTML)
- خواندن مقدارهای نقل قول شده ساده‌تر است
- اگر مقدار، دارای فاصله باشد، باید از علامت نقل قول استفاده کنید
خیلی بد
این کد کار نمی‌کند، زیرا مقدار دارای فاصله است:
<table class=table striped>
بد
<table class=striped>
خوب
<table class="striped">
ویژگی های تصویر
همیشه ویژگی alt را تصاویر اضافه کنید. این ویژگی هنگامی اهمیت دارد که تصویر به دلایلی نتواند نمایش داده شود. همچنین همیشه عرض و ارتفاع تصویر را مشخص کنید. این کار باعث کاهش لرزش می‌شود زیرا مرورگر می‌تواند فضای مورد نیاز تصویر را پیش از بارگذاری رزرو کند.
بد
<img src="html5.gif">
خوب
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
علامت‌های یکسان و فاصله ها
در HTML قرار دادن فاصله در اطراف علامت‌های یکسان مجاز است. اما خواندن بدون فاصله ساده تر بوده و موجودیت‌ها را بهتر با هم گروه‌بندی می‌کند.
بد
<link rel = "stylesheet" href = "styles.css">
خوب
<link rel="stylesheet" href="styles.css">
خودداری از خطوط کد طولانی
هنگام استفاده از ویرایشگر HTML، پیمایش به چپ و راست برای خواندن کد HTML راحت نیست.
سعی کنید از خطوط کد طولانی تر از 80 کاراکتر خودداری کنید.
خطوط خالی و و تورفتگی ها (Indentation)
بی دلیل خطوط خالی اضافه نکنید.
برای خوانایی، برای جدا کردن بلوک‌های کد بزرگ و منطقی، خطوط خالی اضاف کنید.
برای خوانایی، به اندازه دو فاصله تورفتگی اضافه کنید. از کلید tab استفاده نکنید.
از تو رفتگی‌ها و خطوط خالی غیرضروری استفاده نکنید. تورفتگی برای هر عنصر لازم نیست.
غیر ضروری
1 <body>
2
3 <h1>Famous Cities</h1>
4
5 <h2>Tokyo</h2>
6
7 <p>
8 Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
9 and the most populous metropolitan area in the world.
10 It is the seat of the Japanese government and the Imperial Palace,
11 and the home of the Japanese Imperial Family.
12 </p>
13
14 </body>
بهتر
1 <body>
2
3 <h1>Famous Cities</h1>
4
5 <h2>Tokyo</h2>
6 <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
7 and the most populous metropolitan area in the world.
8 It is the seat of the Japanese government and the Imperial Palace,
9 and the home of the Japanese Imperial Family.</p>
10
11 </body>
مثال جدول
1 <table>
2 <tr>
3 <th>Name</th>
4 <th>Description</th>
5 </tr>
6 <tr>
7 <td>A</td>
8 <td>Description of A</td>
9 </tr>
10 <tr>
11 <td>B</td>
12 <td>Description of B</td>
13 </tr>
14 </table>
مثال لیست
1 <ul>
2 <li>London</li>
3 <li>Paris</li>
4 <li>Tokyo</li>
5 </ul>
حذف <html> و <body>؟
در HTML تگ <html> و <body> را می‌توان حذف کرد.
کد زیر بعنوان HTML تأییذ اعتبار می‌شود:
مثال
1 <!DOCTYPE html>
2 <head>
3 <title>Page Title</title>
4 </head>
5
6 <h1>This is a heading</h1>
7 <p>This is a paragraph.</p>
با این حال ما حذف تگ <html> و <body> را پیشنهاد نمی‌کنیم.
عنصر <html> ریشه (به انگلیسی: root) سند است. این عنصر مکان پیشنهادی برای تخصیص زبان صفحه است:
<!DOCTYPE html>
<html lang="en-US">
اعلان یک زبان برای دسترس پذیری برنامه‌های کاربردی (صفحه خوان‌ها) و موتورهای جستجو مهم است.
حذف <html> و <body> می‌تواند سبب خرابی نرم‌افزار XML و DOM شود.
حذف <body> ممکن است باعث ایجاد خطاها در مرورگرهای قدیمی‌تر شود (IE9).
حذف کردن <head>؟
در HTML می‌توان تگ <head> را نیز حذف کرد.
بطور پیش‌فرض، مرورگرها همه عنصرهای قبل <body> را به عنصر <head> اضافه می‌کنند.
می‌توانید با حذف تگ <head> پیچیدگی HTML را کاهش دهید:
مثال
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
با این حال، ما حذف تگ <head> را پیشنهاد نمی‌کنیم.
توسعه‌دهندگان وب با حذف تگ‌ها بیگانه هستند. زمان می‌برد تا بعنوان راهنما ایجاد شود.
فراداده
عنصر <title> در HTML مورد نیاز است. عنوان را تا حد امکان با معنا ایجاد کنید:
<title>HTML Syntax and Coding Style</title>
برای تضمین تفسیر و شاخص گذاری درست توسط موتور جستجو، هم زبان و هم کدگذاری کاراکتر باید هرچه سریعتر در سند تعریف شوند:
1 <!DOCTYPE html>
2 <html lang="en-US">
3 <head>
4 <meta charset="UTF-8">
5 <title>HTML Syntax and Coding Style</title>
6 </head>
تنظیم Viewport
HTML متدی برای طراحی کرده که به طراحان وب اجازه کنترل viewport را از طریق تگ <meta> می‌دهد.
Viewport ناحیه قابل رویت توسط کاربر در صفحه وب است. در دستگاه‌های مختلف متفاوت است و در موبایل‌ها کوچکتر از صفحه نمایش یک رایانه خواهد بود.
باید عنصر viewport <meta> را در همهٔ صفحات وب خود اضافه کنید:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
یک عنصر viewport <meta> در مورد نحوه کنترل ابعاد و مقیاس بندی صفحه به مرورگر دستورالعمل‌هایی می‌دهد.
بخش width=device-width عرض صفحه را بگونه‌ای تنظیم می‌کند که از عرض صفحه نمایش دستگاه پیروی کند (که بسته به دستگاه‌های مختلف متفاوت است).
بخش initial-scale=1.0 سطح اولیه بزرگنمایی را هنگامی که صفحه برای اولین بار بارگذاری می‌شود تنظیم می‌کند.
در اینجا مثالی از یک صفحه وب بدون تگ meta viewport و همان مثال با تگ meta viewport نشان داده شده‌است:
نکته: اگر این صفحه را در موبایل یا تبلت می‌بینید، می‌توانید روی دو لینک زیر کلیک کنید تا تفاوت را مشاهده کنید.
ساخت نمونه مثال این بخش در دست اقدام است.
اظهار نظر در 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.
-->
اگر به اندازه دو فاصله تو رفتگی داشته باشند، مشاهده اظهار نظرات طولانی آسانتر می‌شود.
برگه های استایل
از نحو ساده برای لینک زدن به برگه‌های استایل استفاده می‌شود (نوع ویژگی لازم نیست):
<link rel="stylesheet" href="styles.css">
قوانین کوتاه را می‌توان بصورت فشرده نوشت مانند:
p.intro {font-family: Verdana; font-size: 16em;}
قوانین طولانی را می‌توان در چند خط نوشت:
1 body {
2 background-color: lightgrey;
3 font-family: "Arial Black", Helvetica, sans-serif;
4 font-size: 16em;
5 color: black;
6 }
- آکولاد ابتدایی را در همان خط انتخابگر (به انگلیسی: selector) قرار دهید
- یک فاصله قبل از آکولاد ابتدایی استفاده کنید
- دو فاصله تو رفتگی به کار ببرید
- بعد از هر جفت خصوصیت-مقدار یک نقطه ویرگول ; استفاده کنید
- اگر مقدار دارای فاصله است آن را در علامت نقل قول قرار دهید
- آکولاد پایانی را بدون فاصله ابتدایی، در یک خط جدید قرار دهید
- از خطوط دارای بیش از ۸۰ کاراکتر خودداری کنید
بارگذاری جاوا اسکریپت در HTML
از نحو ساده برای بارگذاری اسکریپت‌های خارجی استفاده می‌شود (نوع ویژگی لازم نیست):
<script src="myscript.js">
دسترسی به عنصرهای HTML توسط جاوا اسکریپت
دنباله ای از استفادهٔ «نامرتب» از استایل‌های HTML می‌تواند منجر به خطاهایی در جاوااسکریپت شود.
دو وضعیت جاوا اسکریپت نتایج متفاوتی را ایجاد می‌کنند:
مثال
var obj = getElementById("Demo")
var obj = getElementById("demo")
از راهنمای استایل جاوا اسکریپت بازدید کنید.
استفاده از نام فایل‌ها با حروف کوچک
برخی از وب سرورها (آپاچی و یونیکس) در مورد نام فایل‌ها به بزرگی و کوچکی حروف حساس هستند: "london.jpg" با "London.jpg" متفاوت است.
وب سرورهای دیگر (Microsoft, IIS) حساس به بزرگی و کوچکی حروف نیستند: "london.jpg" با "London.jpg" یا "london.jpg" برابر است.
اگر ترکیبی از حروف بزرگ و کوچک را استفاده کنید، باید بسیار استوار (به انگلیسی: Consistent) باشید.
اگر از یک سرور غیرحساس به بزرگی و کوچکی حروف (به انگلیسی: insensitive) به سرور حساس منتقل می‌شوید، حتی خطاهای کوچک هم وب شما را تخریب می‌کند.
برای جلوگیری از این مشکلات، همیشه از نام فایل‌ها با حروف کوچک استفاده کنید.
افزونه های (به انگلیسی: Extensions) فایل
فایل‌های HTML باید یک افزونه .html یا .htm داشته باشند.
فایل‌های CSS باید افزونه .css داشته باشند.
فایل‌های جاوا اسکریپت باید افزونه .js داشته باشند.
تفاوت بین .html و .htm
هیچ تفاوتی بین افزونه‌های .html و .htm نیست. توسط همه مرورگرهای وب یا وب سرورها با هردو بعنوان HTML رفتار می‌شود.
تفاوت های فنی
هنگامی که یک URL نام فایل را مشخص نمی‌کند (مانند https://wikicod.ir/css) سرور یک نام فایل پیش‌فرضی را برمی‌گرداند. نام‌های فایل پیش‌فرض رایج index.html ,index.htm default.html و default.htm هستند.
اگر سرور شما فقط با "index.html" بعنوان نام فایل پیش‌فرض پیکربندی شده، فایل شما باید "index.html" نام گذاری شود نه "index.htm.".
با این حال سرورها می‌توانند با بیش از یک نام فایل پیکربندی شوند و معمولاً می‌توانید به میزان مورد نیاز نام فایل‌های پیش‌فرض تنظیم کنید.
به هرحال، افزونه کامل برای فایل HTML .hml است و دلیلی ندارد که از آن استفاده نشود.
منابع آموزشی