راهنمای استایلنویسی HTML
کد HTML سازگار، تمیز و مرتب، خواندن و درک کد شما را برای دیگران آسانتر میکند. در ادامه چند دستورالعمل و نکته برای ایجاد کد HTML خوب آورده شده است.
همیشه نوع سند را به عنوان اولین خط در سند خود اعلان کنید. نوع سند صحیح برای HTML این است:
<!DOCTYPE html>
HTML به شما اجازه میدهد حروف بزرگ و کوچک را در نام عناصر ترکیب کنید. با این حال، ما توصیه میکنیم که از نام عناصر با حروف کوچک استفاده کنید، زیرا:
ترکیب نامهای با حروف بزرگ و کوچک بد به نظر میرسد.
توسعهدهندگان معمولاً از نامهای با حروف کوچک استفاده میکنند.
حروف کوچک تمیزتر به نظر میرسند.
تایپ کردن حروف کوچک آسانتر است.
خوب:
<body>
<p>This is a paragraph.</p>
</body>
بد:
<BODY>
<P>This is a paragraph.</P>
</BODY>
در HTML، لازم نیست همه عناصر را ببندید (برای مثال عنصر <p>). با این حال، ما اکیداً توصیه میکنیم که تمام عناصر HTML را ببندید، مانند این:
خوب:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>
بد:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>
HTML اجازه میدهد حروف بزرگ و کوچک را در نام صفات ترکیب کنید. با این حال، ما توصیه میکنیم که از نام صفات با حروف کوچک استفاده کنید، زیرا:
ترکیب نامهای با حروف بزرگ و کوچک بد به نظر میرسد.
توسعهدهندگان معمولاً از نامهای با حروف کوچک استفاده میکنند.
حروف کوچک تمیزتر به نظر میرسند.
تایپ کردن حروف کوچک آسانتر است.
خوب:
<a href="https://www.codoloper.com/html/">Visit our HTML tutorial</a>
بد:
<a HREF="https://www.codoloper.com/html/">Visit our HTML tutorial</a>
HTML اجازه میدهد مقادیر صفات بدون کوتیشن باشند. با این حال، ما توصیه میکنیم مقادیر صفات را در کوتیشن قرار دهید، زیرا:
توسعهدهندگان معمولاً مقادیر را در کوتیشن قرار میدهند.
مقادیر داخل کوتیشن خواناتر هستند.
اگر مقدار شامل فاصله (space) باشد، باید از کوتیشن استفاده کنید.
خوب:
<table class="striped">
بد:
<table class=striped>
بسیار بد: این کد کار نخواهد کرد، زیرا مقدار آن شامل فاصله است:
<table class=table striped>
همیشه صفت alt را برای تصاویر مشخص کنید. این صفت در صورتی که تصویر به هر دلیلی نتواند نمایش داده شود، مهم است. همچنین، همیشه width (عرض) و height (ارتفاع) تصاویر را تعریف کنید. این کار پرش تصویر (flickering) را کاهش میدهد، زیرا مرورگر میتواند قبل از بارگذاری تصویر، فضای آن را رزرو کند.
خوب:
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
بد:
<img src="html5.gif">
HTML اجازه میدهد در اطراف علامت مساوی فاصله وجود داشته باشد. اما حالت بدون فاصله خواناتر است و موجودیتها را بهتر کنار هم گروه بندی میکند.
خوب:
<link rel="stylesheet" href="styles.css">
بد:
<link rel = "stylesheet" href = "styles.css">
هنگام استفاده از یک ویرایشگر HTML، اسکرول کردن به چپ و راست برای خواندن کد HTML راحت نیست. سعی کنید از خطوط کد بیش از حد طولانی اجتناب کنید.
بدون دلیل، خطوط خالی، فاصله یا تورفتگی اضافه نکنید. برای خوانایی، خطوط خالی را برای جدا کردن بلوکهای کد بزرگ یا منطقی اضافه کنید. برای خوانایی، دو فاصله تورفتگی اضافه کنید. از کلید 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.</p>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom.</p>
<h2>Paris</h2>
<p>Paris is the capital of France. The Paris area is one of the largest population centers in Europe.</p>
</body>
بد:
<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.</p>
<h2>London</h2><p>London is the capital city of England. It is the most populous city in the United Kingdom.</p>
<h2>Paris</h2><p>Paris is the capital of France. The Paris area is one of the largest population centers in Europe.</p>
</body>
مثال خوب برای جدول:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
مثال خوب برای لیست:
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
<title> را حذف نکنیدعنصر <title> در HTML الزامی است. محتوای عنوان صفحه برای بهینهسازی موتورهای جستجو (SEO) بسیار مهم است! عنوان صفحه توسط الگوریتمهای موتور جستجو برای تصمیمگیری در مورد ترتیب نمایش صفحات در نتایج جستجو استفاده میشود.
عنصر <title>:
یک عنوان در نوار ابزار مرورگر تعریف میکند.
عنوانی برای صفحه هنگام اضافه شدن به علاقهمندیها (favorites) فراهم میکند.
عنوانی برای صفحه در نتایج موتورهای جستجو نمایش میدهد.
بنابراین، سعی کنید عنوان را تا حد امکان دقیق و معنادار بسازید:
<title>HTML Style Guide and Coding Conventions</title>
<html> و <body>؟یک صفحه HTML بدون تگهای <html> و <body> نیز معتبر (validate) خواهد بود:
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
با این حال، ما اکیداً توصیه میکنیم که همیشه تگهای <html> و <body> را اضافه کنید! حذف کردن <body> میتواند در مرورگرهای قدیمیتر باعث خطا شود. حذف کردن <html> و <body> همچنین میتواند نرمافزارهای DOM و XML را دچار مشکل کند.
<head>؟تگ <head> در HTML نیز میتواند حذف شود. مرورگرها تمام عناصر قبل از <body> را به یک عنصر <head> پیشفرض اضافه خواهند کرد.
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
با این حال، ما استفاده از تگ <head> را توصیه میکنیم.
در HTML، بستن عناصر خالی اختیاری است.
مجاز:
<meta charset="utf-8">
همچنین مجاز:
<meta charset="utf-8" />
اگر انتظار دارید نرمافزار XML/XHTML به صفحه شما دسترسی پیدا کند، اسلش پایانی (/) را نگه دارید، زیرا در XML و XHTML الزامی است.
lang را اضافه کنیدشما باید همیشه صفت lang را داخل تگ <html> قرار دهید تا زبان صفحه وب را اعلان کنید. این کار برای کمک به موتورهای جستجو و مرورگرها در نظر گرفته شده است.
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
برای اطمینان از تفسیر صحیح و نمایهگذاری (indexing) درست توسط موتورهای جستجو، هم زبان و هم رمزگذاری کاراکتر <meta charset="charset"> باید در اولین فرصت ممکن در یک سند HTML تعریف شوند:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8" />
<title>Page Title</title>
</head>
</html>
ویوپورت، ناحیه قابل مشاهده کاربر از یک صفحه وب است. این ناحیه بسته به دستگاه متفاوت است - در یک تلفن همراه کوچکتر از صفحه کامپیوتر خواهد بود. شما باید عنصر <meta> زیر را در تمام صفحات وب خود قرار دهید:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
این دستورالعملهایی را در مورد نحوه کنترل ابعاد و مقیاسبندی صفحه به مرورگر میدهد. بخش width=device-width عرض صفحه را طوری تنظیم میکند که از عرض صفحه دستگاه پیروی کند (که بسته به دستگاه متفاوت خواهد بود). بخش initial-scale=1.0 سطح بزرگنمایی اولیه را هنگام اولین بارگذاری صفحه توسط مرورگر تنظیم میکند. در اینجا نمونهای از یک صفحه وب بدون متا تگ ویوپورت و همان صفحه وب با متا تگ ویوپورت آورده شده است:
نکته: اگر این صفحه را با تلفن یا تبلت مشاهده میکنید، میتوانید روی دو لینک زیر کلیک کنید تا تفاوت را ببینید.
کامنتهای کوتاه باید در یک خط نوشته شوند، مانند این:
<!-- 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.
-->
اگر کامنتهای طولانی با دو فاصله تورفتگی داشته باشند، مشاهده آنها آسانتر است.
برای پیوند دادن به شیوهنامهها از نحو ساده استفاده کنید (صفت type ضروری نیست):
<link rel="stylesheet" href="styles.css">
قوانین کوتاه CSS را میتوان به صورت فشرده نوشت، مانند این:
p.intro {font-family:Verdana;font-size:16em;}
قوانین طولانی CSS باید در چندین خط نوشته شوند:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
آکولاد باز را در همان خط انتخابگر (selector) قرار دهید.
قبل از آکولاد باز از یک فاصله استفاده کنید.
از دو فاصله برای تورفتگی استفاده کنید.
بعد از هر زوج «خصوصیت-مقدار» (property-value)، از جمله آخری، از نقطهویرگول (;) استفاده کنید.
فقط در صورتی که مقدار شامل فاصله باشد، از کوتیشن در اطراف آن استفاده کنید.
آکولاد بسته را در یک خط جدید، بدون فاصله در ابتدای آن، قرار دهید.
برای بارگذاری اسکریپتهای خارجی از نحو ساده استفاده کنید (صفت type ضروری نیست):
<script src="myscript.js">
استفاده از کد HTML "نامرتب" میتواند منجر به خطاهای جاوا اسکریپت شود. این دو دستور جاوا اسکریپت نتایج متفاوتی تولید خواهند کرد:
getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML = "Hello";
برخی از وب سرورها (Apache, Unix) به نام فایلها حساس به حروف (case sensitive) هستند: "london.jpg" را نمیتوان به صورت "London.jpg" دسترسی داشت. سایر وب سرورها (Microsoft, IIS) حساس به حروف نیستند: "london.jpg" را میتوان به صورت "London.jpg" دسترسی داشت. اگر از ترکیبی از حروف بزرگ و کوچک استفاده میکنید، باید از این موضوع آگاه باشید. اگر از یک سرور غیرحساس به حروف به یک سرور حساس به حروف منتقل شوید، حتی خطاهای کوچک وبسایت شما را از کار میاندازد! برای جلوگیری از این مشکلات، همیشه از نام فایل با حروف کوچک استفاده کنید!
فایلهای HTML باید پسوند .html داشته باشند (.htm مجاز است).
فایلهای CSS باید پسوند .css داشته باشند.
فایلهای جاوا اسکریپت باید پسوند .js داشته باشند.
هیچ تفاوتی بین پسوندهای فایل .htm و .html وجود ندارد! هر دو توسط هر مرورگر وب و وب سروری به عنوان HTML در نظر گرفته میشوند.
هنگامی که یک URL در انتهای خود نام فایلی را مشخص نمیکند (مانند "https://www.codoloper.com/")، سرور فقط یک نام فایل پیشفرض مانند "index.html"، "index.htm"، "default.html" یا "default.htm" را اضافه میکند. اگر سرور شما فقط با "index.html" به عنوان نام فایل پیشفرض پیکربندی شده باشد، فایل شما باید "index.html" نامگذاری شود، نه "default.html". با این حال، سرورها را میتوان با بیش از یک نام فایل پیشفرض پیکربندی کرد؛ معمولاً میتوانید هر تعداد نام فایل پیشفرض که میخواهید تنظیم کنید.
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://www.w3schools.com/