قرارداد سبک راهنمای HTML و برنامه نویسی

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

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

 

همیشه نوع سند را اعلام کنید

همیشه نوع سند را به عنوان اولین سطر در سند خود اعلام کنید.

نوع صحیح سند برای HTML:

<!DOCTYPE html>

 

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

HTML اجازه می دهد حروف بزرگ و کوچک را در نام عناصر مخلوط کنید.

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

 

خوب:

<body>
<p>یک پاراگراف</p>
</body>

بد:

<BODY>
<P>یک پاراگراف</P>
</BODY>

 

بستن همه عناصر HTML

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

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

 

خوب:

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

بد:

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

 

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

HTML اجازه می دهد حروف بزرگ و کوچک را در نام ویژگی ها مخلوط کنید.

با این حال ، ما توصیه می کنیم از نام ویژگی های کوچک استفاده کنید ، زیرا:

 

خوب:

<a href="https://maxdev.ir/category/html_tutorial/">مشاهده آموزش های HTML ما</a>

بد:

<a HREF="https://maxdev.ir/category/html_tutorial/">مشاهده آموزش های HTML ما</a>

 

همیشه مقادیر صفت را نقل کنید

HTML مقادیر ویژگی را بدون نقل قول مجاز می داند.

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

 

خوب:

<table class="striped">

بد:

<table class=striped>

خیلی بد ( این کد کار نمی کند، زیرا حاوی فضای خالی است ):

<table class=table striped>

 

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

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

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

 

حوب:

<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 مناسب نیست.

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

 

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

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

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

برای خوانایی ، دو فاصله تورفتگی اضافه کنید. از کلید 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>

مثال خوب برای لیست:

<ul>
  <li>لندن</li>
  <li>پاریس</li>
  <li>توکیو</li>
</ul>

 

هرگز از عنصر <title> رد نشوید

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

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

عنصر <title>:

 

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

<title>قرارداد سبک راهنمای HTML و برنامه نویسی</title>

 

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

یک صفحه HTML بدون برچسب <html> و <body> معتبر خواهد بود:

 
<!DOCTYPE html>
<head>
  <title>عنوان صفحه</title>
</head>

<h1>سرتیتر</h1>
<p>یک پاراگراف</p>
امتحان کنید

 

با این حال ، اکیداً توصیه می کنیم همیشه برچسب های <html> و <body> را اضافه کنید!

حذف <body> می تواند در مرورگرهای قدیمی خطا ایجاد کند.

حذف <html> و <body> همچنین می تواند نرم افزار DOM و XML را خراب کند.

 

حذف <head>؟

برچسب <head> نیز می تواند حذف شود.

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

<!DOCTYPE html>
<html>
<title>عنوان صفحه</title>
<body>

<h1>سرتیتر</h1>
<p>یک پاراگراف</p>

</body>
</html>
امتحان کنید

 

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

 

عناصر HTML خالی بسته شود؟

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

 

مجاز است:

<meta charset="utf-8">

این هم مجاز است:

<meta charset="utf-8" />

 

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

 

زبان را اضافه کنید

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

<!DOCTYPE html>
<html lang="en-us">
<head>
  <title>عنوان صفحه</title>
</head>
<body>

<h1>سرتیتر</h1>
<p>یک پاراگراف</p>

</body>
</html>
امتحان کنید

 

اطلاعات متا

برای اطمینان از تفسیر مناسب و نمایه سازی صحیح موتور جستجو، باید هر دو زبان و کاراکتر کد <meta charset = "charset"> را در اسناد HTML تعریف کنیم.

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="UTF-8">
  <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 وجود دارد:

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

ساخته شود ( https://www.w3schools.com/html/html5_syntax.asp )

 

نظرات HTML

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

<!-- This is a comment -->

 

نظراتی که شامل بیش از یک خط هستند ، باید به صورت زیر نوشته شوند:

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

 

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

 

استفاده از Sheets 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;
}

 

 

JavaScript در HTML بارگیری می شود

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

<script src="myscript.js">

 

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

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

این دو عبارت JavaScript نتایج متفاوتی را ایجاد می کنند:

 
getElementById("Demo").innerHTML = "سلام";

getElementById("demo").innerHTML = "سلام";
امتحان کنید

 

از نام پرونده های کوچک استفاده کنید

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

سایر وب سرورها (مایکروسافت ، IIS) به حروف کوچک و بزرگ حساس نیستند: "london.jpg" به عنوان "London.jpg" قابل دسترسی است.

اگر از ترکیبی از حروف بزرگ و کوچک استفاده می کنید ، باید از این موضوع آگاه باشید.

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

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

 

پسوندهای پرونده

پرونده های HTML باید پسوند .html یا .htm داشته باشند.

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

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

 

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

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

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

 

نامهای پیش فرض پرونده

هنگامی که یک URL نام پرونده را در انتها مشخص نمی کند (مانند "https://www.maxdev.ir/") ، سرور فقط یک نام پرونده پیش فرض مانند "index.html" ، "index.htm" ، "" اضافه می کند default.html "یا" default.htm ".

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

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