راهنمای استایل (Style Guide)
راهنمای استایل یا Style Guide در HTML به شما کمک می کند کدی تمیز، منظم و قابل خواندن بنویسید. رعایت این اصول باعث بهبود همکاری تیمی، جلوگیری از خطا و افزایش سرعت توسعه می شود.
اعلام نوع سند (DOCTYPE)
همیشه در ابتدای هر فایل HTML نوع سند را مشخص کنید.
<!DOCTYPE html>
استفاده از حروف کوچک
نام تگ ها و ویژگی ها بهتر است همیشه با حروف کوچک نوشته شوند. این روش خوانایی بالاتر و یکدستی بیشتری ایجاد می کند.
<body>
<p>این یک پاراگراف است.</p>
</body>
بستن همه تگ ها
حتی اگر مرورگر اجازه دهد، بهتر است همه تگ ها را ببندید تا از خطا جلوگیری شود.
<section>
<p>این یک پاراگراف است.</p>
</section>
نقل قول برای مقادیر ویژگی ها
مقادیر ویژگی ها باید همیشه داخل نقل قول باشند تا خوانایی بیشتر شود و در صورت وجود فاصله مشکلی ایجاد نشود.
<img src="logo.png" alt="لوگو">
ویژگی alt و اندازه تصاویر
همیشه ویژگی alt
را برای تصاویر قرار دهید و همچنین width
و height
را مشخص کنید.
<img src="pic.jpg" alt="تصویر نمونه" width="300" height="200">
عنوان صفحه
عنصر <title>
برای SEO اهمیت زیادی دارد و باید همیشه وجود داشته باشد.
<title>راهنمای استایل HTML</title>
تگ lang در عنصر html
برای کمک به موتورهای جستجو و مرورگرها، ویژگی lang
را در تگ <html>
مشخص کنید.
<html lang="fa">
ویوپورت (Viewport)
برای واکنش گرا بودن صفحات باید از متای ویوپورت استفاده کنید.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
کامنت گذاری
کامنت ها باید کوتاه و قابل خواندن باشند.
<!-- این یک کامنت کوتاه است -->
استفاده از استایل ها و اسکریپت ها
برای لینک دهی به CSS و جاوااسکریپت از سینتکس ساده و کوتاه استفاده کنید.
<link rel="stylesheet" href="style.css">
<script src="app.js"></script>
جمع بندی
با رعایت اصول راهنمای استایل HTML می توانید کدی تمیز و حرفه ای تولید کنید. همچنین مطالعه بخش کاراکترهای HTML برای تکمیل دانش ضروری است.