همیشه نوع سند را اعلام کنید در html
همیشه نوع سند را به عنوان اولین خط در سند خود اعلام کنید.
نوع سند صحیح برای HTML :
<!DOCTYPE html>
بیشتر بدانیم : کد تمیز در برنامه نویسی (clean code)
از نام عناصر کوچک استفاده کنید
HTML از ترکیب حروف بزرگ و کوچک برای نوشتن عناصر خود پشتیبانی می کند.
با این حال، توصیه ما این است که از نام عناصر با حروف کوچک استفاده کنید، زیرا:
- ترکیب حروف بزرگ و کوچک برای نوشتن عناصر زیاد جالب به نظر نمی رسد.
- توسعه دهندگان معمولا از حروف کوچک برای نوشتن عناصر استفاده می کنند.
- حروف کوچک تمیزتر به نظر می رسند.
- نوشتن حروف کوچک راحت تر است.
مثال: در زیر دو نوع نوشتن بد و خوب را برای شما آورده ایم.
کد خوب:
<body>
<p>This is a paragraph.</p>
</body>
کد بد:
<BODY>
<P>This is a paragraph.</P>
</BODY>
بستن همه عناصر HTML
در 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.w3schools.com/html/">Visit our HTML tutorial</a>
کد بد:
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
همیشه مقادیر ویژگی ها را درون نقل قول قرار دهید
HTML استفاده از مقادیر برای ویژگی ها بدون قرار دادن درون نقل قول پشتیبانی می کند.
با این حال، ما توصیه می کنیم که همیشه مقادیر ویژگی ها را درون نقل قول قرار دهید، زیرا:
- توسعه دهندگان همیشه مقادیر ویژگی ها را درون نقل قول قرار می دهند.
- خواندن مقادیر ویژگی ها درون نقل قول آسان تر و راحت تر است.
- اگر مقدار حاوی فاصله (فضای سفید) باشد، باید از نقل قول برای نوشتن آن استفاده کنید.
بیشتر بدانیم : آموزش تگ های نقل قول و استناد در html (Quotation and Citation)
مثال: در زیر سه نوع نوشتن خوب، بد و خیلی بد را برای شما آورده ایم.
کد خوب:
<table class="striped">
کد بد:
<table class=striped>
کد خیلی بد:
<table class=table striped>
کد بالا به درستی کار نمی کند چون مقدار دارای فضای سفید است.
همیشه برای تصاویر، متن دلخواه، عرض و ارتفاع را مشخص کنید
همیشه ویژگی alt را برای تصاویر خود مشخص کنید. این ویژگی زمانی کارایی دارد که به دلایلی تصویر شما نمایش داده نشود.
همچنین، همیشه عرض و ارتفاع تصاویر خود را مشخص کنید. این امر باعث کاهش سوسو زدن می شود، زیرا، مرورگر فضای تصویر را قبل از بارگذاری کردن ذخیره می کند.
بیشتر بدانیم: آموزش کار با تصاویر (تگ img) در html
مثال: در زیر دو نوع نوشتن بد و خوب را برای شما آورده ایم.
کد خوب:
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
کد بد:
<img src="html5.gif">
فضاها و علائم مساوی html
HTML، فضای مابین ویژگی و مقدار را مجاز می داند. نوشتن ویژگی و مقدار، بدون فضا باعث تمیز و خوانا شدن کدهای ما می شود.
مثال: در زیر دو نوع نوشتن بد و خوب را برای شما آورده ایم.
کد خوب:
<link rel="stylesheet" href="styles.css">
کد بد:
<link rel = "stylesheet" href = "styles.css">
از نوشتن خطوط طولانی کد خودداری کنید
زمانی که کدهای شما طولانی می شود، هنگام استفاده از ویرایشگر، برای خواندن کدها حرکت زیاد به چپ و راست کار خسته کننده ای می شود.
سعی کنید از خطوط طولانی استفاده نکنید.
خطوط خالی و تو رفتگی
همیشه سعی کنید خطوط خالی، فاصله ها و تورفتگی ها را بدون دلیل ایجاد نکنید.
برای خوانایی کدها، خطوط خالی را برای جدا کردن بلوک های کد از هم استفاده کنید.
برای خوانایی، همچنین، به اندازه دو مقدار فاصله تورفتگی ایجاد کنید، از tab استفاده نکنید.
مثال: در زیر دو نوع نوشتن بد و خوب را برای شما آورده ایم.
کد خوب:
dy>
<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.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</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.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</p>
</body>
بیشتر بدانیم : آموزش ایجاد جدول در HTML
مثالی خوب برای جداول :
<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 ضروری است.
محتویات عنوان صفحه برای موتورهای جستجو (سئو سایت) بسیار مهم و ضروری است. عنوان صفحه توسط الگوریتم های موتور جستجو گوگل برای تعیین ترتیب، هنگام فهرست بندی صفحات در نتایج جستجو استفاده می شود.
عنصر title :
- عنوان را در نوار ابزار مرورگر تعریف می کند.
- هنگامی که صفحه به موارد دلخواه اضافه می شود، عنوان آن ارائه داده می شود.
- عنوان صفحه را در نتایج موتورهای جستجو نشان می دهد.
بنابراین، سعی کنید تا حد امکان عنوان را دقیق و بامعنا تعریف کنید، مانند مثال زیر:
<title>HTML Style Guide and Coding Conventions</title>
حذف عناصر body و html ؟
یک صفحه HTML بدون نوشتن تگ های html و body هم معتبر است. به مثال زیر دقت کنید:
<!DOCTYPE html>
<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 را ببندید؟
در HTML بستن عناصر بدون محتوا اختیاری است.
مجاز:
<meta charset="utf-8">
این هم مجاز:
<meta charset="utf-8" />
اگر انتظار دارید که نرم افزار XML/XHTML به صفحه شما دسترسی پیدا کند، علامت بسته (/) را نگه دارید، زیرا در XML و XHTML مورد نیاز است.
ویژگی lang را به صفحه خود اضافه کنید
برای اعلام زبان صفحه وب، همیشه باید ویژگی lang را داخل تگ html قرار دهید. این کار به منظور کمک به موتورهای جستجو و مرورگرها است.
بیشتر بدانیم : طراحی سایت چند زبانه
مثال: در زیر ویژگی lang را برای صفحه خود مشخص کرده ایم.
<!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>
متا دیتا
برای اطمینان از تفسیر مناسب و نمایه سازی صحیح موتورهای جستجو، هم زبان و هم رمزگذاری کاراکتر، باید در اسرع وقت در یک سند HTML تعریف شوند. مانند زیر:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
تنظیم viewport
Viewport ناحیه قابل مشاهده کاربر در یک صفحه وب است. در دستگاه های مختلف متغیر است – با تنظیم viewport محتوای صفحه در تلفن همراه، نسبت به صفحه نمایش کامپیوتر، کوچک تر نشان داده می شوند.
شما باید عنصر meta زیر را در همه صفحات وب خود قرار دهید.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
این عنصر meta دستورالعمل هایی را در مورد نحوه کنترل ابعاد و مقیاس بندی صفحه به مرورگر می دهد.
قسمت width = device – width عرض صفحه را مطابق با عرض صفحه دستگاه تنظیم می کند (در دستگاه های مختلف متفاوت است)
Initial = 1.0 بخش سطح بزرگ نمایی اولیه را هنگام بارگذاری صفحه توسط مرورگر تعیین می کند.
مثال: در این جا یک نمونه از صفحه وب بدون متا تگ viewport و همان صفحه با متا تگ viewport را برای شما آورده ایم.
توضیحات در HTML
توضیحات کوتاه باید در یک خط نوشته شوند، مانند زیر:
<!-- This is a comment -->v
توضیحاتی که بیش از یک خط هستند، باید به صورت زیر نوشته شوند:
<!--
This is a long comment example. This is a long comment example.
This is a long comment example. This is a long comment example.
-->
بهتر است برای نمایش بهتر توضیحات طولانی از دو فاصله تورفتگی استفاده کنید، تا خوانایی آن بهتر شود.
بیشتر بدانیم : آموزش کامنت نویسی در html (توضیحات برای کد) comment
استفاده از style sheet ها
از syntax ساده زیر برای پیوند دادن به شیوه نامه ها (style sheets) استفاده کنید (ویژگی 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;
}
- براکت باز را در خط عنصر انتخاب شده بعد از نام عنصر قرار دهید.
- قبل از براکت باز بعد از نام عنصر منتخب از یک فاصله استفاده کنید.
- برای نوشتن ویژگی ها از دو تورفتگی استفاده کنید.
- بعد از نوشتن ویژگی و مقدار آن از نقطه ویرگول استفاده کنید.
- فقط در صورتی که مقدار دارای فاصله است آن را درون نقل قول بنویسید.
- براکت بسته را در خط جدید، بدون فاصله قرار دهید.
بارگیری جاوا اسکریپت (JavaScript) در HTML
برای بارگذاری اسکریپت های خارجی از syntax ساده زیر استفاده کنید (ویژگی type ضروری نیست):
<script src="myscript.js">
دسترسی به عناصر HTML با زبان برنامه نویسی جاوااسکریپت (JavaScript)
استفاده از کدهای HTML نامرتب می تواند باعث بروز خطا در زبان برنامه نویسی جاوا اسکریپت (JavaScript) شود.
مثال: در زیر، دو عبارت، نتایج کاملا متفاوتی را ایجاد می کنند.
getElementById("demo").innerHTML = "Hello";
از نام کوچک برای فایل ها استفاده کنید
برخی از سرورهای وب (Apache , Unix)، به حروف بزرگ و کوچک نام فایل ها حساس هستند، نمی توان با نام London.jpg به LONDON.jpg دسترسی داشت.
برخی دیگر از سرورهای وب (مایکروسافت، IIS)، به حروف بزرگ و کوچک نام فایل ها حساس نیستند، می توان با نام London.jpg به LONDON.jpg دسترسی داشت.
اگر از ترکیب حروف بزرگ و کوچک برای نام گذاری فایل ها استفاده می کنید، باید حواستان به این موضوع باشد.
اگر از یک سرور بدون حروف کوچک به یک سرور حساس به حروف بزرگ و کوچک سوییچ کنید، حتی خطاهای کوچک نیز وب شما را خراب می کند.
برای جلوگیری از این مشکلات، از نام کوچک فایل ها استفاده کنید.
پسوندهای فایل
فایل های HTML باید دارای پسوند html باشند (htm نیز مجاز است)
فایل های CSS باید دارای پسوند css باشند.
فایل های جاوا اسکریپت باید دارای پسوند js باشند.
تفاوت htm و html
هیچ تفاوتی بین پسوندهای htm و html وجود ندارد.
با هر دو، در هر مرورگر وب و سرور وب به عنوان HTML رفتار خواهد شد.
نام فایل های پیش فرض
وقتی یک URL در انتها، نام فایل را مشخص نمی کند، سرور یک نام پیش فرض به آن اضافه می کند، مانند index.html یا index.htm .
اگر سرور شما با نام index.html به عنوان نام پیش فرض پیکربندی شده است، نام فایل شما باید index.html باشد.
با این حال سرورها را می توان با بیش از یک نام پیش فرض پیکربندی کرد. معمولا می توانید از هر تعداد نام پیش فرض که می خواهید استفاده کنید.
خب به پایان یکی دیگر از مقالات زبان نشانه گذاری HTML رسیدیم و یاد گرفتیم که باید قوانینی را در نوشتن کدهای HTML رعایت کنیم.
بیشتر بدانیم: آموزش کار با موجودیت ها HTML Entities
