توسعه دهنده های وب گاها درباره سبک کد نویسی و ترکیب هایی که در اچ تی ام ال باید استفاده شود نا مطمئن هستند.
از سال 2000 تا سال 2010 خیلی از توسعه دهنده های وب از اچ تی ام ال به xHTML رفتند.
با ایکس اچ تی ام ال توسعه دهنده ها مجبور بودند که کد های معتبر و شکل گرفته بنویسند.
باید بگوییم که اچ تی ام ال 5 در رسیدن به معتبر سازی کد، نسبت به نسخه های قبلی پیچیده تر است.
در نوشتن کد های HTML خود هوشمند عمل کنید و به آینده توجه داشته باشید
یک استفاده اصولی و همیشگی از سینتکس مناسب HTML، درک کد های نوشته شده توسط شما را برای دیگران آسان تر می کند. همچنین اگر کدهایی که می نویسید کاملا استاندارد باشند، در آینده برنامه هایی همچون xml reader بهتر می توانند کد های شما را بخوانند.
استفاده کردن از یک ترکیب کد ساخت یافته نزدیک به ایکس اچ تی ام ال می تواند انتخابی هوشمندانه باشد.
همیشه کدتان را مرتب، تمیز و دارای شیوه مشخص بنویسید.
از نوع صحیح پرونده استفاده کنید
همیشه نوع پرونده یا همان Document Type را به عنوان اولین سطر از پرونده ی خود تعیین کنید:
اگر همیشه از حروف کوچک استفاده می کنید، به شیوه زیر هم می توانید این کار را انجام دهید:
از حروف کوچک در نام المان ها استفاده کنید
اچ تی ام ال 5 اجازه استفاده از حروف کوچک و حروف بزرگ در نام المان ها را می دهد. اما ما استفاده از حروف کوچک را پیشنهاد می کنیم، چون مخلوط کردن حروف کوچک و بزرگ زیبا نیست و همچنین سایر توسعه دهنده ها همیشه از حروف کوچک استفاده می کنند (مثل ایکس اچ تی ام ال). باید گفت که به طور کلی حروف کوچک تمیز تر به نظر می آیند و حروف کوچک برای نوشتن راحت ترند.
نمونه بد:
نمونه خیلی بد:
نمونه خوب:
همیشه المان هایی که باز می کنید را ببندید
در اچ تی ام ال 5 شما مجبور نیستید که تمام المان ها را ببندید ( برای مثال المان <p> حتما نیاز به </p> ندارد)
البته ما توصیه می کنیم تمام المان های اچ تی ام الی که باز می کنید را ببندید.
نمونه بد:
نمونه خوب:
المان های خالی اچ تی ام ال را ببندید
در اچ تی ام ال پنج بستن المان های خالی دلخواهی است.
اجازه داده شده:
همچنین اجازه داده شده:
به هر حال وجود اسلش پایانی در ایکس اچ تی ام ال و ایکس ام ال الزامی است.
اگر شما می خواهید کد نویسی شما کاملا استاندارد باشد، اسلش پایانی را نگه دارید. (شبیه نمونه دوم)
نام خاصیت ها را با حروف کوچک بنویسید
اچ تی ام ال 5 به استفاده همزمان حروف کوچک و بزرگ در نام خاصیت ها مجوز داده است.
اما ما توصیه می کنیم که از حروف کوچک در نام خاصیت ها استفاده کنید، زیرا همان طور که پیشتر گفتیم، مخلوط کردن حروف کوچک و حروف بزرگ زیبا نیست. همین طور توسعه دهندگان دیگر معمولا از حروف کوچک استفاده می کنند. همچنین حروف کوچک تمیز تر به نظر می آید و حروف کوچک برای نوشتن راحت ترند.
نمونه بد:
نمونه خوب:
در اطراف مقدار خاصیت ها از علامت نقل قول دوتایی استفاده کنید
اچ تی ام ال 5 اجازه می دهد مقدار خاصیت ها را بدون علامت نقل قول نیز وارد کنید.
ما قرار دادن علامت نقل قول دوتایی را هنگام تعریف یک خاصیت برای المان، توصیه می کنیم. زیرا توسعه دهنده ها معمولا مقدار خاصیت ها را با علامت نقل قول دوتایی وارد می کنند همچنین مقدار ها درون علامت نقل قول برای خواندن راحت ترند. البته استفاده از علامت نقل قول، در هنگامی که شما باید مقدار حاوی فاصله استفاده کنید، اجباری است.
نمونه خیلی بد (این کد کار نخواهد کرد چون که مقدار حاوی فاصله است):
نمونه بد:
نمونه خوب:
خاصیت های تصویر (image attributes) را فراموش نکنید
همیشه خاصیت alt را به تصویر اضافه کنید. این خاصیت در هنگامی که عکس به هر دلیلی نمیتواند نمایش داده شود مهم است. همچنین همیشه طول و عرض تصویر را مشخص کنید.
نمونه بد :
نمونه خوب:
فاصله در اطراف علامت های مساوی هنگام نوشتن خاصیت ها را رعایت کنید
اچ تی ام ال 5 به گذاشتن فاصله در اطراف علامت های مساوی اجازه می دهد. ولی بدون فاصله برای خواند راحت تر بوده و تمام موارد را بهتر در کنار هم جمع می کند.
نمونه بد:
نمونه خوب:
از کد طولانی در یک خط دوری کنید
در هنگام استفاده از یک ویرایشگر متن، راحت نیست که به چپ راست برای خواندن کد ها بریم.
سعی کنید بیشتر از 80 کاراکتر به یک سطر از کد طول ندهید.
خط های خالی را بدون دلیل اضافه نکنید
برای قابل خواندن تر شدن کد ها، خط های خالی را بین بلوک های بزرگ اضافه کنید. همچنین از خط های خالی و دندانه گذاری های غیر ضروری خودداری کنید.
نمونه غیر ضروری:
نمونه بهتر:
از قلم انداختن <html> و <body>؟
در اچ تی ام ال 5 تگ های <html> و <body> را می توان از قلم انداخت.
کد زیر به عنوان اچ تی ام ال 5 معتبر است:
به هر حال ما از قلم انداختن این دو تگ را پیشنهاد نمی کنیم.
المان <html> ریشه پرونده است. و محل توصیه شده برای مشخص کردن زبان صفحه می باشد:
تعیین کردن یک زبان برای موتور های جستجو مهم است.
از قلم انداختن <html> یا <body> می تواند باعث ایراد در اجرای برنامه های مبتنی بر DOM و XML شود.
همچنین از قلم انداختن <body> می تواند ایراد هایی در مرورگر های قدیمی تر به وجود بیاورد.
از قلم انداختن head
در اچ تی ام ال 5 تگ head نیز می تواند از قلم انداخته شود.
به صورت معمول، مرورگر ها تمام المان های قبل از body را به المان head اضافه می کنند.
شما می توانید با از قلم انداختن تگ head همچنان یک صفحه سالم داشته باشید:
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>به هر حال ما از قلم انداختن تگ
headرا توصیه نمی کنیم.
از قلم انداختن تگ ها برای توسعه دهنده های وب نا آشناست. این به زمان نیاز دارد تا به عنوان یک راه شناخته شود.
فرا داده یا meta data
المان title در اچ تی ام ال پنج التزامی است. Title را هر قدر که می توانید معنا دارتنظیم کنید:
برای مطمئن شدن از تفسیر بهتر و دسته بندی شدن بهتر در موتور های جستجو، هر دوی زبان و اینکدینگ کاراکتر ها باید هر چه سریعتر در پرونده تعریف شوند:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>نحوه نگارش صحیح اچ تی ام ال 5</title>
</head>
تنظیم کردن درگاه نمایش viewport
اچ تی ام ال 5 یک متود را معرفی کرد تا به طراحان صفحات وب، قابلیت کنترل بر روی درگاه نمایش را از درون تگ <meta> ارائه دهد (مخصوص ریسپانسیو).
درگاه نمایش یا همان viewport، مکانی است که صفحه به کاربر نمایش داده می شود. درگاه نمایش در دستگاه های مختلف متفاوت است و در یک تلفن همراه کوچک تر است تا یک صفحه کامپیوتر.
تمام صفحات وب شما باید شامل المان <meta> برای viewport به صورت زیر باشد:
یک المان <meta> مخصوصی viewport به مرورگر دستورالعمل چگونه کنترل کردن ابعاد و مقیاس یک صفحه وب در دستگاه های گوناگون را می دهد.
قسمت width=device-width عرض صفحه را برای پیروی از عرض دستگاه تنظیم می کند. (که وابسته به دستگاه های مختلف متفاوت است)
قسمت initial-scale=1.0 سطح بزرگنمایی اولیه را وقتی که صفحه بارگزاری می شود تنظیم می کند.
Comment در اچ تی ام ال
کامنت های کوتاه را باید در یک خط مثل مثال زیر نوشت:
کامنت هایی که طول آنها بیشتر از یک خط می شود باید به این صورت نوشته شوند:
برگه های style sheet
از یک ترکیب ساده برای لینک کردن فایل های CSS استفاده کنید (خاصیت type ضروری نیست):
قوانین کوتاه CSS را می توان به صورت فشرده اینطور نوشت:
دستور های طولانی باید در طول چند خط نوشته شوند:
- شروع براکت گذاری را در همان خطی که انتخاب گر وجود دارد قرار دهید. همچنین از یک فاصله قبل از نوشتن براکت استفاده کنید.
- از سمی کلون یا نقطه ویرگول بعد از نوشتن هر مولفه CSS استفاده کنید.
- فقط از نقل قول در اطراف مقدار هایی استفاده کنید که شامل اسپیس هستند.
- براکت پایانی را در خط جدید بدون فاصله قرار دهید.
- از خط های طولانی تر از 80 کاراکتر بپرهیزید.
بارگیری جاوا اسکریپت در اچ تی ام ال
از این سینتکس ساده برای لود فایل های js خارجی استفاده کنید (خاصیت type ضروری نیست):
<script src="myscript.js">
دسترسی پیدا کردن به المان های اچ تی ام ال با جاوا اسکریپت
استفاده از سینتکس اچ تی ام ال نامناسب، میتواند ایراد هایی در کد های جاوا اسکریپت ایجاد کند.
این دو عبارت جاوا اسکریپت می توانند نتیجه های مختلفی داشته باشند:
از اسم های فایل با حروف کوچک استفاده کنید
بعضی از سرور های وب (apache, unix) به کوچک و بزرگ بودن حروف اسم فایل ها حساس هستند و اگر تغییری در کوچک یا بزرگ بودن حروف در اسم فایل به وجود آید، دسترسی به آن ها غیر ممکن می شود.
دیگر سرور های وب (Microsoft,IIS) به بزرگی یا کوچکی حروف حساس نیستند و تغییری در این زمینه مشکلی در دسترسی به فایل ایجاد نخواهد کرد.
اگر شما یک مخلوط از حروف کوچک یا بزرگ را استفاده کنید باید خیلی دقیق آن را بنویسید.
اگر شما از یک سرور غیر حساس به حروف به یک سرور حساس به حروف انتقال بدهید حتی یک ایراد کوچک میتواند وب سایت شما را خراب کند.
برای دوری از این مشکل ها همیشه از حروف کوچک استفاده کنید.
پسوند فایل ها
فایل های اچ تی ام ال باید یک پسوند .html و یا .htm داشته باشند.
فایل های سی اس اس با پسوند .css شناخته می شوند.
و فایل های جاوا اسکریپت نیز پسوند .js را دارا هستند.
تفاوت بین .htm و .html
تفاوتی بین این دو پسوند فایل وجود ندارد. هر دو به عنوان اچ تی ام ال در هر مرورگر یا سرور وب تفسیر می شوند.
تفاوت ها به علت سیستم هایی است که این پسوند ها در آن ها ایجاد شده اند.
Htm بوی سیستم قدیمی dos را می دهد که در آن پسوند ها محدود بودند که تنها سه کاراکتر داشته باشند و html هم از سیستم عامل های unix سررشته می گیرند که این محدودیت را دارا نبود.
تفاوت های فنی
وقتی که یک url حاوی اسم فایل نیست، سرور به دنبایل فایل های پیشفرض می گردد تا آن ها را بازگرداند. اسم های فایل معمولی این ها هستند:
index.html, index.htm, default.html , default.htm
اگر سرور شما فقط با اسم فایل index.html به عنوان اسم فایل معمولی پیکر بندی شده باشد، نام فایل شما باید index.html باشد نه index.htm .
به هرحال سرور را میتوان طوری تنظیم کرد که فایل خاصی را به عنوان فایل پیشفرض در نظر بگیرد.
به طور پیشفرض پسوند کامل فایل های اچ تی ام ال .html است و برای استفاده نکردن آن دلیلی وجود ندارد.
