منظور از کنوانسیون های کد نویسی چیست؟ چگونه از یک سبک پایدار در برنامه نویسی استفاده کنیم؟ چگونه از یک سبک در HTML استفاده کنیم؟ در این مقاله می‌خواهیم در رابطه با نحوه کد نویسی پایدار و اصولی در HTML و مهم تر از آن نسخه HTML5 صحبت کنیم.
سرفصل‌های پست
- 1 کنوانسیون های کد نویسی در html
- 2 استفاده از doctype مناسب
- 3 استفاده از حروف کوچک در نام تگ
- 4 بستن همه تگ های html
- 5 بستن تگ های خالی در HTML5
- 6 کوتیشن در مقدار خواص
- 7 خواص تصاویر
- 8 فاصله و علامت های یکسان
- 9 نمونه پیشنهادی فاصله گذاری
- 10 پرهیز از خطوط بلند کد و خطوط خالی
- 11 حذف <html> و <body> ؟
- 12 حذف <head> ؟
- 13 متا دیتا
- 14 تنظیم viewport
- 15 کامنت در html
- 16 صفحات استایل
- 17 بارگیری جاوا اسکریپت در html
- 18 دسترسی عناصر html توسط جاوا اسکریپت
- 19 استفاده از نام های حروف کوچک
- 20 پسوند فایل ها
- 21 پایان ترم
- 22 نتیجه گیری
کنوانسیون های کد نویسی در 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 است. هیچ دلیلی برای استفاده نکردن از آن وجود ندارد.
پایان ترم
[box type=”info” class=”question-from-users” width=””]به صورت خلاصه بگو از این مقاله چه چیزی آموختی؟
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
در این مقاله به صورت کامل با روش های پایدار و استاندارد نوشتن کد در HTML آشنا شدیم. امیدوارم با رعایت این نکات بهترین کد را برای خودتان ایجاد کنید.
این مقاله هم به پایان رسید. اگر سوال، پیشنهاد یا انتقادی داشتید حتما آن را با من در میان بگذارید و من در اولین فرصت بهتون پاسخ میدم. تا مقاله بعدی…
7 پاسخ
سلام خسته نباشید
من از کجا متوجه بشوم که سایت از قوانین html5 پیروری میکنه ؟
این کد هایی که گفتید باید تو سورس سایت باشه؟
با اینسپکت یا ویو سورس میشه متوجه شد؟
ممنونم
سلام
بله با ویو سورس میشه فهمید.
جواب سوال:
برای حفظ خوانایی و راحتی تغییر دادن کدها در آینده توسط هر کدنویسی بهتره برخی قراردادهای اختیاری رو هم علاوه بر قواعد اجباری رعایت کنیم ؛ مثلا:
از حروف کوچک در نوشتن نام تگ ها استفاده کنیم
همه تگ هایی که باز می کنیم رو ببندیم ، حتی تگ های خالی رو
برای نوشتن مقدار صفات حتما از کوتیشن استفاده کنیم
در ثبت خواص تصاویر تنبلی نکنیم ، خصوصا alt و تعیین خواص طول و عرض
از گذاشتن فاصله بین خواص و مقدار آنها پرهیز کنیم
از نوشتن خطوط کد بیش از 80کارکتر تا حد امکان پرهیز کنیم و همچنین بی جا از خط خالی استفاده نکنیم(صرفا برای جدا کردن بلوک های بزرگ کد برای افزایش خوانایی می توانیم استفاده کنیم)
تگ های body و html و head را حذف نکنیم
تنظیمات متا و ویوپورت را انجام دهیم
به گذاشتن کامنت مناسب برای کدهایمان توجه ویژه داشته باشیم
از کدهای css برای استایل دهی به شکل اصولی استفاده کنیم
به صورت تصادفی از حروف کوچک و بزرگ استفاده نکنیم و طبق رویه مشخصی از حروف بزرگ و کوچک استفاده کنیم و یا کلا از حروف کوچک استفاده کنیم
پسوند html را هم کامل بنویسیم و از نوشتن آن به صورت htm پرهیز کنیم
سلام .روز بخیر
میزان کد اچ تی ام ال صفحات سایتم زیاد هست و دنبال روشی هستم که ی مقدار از اون رو کم کنم، در واقع دو سه تا بلاک در صفحات سایتم هست که شامل عنوان و عکس و لینک هست و محتوای آنها اهمیتی برای گوگل نداره ولی باز هم نمی تونم کلا حذفشون کنم آیا روش خاصی برای پیاده سازی آنها هست که کد آنها در اچ تی ام ال نیاد و فقط نمایش داده بشه؟
ممنون میشم راهنمایی کنید.
سلام علی
نه روش خاصی نداره.
پاسخ سوال :
استفاده از حروف کوچک در نام تگ
بستن همه تگ ها (در نسخه html5 بستن همه تگ ها اجباری نیست مثل تگ p)
در html5میتوانیم از کوتیشن برای مقدار صفات استفاده نکنیم اما بهتر است از آنها استفاده کنیم.
تاثیر خاصیت alt در سئو
طول و عرض تصویر شخص کنیم.
در کنار علامت ها از فضای خالی استفاده نکینم.
پرهیز از خطوط بلند که مجبور به اسکرول شویم و همچنین عدم استفاده از خطوط خالی
بهتر است تگ های را حذف نکنیم.
Viewport را تنظیم کنیم.
سلام محمد ممنونم که خیلی کامل نوشتی.