آموزش طراحی سایتآموزش HTML

آشنایی با کنوانسیون های کد نویسی در HTML

راهنمای سبک HTML5 و کنوانسیون های کد نویسی

منظور از کنوانسیون های کد نویسی چیست؟ چگونه از یک سبک پایدار در برنامه نویسی استفاده کنیم؟ چگونه از یک سبک در HTML استفاده کنیم؟ در این مقاله می‌خواهیم در رابطه با نحوه کد نویسی پایدار و اصولی در HTML و مهم تر از آن نسخه HTML5 صحبت کنیم.

سرفصل‌های پست

کنوانسیون های کد نویسی در html

توسعه دهندگان وب اغلب درباره استایل کد و قواعد آن در html مطمئن نیستند.

بین سال های 2000 و 2010، بسیاری از توسعه دهندگان وب از html به سمت xhtml رفتند.

توسط xhtml، توسعه دهندگان مجبور بودند بر روی نوشتن کد معتبر و شکل یافته تمرکز کنند.

وقتی پای نظم در html5 به میان می آید کمی درهم و برهم است.

باهوش و آینده نگر باشید

استفاده از یک استایل کد به صورت پایدار در html باعث می شود دیگران بتوانند به راحتی کد های شما را درک کنند.

در آینده، برنامه هایی مانند xml خوان ها ممکن است بخواهند کد های html شما را بخوانند. استفاده از کد های شکل یافته مناسب نزدیک به xhtml می تواند هوشمندانه باشد.

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

استفاده از doctype مناسب

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

<!DOCTYPE html>

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

<!doctype html>

به طور کلی نمونه اول با نمونه دوم هیچ فرقی نمی‌کند.

استفاده از حروف کوچک در نام تگ

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

  • ترکیب حروف کوچک و بزرگ بد است.
  • توسعه دهندگان معمولا از حروف کوچک برای نام ها استفاده می کنند مانند xhtml.
  • حروف کوچک تمیز به نظر میرسد.
  • نوشتن حروف کوچک آسان تر است.

نمونه بد استفاده از نام تگ ها

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

همانطور که در نمونه مشاهده می‌کنید، در این مثال از تگ section به صورت بزرگ استفاده شده است ولی از تگ p به صورت کوچک استفاده شده است. این استفاده یا برعکس آن استفاده پیشنهاد شده‌ای نیست ولی با اینحال جوابگو است.

نمونه خیلی بد استفاده از نام تگ ها

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

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

نمونه خوب استفاده از نام تگ ها

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

یک نمونه خوب از استفاده از نام تگ‌ها را در بالا مشاهده می‌کنید. هردو بخش حروف کوچک و خیلی شکیل تر از دو نمونه پیشین و این باعث می‌شود که فهم کد ها برای برنامه نویسان دیگر هم آسان تر باشد. پیشنهاد می‌کنم که حتما اینگونه تگ‌ها را معرفی کنید.

بستن همه تگ های html

در html5 شما مجبور نیستید همه تگ ها را ببندید(به عنوان مثال <p>). با این حال ما توصیه می کنیم همه تگ ها را ببندید.

نمونه بد

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

در نمونه بالا تگ های p شروع شده اند ولی پایانی ندارند. به طور کلی HTML این تگ ها را می‌شناسد ولی نکته اصلی این است که در حال حاضر تگ p اولی درون تگ section قرار دارد ولی تگ p دومی علاوه بر اینکه درون تگ section شناخته می‌شود، بلکه درون تگ p اول نیز قرار دارد. با توجه به این موضوع برای دسترسی به آن‌ها از طریق DOM جاوا اسکریپت احتمالا به مشکل خواهیم خورد.

نمونه خوب

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

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

بستن تگ های خالی در HTML5

در html5 بستن یک تگ خالی اختیاری است. منظور از تگ‌های خالی تگ‌هایی هستند که به تگ بسته شونده نیاز ندارند.

<meta charset="utf-8">
یا
<meta charset="utf-8" />

فرقی نمیکنه

با این حال، استفاده از / برای بستن تگ ها در xml و xhtml ضروری است. اگر انتظار دارید که نرم افزار xml خوان به صفحه شما دسترسی پیدا کند، بهتر است از / استفاده کنید.

کوتیشن در مقدار خواص

Html5 اجازه می دهد تا در تعریف مقادیر خواص تگ ها از کوتیشن استفاده نشود.

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

  • توسعه دهندگان معمولا از کوتیشن همانطور که در xhtml استفاده می کردند استفاده می کنند.
  • خوانایی مقادیر کوتیشن آسان تر است.
  • اگر مقدار مورد نظر دارای فاصله است باید از کوتیشن استفاده کنید.

نمونه خیلی بد خاصیت ها

<table class=table striped>

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

نمونه بد خاصیت ها

<table class=striped>

این حالت هم به علت هایی توصیه نمی‌شود. یکی از مهم‌ترین دلایلی که نباید از این نوع استفاده کنیم این است که اگر بخواهیم از چندین خاصیت در تگ استفاده کنیم این مدل این امکان را به ما نمی‌دهد و دلیل دیگر هم این است که این مدل استاندارد معرفی شده HTML5 نیست.

نمونه خوب خاصیت ها

<table class="striped">

بهترین حالت ممکن این است که از کوتیشن برای معرفی خاصیت ها استفاده کنیم. این مدل که در نمونه بالا آمده است استانداردیست که برای کد نویسی HTML پیشنهاد شده است.

با استفاده از کوتیشن شما می‌توانید چندین خاصیت را درون تگ‌ها استفاده کنید.

خواص تصاویر

همیشه خاصیت alt به تصاویر اضافه کنید. این خاصیت زمانی اهمیت دارد که تصویر تعیین شده به دلایلی نمی تواند نمایش داده شود. همچنین اینکار در سئو هم تاثیر خوبی داره و عنوانی که برای تصویر انتخاب می‌کنید، میتونه در نتایج نمایش داده بشه و تصویر شما را بیاره. همچنین، همیشه طول و عرض تصویر را تعریف کنید. تعریف طول و عرض باعث می شود مرورگر قبل از بارگیری، یک فضا را برای تصویر رزرو کند.

نمونه بد استفاده از خاصیت ها در تصاویر

<img src="html5.gif">

در نمونه بالا هیچ مشکلی از نظر استانداردی HTML وجود ندارد. اینکه میگیم نمونه بد به علت استفاده نکردن از خاصیت alt و مشخص نکردن طول و عرض تصویر هست.

نمونه خوب استفاده از خاصیت ها در تصاویر

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

به علت استفاده از alt و مشخص شدن طول و عرض تصویر با استفاده از استایل این نمونه نمونه بهتری نسبت به نمونه بالاست. البته میتوانید به جای استفاده از استایل از خاصیت width و height استفاده کنید.

در رابطه آشنایی با تصاویر در HTML یک مقاله کامل نوشته ایم که پیشنهاد می‌کنم این مقاله را بخوانید.

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

نسخه html5 اجازه می دهد در کنار علامت ها از فضای خالی استفاده کنید. اما علامت های بدون فضای خالی خوانایی بهتری دارند و همچنین گروه بندی موجودیت ها آسان می شود.

نمونه‌ای از فاصله گذاری

<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>

همانطور که در بالا می‌بینید با استفاده از 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>

در نمونه بالا با استفاده از خطوط خالی به اندازه و استفاده نکردن از tab برای فاصله گذاری کد را خلوت تر کرده‌ایم.

حذف <html> و <body> ؟

در html5، تگ <html> و <body> می توانند حذف شوند.

کد های زیر در یک سند html5 کاملا معتبر هستند.

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

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

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

تگ <html> یک عنصر ریشه ای سند است که توصیه می شود برای تعیین زبان صفحه از آن استفاده شود.

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

تعریف تگ <body> برای دسترسی سایر اپلیکیشن ها و موتور های جستجو به صفحه مهم است.

حذف تگ <html> یا <body> می تواند باعث بروز مشکل در DOM جاوا اسکریپت و نرم افزار های فیدخوان شود. حذف <body> می تواند باعث ایجاد خطا در مرورگر های قدیمی IE9 شود.

حذف <head> ؟

در html5، تگ <head> نیز می تواند حذف شود.

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

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

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

</html>

با این حال ما توصیه می کنیم از حذف این تگ پرهیز کنید. حذف تگ ها در بین توسعه دهندگان وب امری غیر معمول است. بنابراین برای رواج استفاده از آن نیاز به زمان است.

متا دیتا

عنصر <title> در html5 یک عنصر ضروری است. این عنصر را تا حد ممکن معنا دارد کنید.

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

مطمئن شوید محتوای این عنصر به خوبی قابل تفسیر است و در موتور های جستجو ایندکس می شود. زبان صفحه و انکود کاراکتر باید تا حد ممکن در صفحه تعریف شوند.

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

در رابطه با تگ‌های متا و متا دیتا ها در مقاله آشنایی با تگ Meta به صورت کامل توضیح داده‌ایم، می‌توانید برای کسب اطلاعات بیشتر آن را مطالعه کنید.

تنظیم viewport

نسخه html5 یک روش جدید برای طراحان وب برای کنترل ویو پورت از طریق تگ meta ارائه داده است.

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

شما باید کد متای زیر را برای تنظیم viewport برروی همه صفحات وب استفاده کنید.

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

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

قسمت width=device-width طول صفحه را براساس طول صفحه دستگاه تنظیم می کند(هر دستگاه طول صفحه نمایش متفاوتی دارد)

قسمت initial-scale=1.0 حداقل بزرگنمایی صفحه را در اولین بارگیری تعیین می کند.

در رابطه با ViewPort یک مقاله کامل نوشتیم که پیشنهاد می‌کنم آن را با عنوان آشنایی با Viewport در HTML مطالعه کنید.

کامنت در 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.
-->

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

در رابطه آشنایی با کامنت ها مقاله ای نوشته ایم و می‌تواند برای شما مفید باشد.

صفحات استایل

استفاده از یک روش ساده برای اتصال به صفحه استایل css :

<link rel="stylesheet" href="styles.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;
}
  • قرار دادن براکت باز در خط انتخاب کننده (selector).
  • استفاده از یک فاصله قبل از باز کردن براکت.
  • استفاده از دو فاصله برای دندانه گذاری.
  • استفاده از سمی کالن بعد از هر خاصیت و مقدار آن تا آخرین خاصیت.
  • استفاده از کوتیشن فقط برای مقدار هایی که دارای فاصله هستند.
  • قرار دادن براکت بسته در خط جدید بدون فاصله.
  • پرهیز از خطوط بیش از 80 کاراکتر

در رابطه با اتصال ها در آموزش های CSS، نوید معدن نژاد عزیز در یک فصل به نام فراخوانی کد CSS در HTML توضیح داده است.

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

استفاده ساده از قواعد برای بارگیری اسکریپت های بیرونی(نوشتن خاصیت ضروری نیست)

<script src="myscript.js">

دسترسی عناصر html توسط جاوا اسکریپت

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

var obj = getElementById("Demo")

var obj = getElementById("demo")

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

بعضی از وب سرور ها مانند(apache,unix) به حروف بزرگ و کوچک حساس هستند. به عنوان مثال “Tehran.jpg” و “Tehran.jpg” متفاوت هستند.

مابقی وب سرور ها(مانند مایکروسافت و IIS) به بزرگی و کوچکی حروف حساس نیستند.

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

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

پسوند فایل ها

پسوند فایل های html معمولا .html یا .htm است. فایل های css باید پسوند .css داشته باشند. اسکریپت های جاوا اسکریپت دارای پسوند .js می باشند.

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

به طور کلی تفاوت خاصی بین این دو پسوند وجود ندارد. هر دو به عنوان یک صفحه html توسط سرور ها و مرورگر ها شناخته می شوند.

این تفاوت بین پسوند ها ناشی از سیستم های اولیه dos است. در این سیستم ها پسوند فایل ها به سه کاراکتر محدود بود. در سیستم عامل های یونیکس محدودیتی برای تعداد کاراکتر پسوند وجود نداشت از این رو .html رواج یافت.

تفاوت های فنی

هنگامی که یک url حاوی نام فاصل مقصد نباشد. سرور به صورت خودکار یک نام پیش فرض باز می گرداند. نام فایل های پیش فرض رایج index.html, index.htm, default.html و default.htm است.

اگر سرور شما فقط با نام پیش فرض index.html تنظیم شده است، فایل های شما حتما باید index.html نام گذاری شوند نباید به جای آن از index.htm استفاده کنید.

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

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

نتیجه گیری

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

این مقاله هم به پایان رسید. اگر سوال، پیشنهاد یا انتقادی داشتید حتما آن را با من در میان بگذارید و من در اولین فرصت بهتون پاسخ میدم. تا مقاله بعدی…

برچسب ها

علی اسمعیلی

درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم...

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


حداکثر حجم فایل برای آپلود: 1 مگابایت.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر