آموزش · مسیر HTML · درس ۱

HTML چیست و چه کاری انجام می‌دهد؟

پیش از نوشتن حتی یک خط HTML، بهتر است بدانیم دقیقاً چه چیزی هستیم که داریم می‌نویسیم و چرا اصلاً وجود دارد.

HTML چیست؟

HTML مخفف HyperText Markup Language است. با وجود کلمه «Language» در نامش، HTML یک زبان برنامه‌نویسی نیست؛ یک زبان نشانه‌گذاری است. کار آن این است که به محتوای یک صفحه وب — متن، تصویر، لینک، فرم و مانند آن — ساختار و معنا بدهد.

وقتی می‌نویسید <h1>عنوان صفحه</h1>، در واقع دارید به مرورگر (و هر ابزار دیگری که این سند را می‌خواند) می‌گویید: «این متن، عنوان اصلی این صفحه است». HTML جایی برای منطق، شرط، حلقه یا محاسبه ندارد — آن کار جاوااسکریپت است.

HTML چه مشکلی را حل می‌کند؟

بدون HTML، یک صفحه وب چیزی جز یک تکه متن خام بی‌ساختار نیست. مرورگر نمی‌داند کدام بخش عنوان است، کدام بخش لینک است، کدام بخش باید داخل یک فرم قرار بگیرد. HTML این ساختار را مشخص می‌کند تا:

  • مرورگر بداند محتوا را چطور نمایش دهد
  • ابزارهای دسترس‌پذیری مثل صفحه‌خوان‌ها بتوانند محتوا را درست برای کاربر توصیف کنند
  • موتورهای جست‌وجو بتوانند بفهمند هر بخش از صفحه چه نقشی دارد

رابطه HTML با CSS و جاوااسکریپت

این سه فناوری معمولاً با هم می‌آیند، اما هرکدام یک مسئولیت مشخص دارند:

  • HTML — ساختار و محتوا. «چه چیزی در صفحه هست.»
  • CSS — ظاهر و چیدمان. «آن چیز چطور به نظر می‌رسد.»
  • جاوااسکریپت — رفتار و تعامل. «وقتی کاربر با آن کاری کند، چه اتفاقی می‌افتد.»

یک قیاس ساده: HTML مثل اسکلت و دیوارهای یک ساختمان است، CSS مثل رنگ‌آمیزی و دکوراسیون، و جاوااسکریپت مثل برق و لوله‌کشی که ساختمان را «فعال» می‌کند.

مرورگر با HTML چه می‌کند؟

وقتی مرورگر یک فایل HTML را دریافت می‌کند، آن را خط به خط می‌خواند و از روی آن یک ساختار درختی در حافظه می‌سازد به نام DOM (Document Object Model). این ساختار درختی همان چیزی است که مرورگر برای رسم صفحه روی صفحه‌نمایش و اجرای جاوااسکریپت روی آن استفاده می‌کند. یعنی HTML شما مستقیماً روی صفحه «چاپ» نمی‌شود؛ اول به DOM تبدیل می‌شود و بعد رندر می‌شود.

یک مثال بسیار کوچک

این یک سند HTML بسیار ساده است:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>اولین صفحه من</title>
</head>
<body>
  <h1>سلام دنیا</h1>
  <p>این اولین پاراگراف من است.</p>
</body>
</html>

هر بخش این کد یک نقش مشخص دارد: <h1> عنوان اصلی صفحه را نشان می‌دهد و <p> یک پاراگراف متن است. در درس بعدی، هر بخش این سند — از <!DOCTYPE html> تا <body> — را با جزئیات بیشتر بررسی می‌کنیم.

باورهای غلط رایج

«HTML یک زبان برنامه‌نویسی است.» نه — HTML شرط، حلقه یا متغیر ندارد. این یک زبان نشانه‌گذاری برای ساختاردهی محتواست، نه برنامه‌نویسی.

«بدون دیدن ظاهر نهایی، نوشتن HTML بی‌فایده است.» ظاهر کار CSS است. یک سند HTML خوب و معنادار حتی بدون هیچ استایلی هم باید قابل فهم و قابل استفاده باشد — این دقیقاً همان چیزی است که در درس‌های بعدی درباره Semantic HTML بیشتر می‌بینید.

«هر تگی را هرجا بخواهم می‌توانم بگذارم.» HTML قوانین ساختاری دارد؛ مثلاً برخی عناصر فقط داخل عناصر خاصی معنا دارند. در درس‌های بعدی با این قوانین بیشتر آشنا می‌شوید.

خلاصه

HTML زبان نشانه‌گذاری‌ای است که به محتوای وب ساختار و معنا می‌دهد. مرورگر آن را می‌خواند، به DOM تبدیل می‌کند و بر اساس آن صفحه را رندر می‌کند. HTML مسئول «چه چیزی هست»، CSS مسئول «چطور به نظر می‌رسد» و جاوااسکریپت مسئول «چه اتفاقی می‌افتد» است.