آموزش HTML برای مبتدیان از صفر تا صد

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

HTML چیست و چه کاربردی دارد؟

HTML مخفف Hyper Text Markup Language است. این زبان نشانه‌گذاری برای ساختاردهی محتوا در صفحات وب استفاده می‌شود. برخلاف زبان‌های برنامه‌نویسی مانند JavaScript، HTML دستوری برای منطق ندارد؛ بلکه فقط تعیین می‌کند که هر بخش از صفحه چه معنایی دارد.

به عنوان مثال:

<h1> برای عنوان‌ها استفاده می‌شود.
<p> برای پاراگراف‌ها.
<a> برای لینک‌ها.

💡 بدون HTML هیچ مرورگری نمی‌تواند محتوای سایت شما را نمایش دهد.

ساختار کلی یک صفحه HTML

هر فایل HTML ساختاری استاندارد دارد. بیایید آن را بررسی کنیم:

اجزای مهم:

<!DOCTYPE html> → مشخص می‌کند که فایل از نوع HTML5 است.
<html> → ریشه کل صفحه است.
<head> → شامل اطلاعاتی مانند عنوان و توضیحات متا است.
<body> → محتوای قابل مشاهده برای کاربر در این بخش قرار می‌گیرد.

آشنایی با تگ‌های پرکاربرد در HTML

در HTML تگ‌ها نقش کلیدی دارند. در ادامه با چند نمونه از مهم‌ترین تگ‌ها آشنا می‌شویم:

تگ	کاربرد
`<h1>` تا `<h6>`	عنوان‌ها با اندازه‌های مختلف
`<p>`	پاراگراف
`<a>`	لینک به صفحات دیگر
`<img>`	نمایش تصویر
`<ul>` و `<li>`	لیست‌های نامرتب
`<ol>` و `<li>`	لیست‌های مرتب
`<div>`	بخش‌بندی محتوا
`<span>`	برجسته‌سازی بخشی از متن

ویژگی‌ها (Attributes) در HTML

تگ‌ها می‌توانند ویژگی‌هایی داشته باشند که رفتار یا ظاهر آن‌ها را مشخص می‌کند.
مثلاً در تگ لینک:

در این مثال:

href آدرس مقصد لینک را تعیین می‌کند.
target="_blank" باعث می‌شود لینک در تب جدید باز شود.

تفاوت بین بلاک (Block) و اینلاین (Inline)

در HTML، عناصر به دو نوع تقسیم می‌شوند:

Block Elements → کل عرض صفحه را می‌گیرند (مثل <div> و <p>).
Inline Elements → فقط به اندازه محتوای خود فضا می‌گیرند (مثل <a> و <span>).

🔸 این تفاوت در نحوه نمایش عناصر در طراحی صفحات وب اهمیت زیادی دارد.

نحوه درج تصویر در HTML

نمایش تصویر با تگ <img> انجام می‌شود:

src مسیر فایل تصویر است.
alt توضیحی است که در صورت عدم بارگذاری تصویر نمایش داده می‌شود (و برای سئو هم مهم است).

لینک‌سازی در HTML

لینک‌ها یکی از بخش‌های مهم هر وب‌سایت هستند. برای ایجاد لینک از تگ <a> استفاده می‌شود:

🔸 همچنین می‌توانید لینک را به یک بخش از همان صفحه هدایت کنید با استفاده از id:

لیست‌ها در HTML

برای نمایش مجموعه‌ای از موارد از لیست‌ها استفاده می‌شود.

لیست نامرتب:

لیست مرتب:

جدول‌سازی در HTML

جداول برای نمایش داده‌ها استفاده می‌شوند:

💡 تگ‌های اصلی جدول:

<table> → شروع جدول
<tr> → سطر جدول
<td> → سلول داده
<th> → سلول عنوان

فرم‌ها در HTML

فرم‌ها برای دریافت اطلاعات از کاربر به‌کار می‌روند:

ویژگی‌ها:

action مسیر فایل پردازش اطلاعات است.
method نوع ارسال را مشخص می‌کند (get یا post).

نکات طلایی برای یادگیری HTML سریع‌تر

✅ هر روز کدنویسی تمرین کنید.
✅ از سایت‌های آموزشی مانند W3Schools استفاده کنید.
✅ اشتباه کردن طبیعی است؛ از خطاها یاد بگیرید.
✅ پس از HTML، یادگیری CSS را آغاز کنید تا ظاهر سایت خود را زیباتر کنید.
✅ برای تست کدها از محیط‌های آنلاین مانند CodePen یا JSFiddle بهره ببرید.

ابزارهای مفید برای کار با HTML

Visual Studio Code – بهترین ادیتور رایگان برای HTML
Live Server – افزونه نمایش زنده تغییرات کد
Prettier – ابزار برای مرتب‌سازی و زیباسازی کد
Emmet – میانبرهایی برای سرعت در کدنویسی

اشتباهات رایج در HTML که باید از آن‌ها دوری کنید

فراموش کردن بستن تگ‌ها
استفاده نکردن از ویژگی alt در تصاویر
استفاده اشتباه از تگ‌های عنوان (مثلاً چند <h1> در یک صفحه)
نداشتن ساختار مشخص برای محتوای صفحه

تفاوت HTML و CSS چیست؟

HTML ساختار صفحه را می‌سازد.
CSS ظاهر و طراحی صفحه را زیبا می‌کند.

به زبان ساده:

HTML اسکلت سایت است و CSS لباس آن!

در این مقاله یاد گرفتیم که HTML چیست، چه کاربردی دارد و چگونه می‌توان اولین صفحه وب را ایجاد کرد. اگر می‌خواهید طراح سایت شوید، یادگیری HTML نقطه شروع شماست.
💬 پیشنهاد ما: همین امروز یک فایل با نام index.html بسازید و اولین صفحه وب خود را طراحی کنید!
برای تمرین بیشتر و مشاهده پروژه‌های عملی، به سایت دودکانی خوی سر بزنید و آموزش‌ها و منابع رایگان را دنبال کنید.