قوانین کدنویسی در HTML5

قوانین و پیشنهادات کدنویسی در HTML5

همانطور که میدانید HTML قوانین بازتر و آزاد تری نسبت به XHTML دارد و این لزوما معنای مثبتی ندارد! به هم ریختگی در قوانین و مشخص نبودن یا سخت گیرانه نبودن آن ها ممکن است باعث مشکلات مختلفی شود. به همین دلیل بین سال های 2000 تا 2010 بسیاری از توسعه دهندگان از HTML به XHTML مهاجرت کردند. XHTML قوانین مشخص تر و سخت گیرانه تری دارد و این مسئله باعث آرامش ذهن این توسعه دهندگان می شد.

سوال اینجاست که حالا ما چه کنیم؟ آیا ما باید به XHTML مهاجرت کنیم؟ پاسخ خیر است. شما مجبور به مهاجرت به XHTML نیستید بلکه باید کد های HTML خود را به صورت صحیح و مناسب بنویسید. در این مقاله روش صحیح کد نویسی HTML5 را به شما آموزش خواهیم داد. هدف کلی ما در این کدها نزدیک کردن شیوه ی کدنویسی HTML به شیوه ی XHTML است.

استفاده از DOCTYPE

همیشه اولین خط از سند خود را به تعیین DOCTYPE اختصاص دهید:

<!DOCTYPE html>

اگر می خواهید ثبات سند خود را با تگ های حروف کوچک حفظ کنید می توانید این DOCTYPE را به شکل زیر بنویسید:

<!doctype html>

نگارش عناصر با حروف کوچک

HTML5 به شما اجازه می دهد که نام عناصر را با حروف کوچک و بزرگ (حتی به صورت ترکیبی) بنویسید اما هیچ گاه چنین کاری انجام ندهید. توصیه ی ما استفاده از حروف کوچک است چرا که:

ترکیب حروف بزرگ و کوچک اصلا جالب و منظم نیست، و تقریبا هیچکس از آن استفاده نمی کند.
توسعه دهندگان معمولا از حروف کوچک استفاده می کنند (مخصوصا در XHTML که قانون است).
استفاده از حروف کوچک ظاهر سند شما را آراسته تر نشان می دهد.
تایپ و نوشتن کدها با حروف کوچک بسیار آسان تر است.

یک مثال بد:

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

یک مثال بسیار بسیار بد:

<Section> 
  <p>This is a paragraph.</p>
</SECTION>

مثال صحیح:

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

بستن کد با تگ های پایانی

HTML5 به شما اجازه می دهد که از عناصر بدون تگ پایانی استفاده کنید اما ما پیشنهاد می کنیم به هیچ عنوان چنین کاری را انجام ندهید. از آنجا که می خواهیم استایل خود را به XHTML نزدیک کنیم باید تمام تگ ها را ببندید.

یک مثال بد و غیر استاندارد:

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

یک مثال صحیح و معتبر:

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

بستن تگ های empty

در زبان HTML می توانید به هر دو شیوه ی زیر کدنویسی کنید:

<meta charset="utf-8">

<meta charset="utf-8" />

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

attribute ها

در HTML5 اجازه دارید با هر حروفی که می خواهید Attribute ها را بنویسید اما باز هم دلایل قبلی را ذکر می کنیم:

ترکیب حروف بزرگ و کوچک اصلا جالب و منظم نیست، و تقریبا هیچکس از آن استفاده نمی کند.
توسعه دهندگان معمولا از حروف کوچک استفاده می کنند (مخصوصا در XHTML که قانون است).
استفاده از حروف کوچک ظاهر سند شما را آراسته تر نشان می دهد.
تایپ و نوشتن کدها با حروف کوچک بسیار آسان تر است.

بنابراین مثال بد و غیر معتبر می شود:

<div CLASS="menu">

و مثال صحیح می شود:

<div class="menu">

همچنین بهتر است که مقادیر attribute ها را در علامت نقل قول انگلیسی (quotation) قرار دهید:

تقریبا تمامی توسعه دهندگان این مقدار را در quotation می گذارند و در XHTML نیز اجباری است
اگر مقادیر را در quotation بگذارید هنگام خواندن کد سریع تر می توانید پیدایشان کنید
اگر مقدار مورد نظر شما دارای space یا فضای خالی است، استفاده از quotation حتی در HTML5 نیز اجباری خواهد بود

مثالی بسیار بسیار بد (این مثال در مرورگر کار نخواهد کرد چرا که اسپیس و فضای خالی دارد اما در quotation قرار داده نشده است):

<table class=table striped>

مثالی بد:

<table class=striped>

مثال صحیح و معتبر:

<table class="striped">

اضافه کردن alt و طول و عرض

همیشه به تصویر هایتان alt بدهید. از طرفی اگر تصویرتان درست بارگذاری نشود کاربر می تواند توضیح کوتاهی از آن را ببیند و از طرفی برای سئوی سایتتان مهم است.

مثالی بد:

<img src="html5.gif">

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

مثال صحیح:

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

عدم فاصله با علامت مساوی

از نظر فنی اجازه ی گذاشتن space یا فاصله در کنار علامت مساوی را دارید ولی از نظر ظاهری جذابیت کد را از بین برده و همچنین خوانایی آن را سخت می کنید. مثال بد:

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

مثال صحیح:

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

نکته: بهتر است خطوط کد HTML تان از 80 بیشتر نشود چرا که خواندنش برای خودتان سخت می شود.

اضافه کردن فضای خالی اضافی

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

حذف نکردن <html> و <body> و غیره

با اینکه در HTML5 اجازه ی چنین کاری را دارید و کدتان را میتوانید به شکل زیر بنویسید اما ما توصیه اکید داریم که به هیچ وجه چنین کاری انجام ندهید:

<!DOCTYPE html>
<head>
  <title>Page Title</title>
</head>

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

مثال بالا اصلا مثال خوبی نیست و به سئوی سایت شما ضربه می زند. در واقع حذف <html> یا<body> میتواند باعث خراب شدن DOM و نرم افزار XML شود. همچنین حذف کردن <body> باعث بروز خطاهایی در مرورگر Internet Explorer 9 می شود.

عنصر <html> در نام سلسله مراتبی بالاترین عنصر است (عنصر ریشه ای) بنابراین پیشنهاد می شود زبان صفحه را در این قسمت مشخص کنید. مثال صحیح:

<!DOCTYPE html>
<html lang="en-US">

بدین صورت کار موتور های جست و جو را کمی راحت تر می کنید.

یکی دیگر از عناصری که مجاز به حذف آن (از نظر فنی) هستید <head> است اما مشخصا به هیچ عنوان چنین پیشنهادی به شما نمی دهیم:

<!DOCTYPE html>
<html>
<title>Page Title</title>

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

</html>

کد بالا یک مثال بد است. در واقع داستان این است که مرورگرها به طور پیش فرض تمام عناصرِ قبل از <body> را درون یک تگ <head> میگذارند بنابراین کسری را جبران می کنند. دلیل حذف کردن تگ <head> نیز کوتاه تر کردن کد HTML است اما به دردسر هایش نمی ارزد، مگر کد شما با حذف دو یا سه تگ چقدر ساده تر می شود؟

اطلاعات meta

تگ <title> در HTML5 اجباری است بنابراین سعی کنید آن را معنی دار و مناسب انتخاب کنید:

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

دیگر اطلاعات meta مانند encoding نیز بهتر است در ابتدای سند اضافه شوند:

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

بدین صورت موتور های جست و جو راحت تر با سایت شما کار می کنند.

تنظیم viewport

اگر از قسمت های قبلی یادتان باشد گفتیم که تنظیم viewport از مهم ترین قسمت های کدنویسی است. HTML5 روشی ارائه کرد تا طراحان وب سایت به viewport دسترسی پیدا کنند. viewport به معنای قسمتی از صفحه ی HTML است که کاربر مشاهده می کند. به طور مثال اگر صفحه طولانی باشد و اسکرول عمودی بخورد، در هر لحظه، آن قسمتی از صفحه که کاربر مشاهده می کند، viewport نام دارد.

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

<meta name="viewport" content="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.
-->

stylesheet ها

stylesheet معمولا همان کدهای CSS ما هستند. برای اضافه کردن آن ها می توان به این شکل عمل کرد:

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

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

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

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

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

بهتر است از یک اسپیس قبل از براکت آغازین استفاده کنید، برای ایجاد فرورفتگی از دو عدد اسپیس استفاده کنید، پس از هر خصوصیت از نقطه ویرگول استفاده کنید، اگر مقادیرتان دارای اسپیس بود از quotation استفاده کنید و در آخر نیز براکت پایانی را بدون اسپیس قرار داده و سعی کنید هر خط بیشتر از 80 کاراکتر نباشد.

نام فایل ها با حروف کوچک

برخی از وب سرور ها مانند Apache و Unix نسبت به بزرگی و کوچکی نام فایل ها حساس هستند بنابراین برای آن ها london.jpg با London.jpg متفاوت است. برخی دیگر از وب سرور ها مانند Microsoft و IIS اینطور نیستند. اگر بخواهید از حروف بزرگ و کوچک استفاده کنید به مشکلات زیادی برخورد میکنید چرا که باید حواستان به کوچکترین جزئیات باشد. همچنین اگر از یک سرور مانند Microsoft به وب سروری مثل Apache مهاجرت کنید باید کدهایتان را تغییر دهید چرا که به خاطر کوچک و بزرگی حروف در نام فایل ها به خطاهایی در بارگذاری برخورد خواهید کرد. بنابراین بهتر است همیشه از حروف کوچک استفاده کنید.

تفاوت بین html و html

هیچ تفاوتی عمده ای بین این دو نیست و وب سرورها و مرورگرها با آن ها به طور یکسان برخورد می کنند. تفاوتشان از آنجا آمده است که در سیستم های DOS، پسوندها حداکثر می توانستند 3 کاراکتر باشند اما بعدا با معرفی Unix این محدودیت برداشته شد و ما HTML را داریم.

تنها تفاوت جزئی این دو این است: زمانی که به آدرسی مانند https://www.roxo.ir میرویم و میبینیم که هیچ فایلی در آخر آدرس وجود ندارد دلیلی پشت آن نفهته است. در این حالت سرور از نام فایل های پیش فرض مانند index.htm یا index.html یا default.html و ... استفاده می کند و به صورت خودکار آن ها را بارگذاری می کند. بنابراین اگر سرور شما فقط index.html را به عنوان صفحه ی پیش فرض می شناسد نباید از htm استفاده کنید. البته تمام این ها قابل تنظیم و تغییر است.

امیدوارم از این قسمت لذت برده باشید.

دیدگاه‌های شما (1 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

سبحان

17 شهریور 1398

خیلی ممنون از ترجمه ی خوبتان . خیلی کار مطالعه را برای من آسون کردین . فقط ی نکته اونم این که در آخرین زیر عنوان این صفحه یعنی : تفاوت بین html و html باید یکی از HTML ها به htm تغیر کنه فکر کنم.