📌 HTML چیست و چرا باید یاد بگیریم؟

HTML (HyperText Markup Language) زبان استاندارد نشانه‌گذاری برای ایجاد صفحات وب است. تمام وب‌سایت‌هایی که می‌بینید – از گوگل گرفته تا اینستاگرام – اسکلت اصلی خود را با HTML می‌سازند. یادگیری HTML اولین قدم برای تبدیل شدن به یک توسعه‌دهنده وب است.

در این دوره جامع که توسط Arpam Studio تدوین شده، شما را به صورت عملی و گام‌به‌گام با تمام جنبه‌های HTML آشنا می‌کنیم. از تگ‌های ساده تا فرم‌های پیچیده، از Canvas گرفته تا اصول سئو و دسترس‌پذیری.

💡 نکته طلایی: HTML یک زبان برنامه‌نویسی نیست، بلکه یک زبان نشانه‌گذاری است. مرورگر تگ‌ها را تفسیر کرده و محتوا را به صورت بصری نمایش می‌دهد. برای حرفه‌ای شدن، باید CSS و JavaScript را نیز در کنار HTML بیاموزید.

🏗 ساختار پایه یک سند HTML

هر فایل HTML یک ساختار ثابت و استاندارد دارد. این ساختار شامل اعلان نوع سند (<!DOCTYPE html>)، تگ <html>، بخش <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>
</head>
<body>
    <h1>سلام دنیا!</h1>
    <p>این اولین صفحه وب من است.</p>
</body>
</html>

توضیح: <!DOCTYPE html> به مرورگر می‌گوید که با HTML5 طرف است. ویژگی lang="fa" زبان فارسی را مشخص می‌کند و dir="rtl" جهت راست‌به‌چپ را فعال می‌سازد.

🔤 تیترها و سلسله‌مراتب محتوا

برای تعریف عناوین از تگ‌های <h1> تا <h6> استفاده می‌شود. <h1> مهم‌ترین (معمولاً عنوان اصلی صفحه) و <h6> کم‌اهمیت‌ترین است. رعایت ترتیب منطقی تیترها برای سئو و دسترس‌پذیری حیاتی است.

<h1>عنوان اصلی (تنها یکبار در صفحه)</h1>
<h2>بخش دوم</h2>
<h3>زیرمجموعه بخش دوم</h3>
<h4>عنوان ریز</h4>
<h5>عنوان ریزتر</h5>
<h6>عنوان خیلی ریز</h6>

📄 پاراگراف، شکست خط و خط افقی

برای نوشتن متن پاراگرافی از <p> استفاده می‌کنیم. برای شکستن خط بدون ایجاد پاراگراف جدید، <br> به کار می‌رود و برای جداکننده افقی از <hr> بهره می‌بریم.

<p>این یک پاراگراف نمونه است که می‌تواند چندین خط را شامل شود.</p>
<hr>
<p>این پاراگراف با خط افقی جدا شده است.<br>
و این جمله در خط جدید نمایش داده می‌شود.</p>

✨ قالب‌بندی و استایل متن

HTML تگ‌های معنایی متنوعی برای تأکید، اهمیت و ظاهر متن دارد. برخی از آن‌ها معنا دارند (مانند <strong> برای اهمیت زیاد) و برخی صرفاً ظاهری هستند. بهتر است از تگ‌های معنایی استفاده کنید.

<p>این متن <strong>بسیار مهم</strong> است.</p>
<p>تأکید ملایم با <em>ایتالیک</em> انجام می‌شود.</p>
<p>متن <mark>برجسته شده</mark> با پس‌زمینه زرد.</p>
<p><small>این متن کوچک است.</small></p>
<p><del>متن حذف شده</del> و <ins>متن جدید</ins></p>

🖼 تصاویر و ویژگی‌های آن‌ها

تگ <img> برای نمایش تصویر به کار می‌رود. ویژگی src آدرس تصویر و alt متن جایگزین (برای مواقعی که تصویر بارگذاری نشود یا برای نابینایان) ضروری است. ابعاد را می‌توان با width و height تنظیم کرد.

<img src="https://via.placeholder.com/300x150/f59e0b/white?text=Arpam+Studio" 
     alt="لوگوی Arpam Studio"
     width="300" height="150">

📋 لیست‌های نامرتب، مرتب و تعریفی

سه نوع لیست اصلی داریم: نامرتب (<ul>) با نشانه‌های دایره، مرتب (<ol>) با شماره یا حروف، و تعریفی (<dl>) برای واژه‌نامه‌ها.

<h4>لیست خرید (نامرتب)</h4>
<ul>
    <li>شیر</li>
    <li>نان</li>
</ul>

<h4>مراحل پخت کیک (مرتب)</h4>
<ol>
    <li>آماده‌سازی مواد</li>
    <li>مخلوط کردن</li>
    <li>پخت در فر</li>
</ol>

<h4>واژه‌نامه (تعریفی)</h4>
<dl>
    <dt>HTML</dt>
    <dd>زبان نشانه‌گذاری ابرمتن</dd>
</dl>

📊 جداول داده‌ای

برای ساخت جدول از <table>، برای ردیف از <tr>، برای سرستون از <th> و برای سلول‌های داده از <td> استفاده می‌کنیم. می‌توان با colspan و rowspan سلول‌ها را ادغام کرد.

<table border="1" style="border-collapse:collapse; width:100%;">
    <tr>
        <th colspan="2">اطلاعات کارمند</th>
    </tr>
    <tr>
        <td>نام</td>
        <td>سارا احمدی</td>
    </tr>
    <tr>
        <td>سن</td>
        <td>۲۹</td>
    </tr>
</table>

📝 فرم‌ها و دریافت اطلاعات

با تگ <form> فرم می‌سازیم. داخل آن از <input> (انواع مختلف مثل text, email, password)، <textarea> برای متن طولانی و <button> برای دکمه استفاده می‌شود. ویژگی required فیلد را اجباری می‌کند.

<form action="#" method="post">
    <label for="name">نام:</label>
    <input type="text" id="name" required>
    <br><br>
    <label for="email">ایمیل:</label>
    <input type="email" id="email">
    <br><br>
    <label for="message">پیام:</label>
    <textarea id="message" rows="3"></textarea>
    <br><br>
    <button type="submit">ارسال فرم</button>
</form>

🧱 تگ‌های معنایی HTML5

تگ‌های معنایی ساختار محتوا را برای موتورهای جستجو و فناوری‌های کمکی بهتر توصیف می‌کنند. از آن جمله‌اند: <header>، <nav>، <main>، <section>، <article>، <aside> و <footer>.

<header>
    <h1>عنوان سایت</h1>
    <nav><a href="#">خانه</a> | <a href="#">درباره ما</a></nav>
</header>
<main>
    <article>
        <h2>مقاله اول</h2>
        <p>محتوای اصلی مقاله.</p>
    </article>
    <aside><p>بخش کناری (aside).</p></aside>
</main>
<footer><p>پاورقی</p></footer>

🎬 چندرسانه‌ای: ویدئو و صدا

با تگ‌های <video> و <audio> می‌توانید فایل‌های ویدئویی و صوتی را مستقیماً در صفحه نمایش دهید. ویژگی controls دکمه‌های پخش را اضافه می‌کند.

<video width="320" controls>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    مرورگر شما از ویدئو پشتیبانی نمی‌کند.
</video>
<br>
<audio controls>
    <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
</audio>

🔣 موجودیت‌های کاراکتری (Character Entities)

برای نمایش کاراکترهای رزرو شده مانند < و > یا کاراکترهای خاص مانند ©، از موجودیت‌ها استفاده می‌کنیم. مثال: &lt; برای < و &copy; برای ©.

<p>برای نمایش تگ پاراگراف از &lt;p&gt; استفاده کنید.</p>
<p>کپی‌رایت: &copy; 2026 Arpam Studio</p>

📦 ظرف‌های بلوکی و درون‌خطی: div و span

<div> یک عنصر بلوکی (block) است که برای گروه‌بندی عناصر بزرگ استفاده می‌شود. <span> یک عنصر درون‌خطی (inline) است و معمولاً برای بخش‌های کوچک متن به کار می‌رود. هر دو اغلب با CSS ترکیب می‌شوند.

<div style="border:1px solid silver; padding:15px; border-radius:8px;">
    <p>این پاراگراف درون یک div قرار دارد. 
    <span style="color:green; font-weight:bold;">این قسمت سبز و پررنگ است.</span>
    </p>
</div>

🖼 iframe – جاسازی صفحات دیگر

تگ <iframe> برای نمایش یک صفحه وب دیگر درون صفحه فعلی استفاده می‌شود. امنیت آن را با ویژگی sandbox می‌توان افزایش داد.

<iframe src="https://www.example.com" width="100%" height="200" style="border:1px solid gray;"></iframe>

🏷 متاتگ‌ها و اصول اولیه سئو

متاتگ‌ها درون <head> قرار می‌گیرند و اطلاعاتی درباره صفحه به مرورگر و موتورهای جستجو می‌دهند. مهم‌ترین آن‌ها charset، viewport، description و keywords هستند (اگرچه keywords امروزه اهمیت کمتری دارد).

<head>
    <meta charset="UTF-8">
    <meta name="description" content="آموزش کامل HTML به زبان فارسی">
    <meta name="author" content="Arpam Studio">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>آموزش HTML</title>
</head>

♿ دسترس‌پذیری (Accessibility) با ARIA

برای اینکه صفحات وب برای افراد دارای معلولیت قابل استفاده باشد، باید از ویژگی‌های ARIA و تگ‌های معنایی استفاده کنیم. مثلاً aria-label، role و alt در تصاویر.

<button aria-label="بستن پنجره">✖</button>
<nav aria-label="منوی اصلی">
    <ul><li><a href="#">خانه</a></li></ul>
</nav>

🗂 ویژگی‌های data-* سفارشی

با استفاده از data-* می‌توانیم اطلاعات سفارشی را به عناصر HTML اضافه کنیم که توسط جاوااسکریپت قابل خواندن است، بدون اینکه روی نمایش تأثیر بگذارد.

<div data-user-id="12345" data-role="admin">
    کاربر ویژه
</div>

⚙ فرم‌های پیشرفته و اعتبارسنجی

HTML5 انواع ورودی جدیدی مانند date، color، range و ویژگی‌های اعتبارسنجی مانند pattern، min، max ارائه می‌دهد. این قابلیت‌ها تجربه کاربری را بهبود می‌بخشند.

<form>
    <label>تاریخ تولد:<input type="date" required></label>
    <br>
    <label>رنگ مورد علاقه:<input type="color"></label>
    <br>
    <label>سن (بین ۱ تا ۱۰۰):<input type="number" min="1" max="100"></label>
    <br>
    <button type="submit">ثبت</button>
</form>

🎨 Canvas – رسم گرافیکی با HTML

تگ <canvas> یک بوم نقاشی در اختیارتان می‌گذارد که با جاوااسکریپت می‌توانید روی آن اشکال، نمودار و انیمیشن ایجاد کنید.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid gray;"></canvas>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "#f59e0b";
    ctx.fillRect(20, 20, 150, 50);
</script>

📚 واژه‌نامه اصطلاحات HTML

Tag (تگ)
دستورالعمل‌های HTML که با علامت < > مشخص می‌شوند. مثلاً <p>.
Attribute (ویژگی)
اطلاعات اضافی که به تگ اضافه می‌شود، مانند href در <a>.
Element (عنصر)
مجموعه تگ باز، محتوا و تگ بسته. مثال: <p>سلام</p>.
Semantic HTML
استفاده از تگ‌هایی که معنا را منتقل می‌کنند، مثل <article>.
DOCTYPE
اعلانی که نسخه HTML را مشخص می‌کند؛ برای HTML5 به صورت <!DOCTYPE html>.
Viewport
تنظیم نحوه نمایش صفحه در دستگاه‌های مختلف با متاتگ viewport.

❓ پرسش‌های متداول (FAQ)

۱. تفاوت HTML و HTML5 چیست؟
HTML5 نسخه جدیدتر HTML است که امکانات بیشتری مانند تگ‌های معنایی، پشتیبانی چندرسانه‌ای و APIهای جدید دارد.
۲. آیا HTML allein برای ساخت سایت کافی است؟
خیر. HTML ساختار را می‌سازد، اما برای ظاهر نیاز به CSS و برای تعامل نیاز به JavaScript دارید.
۳. چرا باید تگ‌های معنایی را به div معمولی ترجیح دهم؟
زیرا موتورهای جستجو محتوای شما را بهتر می‌فهمند و کاربران دارای صفحه‌خوان راحت‌تر ناوبری می‌کنند.
۴. چگونه امنیت iframe را بالا ببرم؟
از ویژگی sandbox="" استفاده کنید تا دسترسی‌های iframe محدود شود.

🧩 پروژه نهایی: کارت پروفایل حرفه‌ای

در این پروژه تمام آموخته‌های خود را ترکیب کرده‌ایم: div بندی، تصویر، تیتر، پاراگراف، لینک و استایل درون‌خطی.

<div style="border:2px solid #f59e0b; border-radius:18px; padding:2rem; max-width:360px; text-align:center; background:white;">
    <img src="https://via.placeholder.com/100" style="border-radius:50%; border:3px solid #f59e0b;" alt="آواتار">
    <h2 style="color:#b45309;">Arpam Studio</h2>
    <p style="color:gray;">توسعه‌دهنده فول‌استک</p>
    <a href="#" style="background:#f59e0b; color:white; padding:0.6rem 1.5rem; border-radius:30px; text-decoration:none; display:inline-block;">نمونه‌کارها</a>
</div>

🎉 تبریک! شما اکنون به HTML مسلط شده‌اید. قدم بعدی: CSS برای زیباسازی و JavaScript برای پویاسازی.