راهنمای نگارش (Style Guide)
راهنمای نگارش HTML یعنی قوانین تمیزی کد. کد تمیز خواناتر است. «سبک نگارش (Style Guide)» یعنی عادت های خوب کدنویسی. با این نکات، اشکالات کمتر می شوند و تیم راحت تر می شود.
اعلان نوع سند (DOCTYPE) همیشه
همیشه اولین خط، نوع سند را مشخص کن. این کار رندر را پایدار می کند.
<!DOCTYPE html>
نام تگ ها با حروف کوچک
مخلوط نویسی زشت است. حروف کوچک تمیزتر است و تایپ آسان تر است.
<body>
<p>This is a paragraph.</p>
</body>
تمام تگ ها را ببند
بستن اختیاری بعضی تگ ها ممکن است. اما بستن همه بهتر است.
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>
نام ویژگی ها با حروف کوچک
ویژگی ها را با حروف کوچک بنویس. ظاهر تمیزتر می شود و یکنواخت می ماند.
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
مقدار ویژگی ها را همیشه داخل کوتیشن بگذار
بدون کوتیشن ممکن است خطا شود. مخصوصاً وقتی فاصله وجود دارد.
<table class="striped">
</table>
برای تصاویر alt، width و height
alt برای دسترس پذیری است. ابعاد هم پرش صفحه را کم می کند.
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
فاصله کنار علامت = ممنوع
بدون فاصله، خوانایی بهتر است. گروه ها یکپارچه تر دیده می شوند.
<link rel="stylesheet" href="styles.css">
خط های طولانی را کوتاه نگه دار
اسکرول افقی آزاردهنده است. خطوط کوتاه، خواندن را سریع تر می کند.
<p>
Keep code lines reasonably short for readability.
</p>
خط خالی و تورفتگی دو فاصله
بین بلوک ها خط خالی بگذار. برای تورفتگی از دو فاصله استفاده کن.
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<h2>London</h2>
<p>London is the capital city of England.</p>
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</body>
تگ <title> را هرگز حذف نکن
عنوان صفحه برای سئو مهم است. در نتایج جستجو نمایش داده می شود.
<title>HTML Style Guide and Coding Conventions</title>
حذف <html> و <body>؟ بهتر نه
ممکن است معتبر باشد. اما همیشه اضافه شان کن. پایدارتر خواهد بود.
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
حذف <head>؟ بهتر نه
مرورگر می تواند head پیش فرض بسازد. اما نوشتن آن بهتر است.
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
تگ های خالی و اسلش پایانی
در HTML بستن تگ خالی اختیاری است. برای XML سازگاری، اسلش بگذار.
<meta charset="utf-8">
<meta charset="utf-8" />
صفت lang را اضافه کن
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>
متادیتا و charset زودتر
charset و زبان را زود تعریف کن. تفسیر و ایندکس صحیح می شود.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
</html>
تنظیم viewport برای موبایل
«نماگاه (Viewport)» همان بخش قابل دیدن صفحه است. در موبایل کوچک تر است.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
کامنت گذاری در HTML
کامنت کوتاه یک خطی باشد. بلندها را چندخطی و منظم بنویس.
<!-- This is a comment -->
<!--
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">
<style>
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
</style>
لود کردن JavaScript
ساده بنویس. type لازم نیست. مسیر اسکریپت را درست بده.
<script src="myscript.js"><\/script>
دسترسی به المان ها با JavaScript
کد نامرتب خطا می دهد. آیدی ها دقیق و یکنواخت باشند.
<script>
getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML = "Hello";
<\/script>
نام فایل ها با حروف کوچک
روی برخی سرورها حروف مهم است. london.jpg با London.jpg فرق دارد.
<img src="images/london.jpg" alt="London">
پسوند فایل ها و پیش فرض ها
HTML با .html یا .htm است. نام پیش فرض معمولاً index.html است.
<!-- index.html will be served for / -->
<a href="/">Home</a>
گام های سریع تمرین
- یک فایل بساز. DOCTYPE را در خط اول بگذار.
- تگ ها را با حروف کوچک بنویس. همه را ببند.
- lang و charset و viewport را اضافه کن.
- یک عنوان خوب در <title> بنویس.
- یک فایل CSS لینک کن. خطوط را مرتب کن.
جمع بندی سریع
- حروف کوچک، یکنواخت و تمیز.
- ویژگی ها همیشه داخل کوتیشن.
- lang و charset زود تعریف شوند.
- viewport برای موبایل ضروری است.
- title برای سئو بسیار مهم است.