جستجو برای:
  • خانه
  • مهارت های کامپیوتر
    • شبکه
    • ابزار های مایکروسافت افیس
    • ویندوز
  • برنامه نویسی و طراحی سایت
    • کد نویسی سمت کاربر
    • کد نویسی سمت سرور
    • cms های آماده
  • برنامه نویسی
    • اندروید
    • #C
    • بازی سازی
    • جاوا
    • پایتون
  • سورس کد ها
    • پروژه آماده اندروید
    • پروژه اماده unity
    • پروژه آماده سی شارپ
    • پروژه آماده طراحی سایت
  • تماس با ما
  • درباره ما
 
  • 02128423771 - 08736212195
  • info@zarrinlearn.com
  • بلاگ
  • تماس با ما
  • درباره ما
سایت اموزشی زرین لرن
  • خانه
  • مهارت های کامپیوتر
    • شبکه
    • ابزار های مایکروسافت افیس
    • ویندوز
  • برنامه نویسی و طراحی سایت
    • کد نویسی سمت کاربر
    • کد نویسی سمت سرور
    • cms های آماده
  • برنامه نویسی
    • اندروید
    • #C
    • بازی سازی
    • جاوا
    • پایتون
  • سورس کد ها
    • پروژه آماده اندروید
    • پروژه اماده unity
    • پروژه آماده سی شارپ
    • پروژه آماده طراحی سایت
  • تماس با ما
  • درباره ما
0

ورود و ثبت نام

بلاگ

سایت اموزشی زرین لرنبلاگمقالاتHTML Style Guide

HTML Style Guide

2 تیر 1404
ارسال شده توسط سمیرا خانی
مقالات
41 بازدید

یک راهنمای سبک (Style Guide) برای HTML آورده‌ام، که به شما کمک می‌کند کد HTML تمیز، منظم، قابل‌فهم و قابل‌نگهداری بنویسید:


🧭 راهنمای سبک HTML (HTML Style Guide)

1. ✅ استفاده از حروف کوچک (lowercase)

تمام تگ‌ها، نام attributeها و مقدارهای Boolean را با حروف کوچک بنویسید.

<!– درست –>

<input type=“text” disabled>

<!– نادرست –>

<INPUT TYPE=“TEXT” DISABLED>


2. ✅ استفاده از Doctype استاندارد

همیشه سند HTML را با doctype استاندارد HTML5 شروع کنید:

<!DOCTYPE html>


3. ✅ رعایت ساختار درست سند

<!DOCTYPE html>

<html lang=“fa”>

<head>

          <meta charset=“UTF-8”>

          <title>عنوان صفحه</title>

</head>

<body>

              <!– محتوای صفحه –>

</body>

</html>


4. ✅ تورفتگی (Indentation)

از دو یا چهار فاصله (spaces) برای تورفتگی استفاده کنید. (توصیه: از tab استفاده نکنید)

<ul>

           <li>مورد اول</li>

           <li>مورد دوم</li>

</ul>


5. ✅ بسته شدن تگ‌ها

همیشه تگ‌های HTML را ببندید—even if they’re optional.

<!– درست –>

<p>سلام دنیا</p>

<!– نادرست –>

<p>سلام دنیا

تگ‌های خودبسته مانند <img> و <input> نیازی به اسلش ندارند:

<!– درست –>

<img src=“image.jpg” alt=“عکس نمونه”>

<!– نادرست –>

<img src=“image.jpg” alt=“عکس نمونه” />


6. ✅ استفاده از نقل‌قول (quotes) برای attribute ها

همیشه از نقل‌قول دوتایی (” “) برای مقدار ویژگی‌ها استفاده کنید.

<!– درست –>

<a href=“https://example.com”>لینک</a>

<!– نادرست –>

<a href=https://example.com>لینک</a>


7. ✅ استفاده از عناصر معنایی

استفاده از عناصر معنایی مانند <header>, <main>, <section>, <article> به جای <div> و <span> برای معنا و ساختار صفحه.


8. ✅ استفاده از alt برای تصاویر

برای دسترس‌پذیری بهتر، همیشه برای تصاویر از ویژگی alt استفاده کنید.

<img src=“logo.png” alt=“لوگوی شرکت”>


9. ✅ مرتب‌سازی و گروه‌بندی منطقی attributeها

ترتیب ویژگی‌ها را منطقی بچینید: id, class, type, name, value, href، و غیره.

<!– درست –>

<input id=“search” class=“input” type=“text” name=“q” placeholder=“جستجو…”>


10. ✅ نظرنویسی برای بخش‌های مهم

برای خوانایی بیشتر، از کامنت استفاده کنید:

<!– منوی ناوبری اصلی –>

<nav>

…

</nav>


11. ✅ جدا کردن CSS و JavaScript

به جای نوشتن استایل یا اسکریپت درون تگ‌ها، آن‌ها را در فایل‌های جداگانه قرار دهید:


12. ❌ از عناصر منسوخ استفاده نکنید

از تگ‌های قدیمی مانند <center>, <font>, <b> خودداری کنید. به جای آن‌ها از CSS و تگ‌های معنایی استفاده کنید.

برچسب ها: HTML Style Guide،راهنمای سبک HTML (HTML Style Guide)،استفاده از Doctype استاندارد،بسته شدن تگ‌ها
در تلگرام
کانال ما را دنبال کنید!
Created by potrace 1.14, written by Peter Selinger 2001-2017
در آپارات
ما را دنبال کنید!

مطالب زیر را حتما مطالعه کنید

چگونه در پایتون چند مقدار را به چند متغیر اختصاص دهیم ؟
قوانین نام‌گذاری متغیرها در پایتون ؛ راهنمای کامل و کاربردی
JavaScript else
JavaScript if
JavaScript Conditionals
JavaScript Comparison

دیدگاهتان را بنویسید لغو پاسخ

جستجو برای:
دسته‌ها
  • مقالات
نوشته‌های تازه
  • چگونه در پایتون چند مقدار را به چند متغیر اختصاص دهیم ؟
  • قوانین نام‌گذاری متغیرها در پایتون ؛ راهنمای کامل و کاربردی
  • JavaScript else
  • JavaScript if
  • JavaScript Conditionals
درباره زرین لرن

ما برند زرین لرن را نامگذاری کردیم، زیرا برای ما بهترین علامت های تجاری ساده هستند. مارک ها رشد می کنند در توانایی آنها درک می شود.

فهرست سفارشی
  • صفحه اصلی اول
  • بلاگ
  • تماس با ما
  • حساب کاربری من
  • درباره ما
  • سبد خرید
  • فروشگاه

طراحی شده توسط گروه فنی مهندسی زریم هور

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت