این متن هنوز کامل نیست و در حال بروزرسانی است. نسخه‌ی نهایی پس از تکمیل در دسترس قرار خواهد گرفت.

ساختار بنیادین سند HTML

در عصر دیجیتال ساختار بنیادین یک سند HTML به عنوان "استخوان‌های اصلی" یک صفحه وب، نقش محوری در تعیین کیفیت، عملکرد، دسترسی‌پذیری و سازگاری با تمام دستگاه‌ها ایفا می‌کند. این فصل به بررسی جامع و تخصصی چهار بخش اصلی مرتبط با ساختار اولیه سند HTML می‌پردازد: (1) مسیر تکامل استانداردها (2) تعریف نوع سند و حالت‌های رندرینگ (3) ساختار اصلی با <html> - <head> - <body> و (4) اصول نگارش معتبر و خوانا. هدف این فصل ایجاد پایه‌ای محکم، مطابق با استانداردهای جهانی و قابل نگهداری برای آینده است.

1.1 استانداردهای HTML و مسیر تکامل: از چهارچوب‌های قدیمی به استاندارد زنده

1.1.1 WHATWG و مفهوم "Living Standard"

WHATWG (Web Hypertext Application Technology Working Group) یک گروه مرجع است که به صورت مستمر و پویا استاندارد HTML را توسعه می‌دهد.
Living Standard - یعنی استاندارد به صورت پیوسته به‌روزرسانی می‌شود و هیچ نسخه ثابتی وجود ندارد.
مزیت ها شامل: سرعت بالا در انتشار ویژگی‌های جدید (مثلاً async - defer - loading).
نمونه‌های معروف: fetch API - Intersection Observer - HTML Template - همه از طریق WHATWG معرفی شده‌اند.

WHATWG به جای "نسخه‌های متوقف‌شده" روی توسعه پیوسته و اصلاح‌پذیری تأکید دارد. این مدل باعث شده است که HTML به یک زبان پویا و انعطاف‌پذیر تبدیل شود.

1.1.2 W3C و مدل نسخه‌ای

W3C (World Wide Web Consortium) یک سازمان استانداردسازی است که نسخه‌های ثابتی از HTML منتشر می‌کند (مثلاً HTML5.2).
معایب: به دلیل فرآیند تایید طولانی، تاخیر در انتشار ویژگی‌های جدید وجود دارد.

ویژگی	WHATWG (Living Standard)	W3C (Versioned)
مدل	پیوسته و پویا	ثابت و نسخه ای
بروزرسانی	فوری و مستمر	دوره ای (مثلا سالی یکبار)
مثال	loading="lazy"	متوقف شده HTML5.2
مدیریت تغییرات	بدون نیاز به نسخه جدید	نیاز به نسخه جدید

امروزه هر دو مدل با هم هم‌پوشانی دارند اما WHATWG به عنوان منبع اصلی استانداردهای مدرن شناخته می‌شود.
W3C نسخه‌های رسمی و مورد تأیید جهانی را منتشر می‌کند.

1.1.3 مقایسهٔ HTML4، XHTML و HTML5

ویژگی	HTML4	XHTML	HTML5
ساختار	ساده و غیرقابل تنظیم	حساس به حروف مانند XML	نعطلاف پذیر، با حفط ساختار
حساسیت به حروف	حساس (مثلا <BR> صحیح است)	غیر حساس (مثلا </br>)	انعطلاف پذیر (هم </br> و <br> صحیح است)
ویژگی های جدید	محدود (فقط <div> - <span>)	محدود (مخصوصا برای XML)	پربار (فرم ها، ویدئو، تصاویر، موزیک و...)
توصیه فعلی	منسوخ شده	منسوخ شده	استاندارد جهانی

HTML5 به عنوان استاندارد اصلی و ترجیحی برای توسعه وب مدرن تلقی می‌شود.
استفاده از <!DOCTYPE html> فقط برای HTML5 است.

1.2.1 <!DOCTYPE html>: شروع سند HTML5

این خط اولین خط یک سند HTML است و به مرورگر می‌گوید که این فایل از کدام استاندارد استفاده می‌کند.
نوع سند: <!DOCTYPE html>
تأثیر: فعال‌سازی حالت استاندارد <Standards Mode> در مرورگرها.

  <!DOCTYPE html>
  <html lang="fa">
  <head>
    <meta charset="UTF-8">
    <title>صفحه اول</title>
  </head>
  <body>
    <p>محتوای صفحه</p>
  </body>
  </html>

بدون <!DOCTYPE html> مرورگرها به حالت "Quirks Mode" وارد می‌شوند که باعث عدم سازگاری با استانداردها می‌شود.
Quirks Mode به دلیل از دست دادن ساختار و استایل، بهترین عملکرد را ندارد.

1.2.2 حالت‌های Rendering در مرورگرها

Standards Mode	سازگار با استانداردهای W3C/WHATWG
Quirks Mode	سازگار با مرورگرهای قدیمی (مثلاً IE6)
Limited Quirks Mode	نسخه‌ای محدود از Quirks Mode

استفاده از <!DOCTYPE html> به طور قطع از ورود به Quirks Mode جلوگیری می‌کند.
این کار به سازگاری، استایل‌دهی و عملکرد پایدار کمک می‌کند.

1.2.3 دسته‌بندی تگ‌ها: Void, Raw Text, Escapable Raw Text

این دسته‌بندی برای درک نحوه تفسیر تگ‌ها توسط مرورگرها ضروری است.

Void Elements	بدون تگ بسته (self-closing)	<img> - <br> - <input>
Raw Text Elements	محتوای داخلی بدون تحلیل (نه کاراکترهای خاص)	<style> - <script>
Escapable Raw Text Elements	محتوای داخلی که کاراکترهای خاص را می‌توان اسکیپ کرد	<title> - <textarea>

در <script> و <style> محتوا به صورت "خام" (raw) تفسیر می‌شود و از تجزیه کاراکترهای خاص (مثل < >) جلوگیری می‌شود.
در <textarea> و <title> کاراکترهای خاص مثل < و > می‌توانند با اسکیپ (مثلاً <) نمایش داده شوند.

1.3 تگ‌های اصلی ریشهٔ سند: ساختار اولیه

1.3.1 <html lang="" dir="">: ریشه سند

این عنصر ریشه کلی سند است و تمامی محتوای صفحه درون آن قرار می‌گیرد. ویژگی‌های کلیدی:

lang: زبان محتوا (مثلاً fa - en - ar)
dir: جهت نوشتار (ltr یا rtl)

<html lang="fa" dir="rtl">
 <!-- ساختار صفحه -->
</html>

lang به ابزارهای خواندن متن <Screen Readers> کمک می‌کند تا لحن و تلفظ را به درستی تشخیص دهند.
dir="rtl" برای زبان‌های فارسی، عربی و عبری ضروری است.

1.3.2 ساختار اولیه با <head> و <body>

<head>: شامل متادیتا، استایل، اسکریپت‌های خارجی، و تعاریف صفحه.
<body>: شامل محتوای نمایشی صفحه.

  <!DOCTYPE html>
  <html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحه اول</title>
    <link rel="stylesheet" href="/css/main.css">
    <script src="/js/app.js" defer></script>
  </head>
  <body>
    <header>
      <h1>وبسایت آموزشی</h1>
    </header>
    <main>
      <p>محتوای صفحه</p>
    </main>
    <footer>
      <p>&copy; ۱۴۰۴</p>
    </footer>
  </body>
  </html>

charset باید در اولین ردیف تگ‌های <head> قرار گیرد.
viewport برای سازگاری با موبایل ضروری است.
defer برای اجرای اسکریپت‌ها بعد از تحلیل DOM.

1.4 اصول نگارش معتبر HTML: از ساختار تا خوانایی

1.4.1 تو‌در‌تویی (Nesting) صحیح

هر تگ باید به درستی درون تگ دیگر قرار گیرد. مثال نادرست:

<p><strong>متن</p></strong>

مثال درست:

<p><strong>متن</strong></p>

عدم رعایت تو‌در‌تویی باعث خطای تحلیل HTML می‌شود.
استفاده از ابزارهایی مانند Validator.W3C.org برای بررسی صحت کد ضروری است.

1.4.2 حساسیت به حروف (Case Sensitivity)

HTML5 به صورت غیرحساس به حروف است اما توصیه می‌شود:

استفاده از حروف کوچک برای نگارش تگ‌ها.
استفاده از class - id - lang به صورت کوچک.

<div class="container">محتوا</div>

در CSS و JavaScript، id و class حساس به حروف هستند.
استفاده از حروف کوچک به جلوگیری از خطا کمک می‌کند.

1.4.3 درج توضیح‌ها:

این تگ برای اضافه کردن نظرات داخل کد استفاده می‌شود.
توضیحات به صورت نمایش داده نمی‌شوند.

<!-- این بخش مربوط به منوی اصلی است -->
<nav>
 <ul>
  <li><a href="/">صفحه اصلی</a></li>
 </ul>
</nav>
  
<!-- تماس با ما -->
<section id="contact">
 <p>ایمیل: info@example.com</p>
</section>

استفاده از توضیحات برای مستندسازی کد، به ویژه در پروژه‌های بزرگ، بسیار مفید است.
از توضیحات برای غیرفعال کردن کد (Commenting Out) استفاده کنید.

بعدی