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

۱ . همیشه تگ ها را ببندید

بسیاری از کاربران ، ترجیح میدهند که تگها را نبندند و به این شکل عمل کنند :

که این کار بر اساس متدهای امروزی کاملا اشتباه است و شما باید حتما تگهای خود را ببندید . در زیر میتوانید نمونه ی درست کد بالا را مشاهده کنید :

2 . همیشه doctype درست را اعلان کنید

DOCTYPE کدی است که در ابتدای فایل های html قرار میگیرد و به مرورگر اطلاع میدهد که فایل حاوی کدهای html یا xhtml یا مخلوطی از هر دو است

این doctype ها بیشترین استفاده را در بین کاربران دارند :

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

۳ . هیچ گاه از استایل های inline یا درونی استفاده نکنید

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

وسوسه انگیز است ! اما در حال کار بر روی کدها ، هیچ گاه از استایل های درونی استفاده نکنید چون در اکثر موارد باعث بروز خطا میشوند . میتوانید پس از تمام کردن کدها استایل را به فایل css خود اضافه کنید :

4 . تمام فایل های css را بین تگهای head جای دهید

به طور پیش فرض ، شما میتوانید فایل های css قالب خود را در هر جایی لود کنید . اما برای کاهش زمان بارگذاری قالب این کدها باید بین دو تگ head قرار بگیرند :

5 . فایل های javascript را در انتهای کدها جای دهید

همانطور که میدانید فایل های css تقریبا تمام خصوصیات اکثر قالب ها را در بر دارند ، بنابراین در مرحله اول باید این فایلها لود شوند . حالا فرض کنید یک کاربر وارد سایت شما میشود و در ابتدا چندین کد javascript لود میشوند در صورتی که کاربر هیچ تغییری در صفحه نمیبیند . بنابراین برای بارگذاری سریعتر صفحه میتوان کدهای javascript را در انتهای کدهای قالب قرار داد . بهترین محل برای این لود این فایل ها قبل تگ </body> است .

۶ . هیچ گاه از کدهای جاوااسکریپت inline یا درونی استفاده نکنید

یکی دیگر از کارهای رایجی که کدنویسان انجام میدهند استفاده از کدهای جاوااسکریپت inline یا درونی است . در این روش فانکشن هایی مانند onclick به یک تگ نسبت داده میشود . هیچ گاه از این روش استفاده نکنید . میتوانید این کدها را به یک فایل js منتقل و سپس فایل را درون قالب لود کنید . میتوانید به سادگی از addEventListener/attachEvent استفاده کنید یا اگر از فریم ورک jquery استفاده میکنید با متد click میتوانید به راحتی کدی مشابه بسازید .

7 . بطور مداوم validate کنید !

انجام عمل validation یا معتبرسازی html و css یکی از کارهایی است که حتما باید در طول انجام کار انجام دهید . با نصب کردن افزونه ی Web Developer Toolbar روی مرورگر فایرفاکس خود و کلیک راست کردن روی صفحه و زدن گزینه های validate HTML و validate CSS میتوانید این کار را به سادگی انجام دهید .

۸ . افزونه firebug را دانلود کنید

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

۹ . افزونه firebug را استفاده کنید

بسیاری از کاربران firebug فقط از ۲۰ درصد امکانات این افزونه استفاده میکنند . اگر بدون استفاده از این افزونه کار طراحی وب انجام میدهید ، واقعا در حال آزار دادن خودتان هستید ! به زودی مقاله ای کامل در مورد استفاده ی firebug در سایت ارسال خواهم کرد .

۱۰ . نام تگ های خود را به صورت lowercase وارد کنید

شما میتوانید تگهای خود را به صورت زیر هم وارد کنید :

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

موفق باشید