همانطور که میدانید HTML قوانین بازتر و آزاد تری نسبت به XHTML دارد و این لزوما معنای مثبتی ندارد! به هم ریختگی در قوانین و مشخص نبودن یا سخت گیرانه نبودن آن ها ممکن است باعث مشکلات مختلفی شود. به همین دلیل بین سال های 2000 تا 2010 بسیاری از توسعه دهندگان از HTML به XHTML مهاجرت کردند. XHTML قوانین مشخص تر و سخت گیرانه تری دارد و این مسئله باعث آرامش ذهن این توسعه دهندگان می شد.
سوال اینجاست که حالا ما چه کنیم؟ آیا ما باید به XHTML مهاجرت کنیم؟ پاسخ خیر است. شما مجبور به مهاجرت به XHTML نیستید بلکه باید کد های HTML خود را به صورت صحیح و مناسب بنویسید. در این مقاله روش صحیح کد نویسی HTML5 را به شما آموزش خواهیم داد. هدف کلی ما در این کدها نزدیک کردن شیوه ی کدنویسی HTML به شیوه ی XHTML است.
استفاده از DOCTYPE
همیشه اولین خط از سند خود را به تعیین DOCTYPE اختصاص دهید:
|
1
|
<!DOCTYPE html>
|
اگر می خواهید ثبات سند خود را با تگ های حروف کوچک حفظ کنید می توانید این DOCTYPE را به شکل زیر بنویسید:
|
1
|
<!doctype html>
|
نگارش عناصر با حروف کوچک
HTML5 به شما اجازه می دهد که نام عناصر را با حروف کوچک و بزرگ (حتی به صورت ترکیبی) بنویسید اما هیچ گاه چنین کاری انجام ندهید. توصیه ی ما استفاده از حروف کوچک است چرا که:
- ترکیب حروف بزرگ و کوچک اصلا جالب و منظم نیست، و تقریبا هیچکس از آن استفاده نمی کند.
- توسعه دهندگان معمولا از حروف کوچک استفاده می کنند (مخصوصا در XHTML که قانون است).
- استفاده از حروف کوچک ظاهر سند شما را آراسته تر نشان می دهد.
- تایپ و نوشتن کدها با حروف کوچک بسیار آسان تر است.
یک مثال بد:
|
1
2
3
|
<SECTION>
<p>Thisisaparagraph.</p>
</SECTION>
|
یک مثال بسیار بسیار بد:
|
1
2
3
|
<Section>
<p>Thisisaparagraph.</p>
</SECTION>
|
مثال صحیح:
|
1
2
3
|
<section>
<p>Thisisaparagraph.</p>
</section>
|
بستن کد با تگ های پایانی
یک مثال بد و غیر استاندارد:
|
1
2
3
4
|
<section>
<p>Thisisaparagraph.
<p>Thisisaparagraph.
</section>
|
یک مثال صحیح و معتبر:
|
1
2
3
4
|
<section>
<p>Thisisaparagraph.</p>
<p>Thisisaparagraph.</p>
</section>
|
بستن تگ های empty
در زبان HTML می توانید به هر دو شیوه ی زیر کدنویسی کنید:
|
1
|
<meta charset="utf-8">
|
|
1
|
<meta charset="utf-8"/>
|
هر دو کد بالا صحیح هستند. استفاده از اسلش (/) در XHTML و XML ضروری است اما در HTML5 اختیاری است. اگر دوست دارید نرم افزار های XML بتوانند کد شما را بخوانند بهتر است از اسلش پایانی برای تگ های empty استفاده کنید.
attribute ها
در HTML5 اجازه دارید با هر حروفی که می خواهید Attribute ها را بنویسید اما باز هم دلایل قبلی را ذکر می کنیم:
- ترکیب حروف بزرگ و کوچک اصلا جالب و منظم نیست، و تقریبا هیچکس از آن استفاده نمی کند.
- توسعه دهندگان معمولا از حروف کوچک استفاده می کنند (مخصوصا در XHTML که قانون است).
- استفاده از حروف کوچک ظاهر سند شما را آراسته تر نشان می دهد.
- تایپ و نوشتن کدها با حروف کوچک بسیار آسان تر است.
بنابراین مثال بد و غیر معتبر می شود:
|
1
|
<div CLASS="menu">
|
و مثال صحیح می شود:
|
1
|
<div class="menu">
|
همچنین بهتر است که مقادیر attribute ها را در علامت نقل قول انگلیسی (quotation) قرار دهید:
- تقریبا تمامی توسعه دهندگان این مقدار را در quotation می گذارند و در XHTML نیز اجباری است
- اگر مقادیر را در quotation بگذارید هنگام خواندن کد سریع تر می توانید پیدایشان کنید
- اگر مقدار مورد نظر شما دارای space یا فضای خالی است، استفاده از quotation حتی در HTML5 نیز اجباریخواهد بود
مثالی بسیار بسیار بد (این مثال در مرورگر کار نخواهد کرد چرا که اسپیس و فضای خالی دارد اما در quotation قرار داده نشده است):
|
1
|
<table class=table striped>
|
مثالی بد:
|
1
|
<table class=striped>
|
مثال صحیح و معتبر:
|
1
|
<table class="striped">
|
اضافه کردن alt و طول و عرض
همیشه به تصویر هایتان alt بدهید. از طرفی اگر تصویرتان درست بارگذاری نشود کاربر می تواند توضیح کوتاهی از آن را ببیند و از طرفی برای سئوی سایتتان مهم است.
مثالی بد:
|
1
|
<img src="html5.gif">
|
همچنین اگر برخی اوقات به تصاویر خود عرض و طول مناسب و مشخص ندهید، ممکن است با نتایج ناخواسته ای مواجه شوید (مخصوصا در زمان انتظار برای بارگذاری تصاویر).
مثال صحیح:
|
1
|
<img src="html5.gif"alt="HTML5"style="width:128px;height:128px">
|
عدم فاصله با علامت مساوی
از نظر فنی اجازه ی گذاشتن space یا فاصله در کنار علامت مساوی را دارید ولی از نظر ظاهری جذابیت کد را از بین برده و همچنین خوانایی آن را سخت می کنید. مثال بد:
|
1
|
<link rel="stylesheet"href="styles.css">
|
مثال صحیح:
|
1
|
<link rel="stylesheet"href="styles.css">
|
اضافه کردن فضای خالی اضافی
بدون دلیل خاص به سورس کد خود فضاهای خالی مانند اسپیس و اینتر اضافه نکنید. برای بهتر خوانده شدن کد، می توانید اینتر را برای قسمت طولانی از کد استفاده کنید. همچنین می توانید فرورفتگی ایجاد کنید اما از کلید tab استفاده نکنید.
مثال بد:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>
Tokyo isthe capital of Japan,the center of the Greater Tokyo Area,
andthe most populous metropolitan area inthe world.
It isthe seat of the Japanese government andthe Imperial Palace,
andthe home of the Japanese Imperial Family.
</p>
</body>
|
مثال بهتر:
|
1
2
3
4
5
6
7
8
9
10
11
|
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>Tokyo isthe capital of Japan,the center of the Greater Tokyo Area,
andthe most populous metropolitan area inthe world.
It isthe seat of the Japanese government andthe Imperial Palace,
andthe home of the Japanese Imperial Family.</p>
</body>
|
مثالی از جدول ها:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description ofA</td>
</tr>
<tr>
<td>B</td>
<td>Description ofB</td>
</tr>
</table>
|
مثالی از لیست ها:
|
1
2
3
4
5
|
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
|
حذف نکردن <html> و <body> و غیره
با اینکه در HTML5 اجازه ی چنین کاری را دارید و کدتان را میتوانید به شکل زیر بنویسید اما ما توصیه اکید داریم که به هیچ وجه چنین کاری انجام ندهید:
|
1
2
3
4
5
6
7
|
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>Thisisaheading</h1>
<p>Thisisaparagraph.</p>
|
مثال بالا اصلا مثال خوبی نیست و به سئوی سایت شما ضربه می زند. در واقع حذف <html> یا<body> میتواند باعث خراب شدن DOM و نرم افزار XML شود. همچنین حذف کردن <body> باعث بروز خطاهایی در مرورگر Internet Explorer 9 می شود.
عنصر <html> در نام سلسله مراتبی بالاترین عنصر است (عنصر ریشه ای) بنابراین پیشنهاد می شود زبان صفحه را در این قسمت مشخص کنید. مثال صحیح:
|
1
2
|
<!DOCTYPE html>
<html lang="en-US">
|
بدین صورت کار موتور های جست و جو را کمی راحت تر می کنید.
یکی دیگر از عناصری که مجاز به حذف آن (از نظر فنی) هستید <head> است اما مشخصا به هیچ عنوان چنین پیشنهادی به شما نمی دهیم:
|
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>Thisisaheading</h1>
<p>Thisisaparagraph.</p>
</body>
</html>
|
کد بالا یک مثال بد است. در واقع داستان این است که مرورگرها به طور پیش فرض تمام عناصرِ قبل از <body> را درون یک تگ <head> میگذارند بنابراین کسری را جبران می کنند. دلیل حذف کردن تگ <head> نیز کوتاه تر کردن کد HTML است اما به دردسر هایش نمی ارزد، مگر کد شما با حذف دو یا سه تگ چقدر ساده تر می شود؟
اطلاعات meta
تگ <title> در HTML5 اجباری است بنابراین سعی کنید آن را معنی دار و مناسب انتخاب کنید:
|
1
|
<title>HTML5 Syntax andCoding Style</title>
|
دیگر اطلاعات meta مانند encoding نیز بهتر است در ابتدای سند اضافه شوند:
|
1
2
3
4
5
6
|
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML5 Syntax andCoding Style</title>
</head>
|
بدین صورت موتور های جست و جو راحت تر با سایت شما کار می کنند.
تنظیم viewport
اگر از قسمت های قبلی یادتان باشد گفتیم که تنظیم viewport از مهم ترین قسمت های کدنویسی است. HTML5 روشی ارائه کرد تا طراحان وب سایت به viewport دسترسی پیدا کنند. viewport به معنای قسمتی از صفحه ی HTML است که کاربر مشاهده می کند. به طور مثال اگر صفحه طولانی باشد و اسکرول عمودی بخورد، در هر لحظه، آن قسمتی از صفحه که کاربر مشاهده می کند، viewport نام دارد.
در واقع شما باید کد زیر را در تمام صفحاتتان داشته باشید:
|
1
|
<meta name="viewport"content="width=device-width, initial-scale=1.0">
|
در قسمت های قبل به توضیح و بررسی این کد پرداخته ایم بنابراین از آن رد می شویم. در صورت نیاز به اطلاعات بیشتر بهاین مقاله مراجعه کنید.
کامنت ها
کامنت های HTML اگر کوتاه باشند باید به صورت زیر نوشته شوند:
|
1
|
<!--Thisisacomment-->
|
و اگر طولانی باشند نیز باید به این صورت نوشته شوند:
|
1
2
3
4
|
<!--
Thisisalongcomment example.Thisisalongcomment example.
Thisisalongcomment example.Thisisalongcomment example.
-->
|
stylesheet ها
stylesheet معمولا همان کدهای CSS ما هستند. برای اضافه کردن آن ها می توان به این شکل عمل کرد:
|
1
|
<link rel="stylesheet"href="styles.css">
|
همچنین دستورات کوتاه CSS را می توانید به این شکل در یک خط بنویسید:
|
1
|
p.intro{font-family:Verdana;font-size:16em;}
|
اما دستورات طولانی تر را جهت خواناتر شدن به صورت چند خطی بنویسید:
|
1
2
3
4
5
6
|
body{
background-color:lightgrey;
font-family:"Arial Black",Helvetica,sans-serif;
font-size:16em;
color:black;
}
|
بهتر است از یک اسپیس قبل از براکت آغازین استفاده کنید، برای ایجاد فرورفتگی از دو عدد اسپیس استفاده کنید، پس از هر خصوصیت از نقطه ویرگول استفاده کنید، اگر مقادیرتان دارای اسپیس بود از 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 استفاده کنید. البته تمام این ها قابل تنظیم و تغییر است.
امیدوارم از این قسمت لذت برده باشید.
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟