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

HTML5 Syntax & Conventions

1 406

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

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

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

استفاده از DOCTYPE

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

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

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

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

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

یک مثال بد:

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

مثال صحیح:

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

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

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

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

بستن تگ های empty

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

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

attribute ها

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

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

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

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

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

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

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

مثالی بد:

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

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

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

مثالی بد:

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

مثال صحیح:

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

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

مثال صحیح:

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

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

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

مثال بد:

مثال بهتر:

مثالی از جدول ها:

مثالی از لیست ها:

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

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

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

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

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

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

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

اطلاعات meta

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

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

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

تنظیم viewport

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

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

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

کامنت ها

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

و اگر طولانی باشند نیز باید به این صورت نوشته شوند:

stylesheet ها

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

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

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

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

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

ترتیبی که روکسو برای یادگیری مطالب سری صفر تا صد HTML به شما توصیه می‌کند:
1 نظر
  1. سبحان

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

    تفاوت بین html و html

    باید یکی از HTML ها به htm تغیر کنه فکر کنم.

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

mezitli escort
mezitli escort