آموزش HTML - شیوه نگارش

راهنمای شیوه نگارش (Style Guide) در HTML چیست؟

در HTML، راهنمای شیوه نگارش مجموعه‌‏ای از قوانین و کنوانسیون‌ها است که نحوه نوشتن و قالب‌بندی کد را مشخص می‌کند. این راهنما کمک می‌کند تا کدهای نوشته‌شده خوانا، قابل فهم و به‌راحتی قابل تغییر باشند. همچنین راهنمای شیوه نگارش به جلوگیری از خطاهای رایج و باگ‌هایی که می‌توانند بر عملکرد و ظاهر یک صفحه وب تأثیر بگذارند، کمک می‌کند. در این آموزش، قصد داریم مهم‌ترین دستورالعمل‌های شیوه نگارش را برای ایجاد کدهای HTML بهتر بررسی کنیم.

شروع با Doctype مربوط به HTML5

همیشه تمام اسناد HTML و XHTML را با اعلان <!DOCTYPE html> شروع کنید. توجه داشته باشید که این اعلان نسبت به حروف کوچک و بزرگ حساس نیست (case-insensitive). این اعلان برای اعمال حالت کاملاً استاندارد (که به عنوان حالت no-quirks نیز شناخته می‌شود) ضروری است تا رندر یکنواخت‌تری از صفحات وب ارائه دهد. این جدیدترین استاندارد وب است که توسط W3C توصیف شده و توسط موتورهای پردازش تصویر مرورگرهای مدرن وب استفاده می‌شود.

مثال

<!DOCTYPE html>
<html>
<head>
   <!-- Content inside head tag -->
</head>
<body>
   <!-- Content inside body tag -->
   Hello, Welcome to Tutorialspoint
</body>
</html>

تعیین زبان سند

همیشه زبان سند را به کمک ویژگی lang مشخص کنید. این ویژگی درون تگ بازکننده <html> که ریشه سند HTML است، تعریف می‌شود. مشخص کردن زبان سند به دسترسی‌پذیری، تحلیل گفتار، ترجمه و سایر قابلیت‌ها کمک می‌کند.

مثال

<!DOCTYPE html>
<html lang="en">
<head>
   <!-- Content inside head tag -->
</head>
<body>
   <!-- Content inside body tag -->
   Hello, Welcome to Tutorialspoint
</body>
</html>

تعریف کدگذاری کاراکترها (Charset)

سازمان W3C همیشه به توسعه‌دهندگان توصیه می‌کند که charset یا کدگذاری کاراکترها را به‌طور صریح اعلان کنند. این کار با استفاده از ویژگی charset در تگ <meta> انجام می‌شود. مقدار UTF-8 را به ویژگی charset بدهید، زیرا پرکاربردترین کدگذاری کاراکتر است و بیش از یک میلیون کاراکتر را پشتیبانی می‌کند.

مثال

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset = "UTF-8">
</head>
<body>
   <!-- Content inside body tag -->
   Hello, Welcome to Tutorialspoint
</body>
</html>

استفاده از حروف کوچک برای عناصر و ویژگی‌ها

نام عناصر، نام ویژگی‌ها و مقادیر ویژگی‌ها را با حروف بزرگ ننویسید. در سایر زبان‌های برنامه‌نویسی مانند Java، C و ++C، توسعه‌دهندگان اغلب از روش‌های camelCase یا snake_case برای نام‌گذاری متغیرها استفاده می‌کنند. با این حال، برای نوشتن کد HTML، سازمان W3C استفاده از حروف کوچک را توصیه می‌کند. انجام این کار شفافیت و خوانایی کدهای HTML شما را افزایش می‌دهد.

مثال

<body>
   <h1>
      <!-- Heading comes here -->
   </h1>
   <p style = "font-size: 25px; ">
      <!-- contains paragraph -->
      Hello, Welcome to Tutorialspoint
   </p>
</body>

قرار دادن مقادیر ویژگی‌ها در گیومه

طبق توصیه‌های W3C، بهتر است مقادیر ویژگی‌ها را داخل گیومه دوتایی (Double Quotes) قرار دهید. این موضوع برای مقادیری که شامل فاصله هستند اهمیت دارد، زیرا HTML ممکن است آن‌ها را بدون گیومه به‌درستی پردازش نکند. استفاده از گیومه دوتایی رایج‌تر از گیومه تکی است، اما می‌توانید از گیومه تکی نیز استفاده کنید.

<p style = "font-size: 25px; ">
   <!-- contains paragraph -->
</p>

استفاده از تگ‌های بسته‌شونده

در HTML، تمام عناصر باید به‌درستی بسته شوند، حتی اگر برخی از عناصر دارای تگ‌های بسته‌شونده اختیاری باشند. لطفاً توجه داشته باشید که عناصر خاصی وجود دارند که خودبسته‌شونده (Self-closing) هستند، از جمله <img>، <hr>، <br> و موارد دیگر.

مثال

<!DOCTYPE html>
<html>
<head>
   <!-- Content inside head tag -->
</head>
<body>
   <h1>
      <!-- Heading comes here -->
   </h1>
   <p>
      <!-- contains paragraph -->
   </p>
   <br>
   <p>
      <!-- contains paragraph -->
      Hello, Welcome to Tutorialspoint
   </p>
</body>
</html>

استفاده از تورفتگی مناسب

استفاده از تورفتگی (Indentation) مناسب، ساختار و سلسله‌مراتب کدهای HTML شما را نشان می‌دهد. برای تورفتگی از فاصله (Space) به جای کلید Tab استفاده کنید و تعداد فاصله‌ها (معمولاً دو یا سه فاصله) در هر سطح یکسان باشد. همچنین، می‌توان از خطوط خالی برای جداسازی بلوک‌های بزرگ کد استفاده کرد.

مثال

<!DOCTYPE html>
<html>
<head>
   <!-- Content inside head tag -->
</head>
<body>
   <h1>
      <!-- Heading comes here -->
   </h1>
   <p>
      <!-- contains paragraph -->
   </p>
   <p>
      <!-- contains paragraph -->
      Hello, Welcome to Tutorialspoint
   </p>
</body>
</html>

تنظیم Viewport

تنظیم viewport به نمایش درست صفحات وب در دستگاه‌های مختلف کمک می‌کند. این کار با کنترل عرض و مقیاس صفحه به دست می‌آید و برای تضمین واکنش‌گرا (Responsive) بودن یک صفحه وب خاص استفاده می‌شود.

<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">

افزودن کامنت‌ها

ما از کامنت‌ها برای توضیح هدف یا قابلیت‌های یک کد خاص HTML استفاده می‌کنیم. کامنت‌ها باید با <!-- شروع شوند و با --> به پایان برسند. از به کار بردن کامنت‌ها برای اهداف استایل‌دهی یا اسکریپت‌نویسی خودداری کنید.

مثال

<!DOCTYPE html>
<html lang="en">
<head>
   <!-- Content inside head tag -->
</head>
<body>
   <h1>
      <!-- Heading comes here -->
   </h1>
   <p>
      <!-- contains paragraph -->
      Hello, Welcome to Tutorialspoint
   </p>
</body>
</html>