HTML چیست؟ آموزش کامل HTML از صفر برای مبتدیان

مقدمه

اگر تا به حال یک صفحه وب باز کرده‌اید — و مطمئناً کرده‌اید — پس با نتیجه کار HTML آشنا هستید. HTML زبانی است که پایه و اساس هر چیزی است که در مرورگر می‌بینید: از متن ساده یک بلاگ گرفته تا فرم‌های پیچیده یک فروشگاه اینترنتی.

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

HTML چیست؟

HTML مخفف HyperText Markup Language است. بریم ببینیم هر کلمه چه معنایی دارد:

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

به زبان ساده‌تر: HTML اسکلت یک صفحه وب است. مثل استخوان‌بندی بدن انسان — خودش به تنهایی زیاد جذاب نیست، اما بدون آن هیچ‌چیز سر پا نمی‌ماند.

تاریخچه مختصر HTML

HTML در سال ۱۹۹۱ توسط تیم برنرز-لی (Tim Berners-Lee) در CERN خلق شد. او می‌خواست دانشمندان بتوانند مستندات را به راحتی با یکدیگر به اشتراک بگذارند. اولین نسخه HTML فقط ۱۸ تگ داشت.

امروز در سال ۲۰۲۴، از HTML5 استفاده می‌کنیم — نسخه‌ای که از سال ۲۰۱۴ به استاندارد اصلی تبدیل شده و قابلیت‌هایی مثل ویدیو، صدا، canvas و بسیاری چیز دیگر را بدون نیاز به پلاگین خارجی ارائه می‌دهد.

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

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


<!DOCTYPE html>
<html lang="fa" dir="rtl">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" c"width=device-width, initial-scale=1.0">
        <title>اولین صفحه من</title>
    </head>
    <body>
        <h1>سلام دنیا!</h1>
        <p>این اولین صفحه وب من است.</p>
    </body>
</html>

هر خط از این کد یک نقش دارد:

DOCTYPE html: به مرورگر می‌گوید این یک فایل HTML5 است.
html: ریشه (root) تمام محتوای صفحه. تمام چیز دیگری داخل آن است.
head: اطلاعاتی که برای مرورگر و موتورهای جستجو مهم است اما کاربر مستقیماً نمی‌بیند: عنوان صفحه، charset، متا تگ‌ها.
body: هر چیزی که در مرورگر نمایش داده می‌شود اینجاست.

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

تگ‌های HTML با علامت‌های < و > نوشته می‌شوند. اکثر تگ‌ها یک تگ باز و یک تگ بسته دارند:

    
<p>این یک پاراگراف است.</p>
<h1>این یک عنوان است.</h1>
<strong>این متن توپر است.</strong>

برخی تگ‌ها self-closing هستند — یعنی نیاز به تگ بسته ندارند:

    
<img src="photo.jpg" alt="عکس من">
<br>
<input type="text">

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

در ادامه با مهم‌ترین تگ‌هایی که در هر پروژه وب استفاده می‌شوند آشنا می‌شوید:

تگ‌های عنوان (Headings)

HTML شش سطح عنوان دارد. h1 بزرگ‌ترین و مهم‌ترین است و h6 کوچک‌ترین:

    
<h1>عنوان اصلی صفحه — فقط یکبار استفاده شود</h1>
<h2>عنوان بخش دوم</h2>
<h3>عنوان زیربخش</h3>
<h4>عنوان سطح چهارم</h4>

از نظر SEO، هر صفحه باید دقیقاً یک h1 داشته باشد و سلسله مراتب عنوان‌ها رعایت شود.

تگ‌های متن

    
<p>پاراگراف عادی</p>
<strong>متن مهم (bold)</strong>
<em>متن تاکیدی (italic)</em>
<mark>متن هایلایت شده</mark>
<del>متن حذف شده</del>
<code>کد inline</code>
<br>  <!-- شکستن خط -->
<hr>  <!-- خط افقی -->

لیست‌ها

    
<!-- لیست نامرتب -->
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<!-- لیست مرتب -->
<ol>
    <li>ابتدا HTML یاد بگیر</li>
    <li>سپس CSS</li>
    <li>بعد JavaScript</li>
</ol>

لینک‌ها و تصاویر

    
<!-- لینک -->
<a href="https://codeloop.ir">کدلوپ</a>
<!-- لینک در تب جدید -->
<a href="https://codeloop.ir" target="_blank">کدلوپ</a>
<!-- تصویر -->
<img src="logo.png" alt="لوگوی کدلوپ" width="200">

توجه کنید alt در تصویر از نظر دسترس‌پذیری و SEO بسیار مهم است — اگر تصویر لود نشود این متن نمایش داده می‌شود.

Attribute‌ها در HTML چیستند؟

Attribute‌ها اطلاعات اضافه‌ای هستند که داخل تگ باز قرار می‌گیرند و رفتار یا ظاهر آن را تغییر می‌دهند:

    
<a href="/articles" class="btn" id="main-link" target="_blank">
مقالات
</a>

href: آدرس لینک مقصد
class: برای استایل‌دهی با CSS
id: شناسه یکتا — برای JavaScript یا لنگر لینک
target: تعیین نحوه باز شدن لینک

المان‌های Semantic در HTML5

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

تگ	کاربرد	مثال
`header`	هدر صفحه یا بخش	لوگو و منوی ناوبری
`nav`	منوی ناوبری	لینک‌های اصلی سایت
`main`	محتوای اصلی صفحه	متن مقاله یا محصول
`article`	محتوای مستقل	پست بلاگ، خبر
`section`	بخش موضوعی	گروه‌بندی محتوا
`aside`	محتوای جانبی	سایدبار، تبلیغات
`footer`	فوتر صفحه	کپی‌رایت، لینک‌ها

قبل از HTML5 همه این بخش‌ها با <div> ساخته می‌شدند. الان موتورهای جستجو می‌توانند ساختار صفحه را بهتر درک کنند.

فرم‌ها در HTML

فرم‌ها راه اصلی دریافت ورودی از کاربر هستند — از باکس جستجو تا فرم ثبت‌نام:

    
<form action="/submit" method="POST">
    <label for="name">نام:</label>
    <input type="text" id="name" name="name" placeholder="نام خود را وارد کنید">
    <label for="email">ایمیل:</label>
    <input type="email" id="email" name="email">
    <label for="message">پیام:</label>
    <textarea id="message" name="message" rows="4"></textarea>
    <button type="submit">ارسال</button>
</form>

تفاوت HTML، CSS و JavaScript

این سه تکنولوژی ستون‌های وب مدرن هستند. هر کدام نقش متفاوتی دارند:

تکنولوژی	نقش	مثال
HTML	ساختار و محتوا	«یک دکمه وجود دارد»
CSS	ظاهر و استایل	«دکمه آبی است و گرد»
JavaScript	رفتار و تعامل	«وقتی کلیک شد، فرم ارسال شود»

یک تشبیه ساده: HTML مثل استخوان‌بندی ساختمان است، CSS مثل رنگ و دیزاین داخلی، و JavaScript مثل برق و تاسیسات است که همه چیز را متحرک می‌کند.

یک مثال کامل: کارت پروفایل

بریم یک مثال واقعی ببینیم. این کد یک کارت پروفایل ساده می‌سازد:

    
<!DOCTYPE html>
<html lang="fa" dir="rtl">
    <head>
        <meta charset="UTF-8">
        <title>پروفایل</title>
    </head>
    <body>
        <article class="profile-card">
            <img src="avatar.jpg" alt="تصویر پروفایل">
            <h2>رضا احمدی</h2>
            <p>توسعه‌دهنده فرانت‌اند</p>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
                <li>React</li>
            </ul>
            <a href="mailto:reza@example.com">تماس با من</a>
        </article>
    </body>
</html>

این کد ساده است اما تمام مفاهیمی که یاد گرفتیم را نشان می‌دهد: ساختار صفحه، Semantic Element، تصویر، عنوان، لیست و لینک.

نکات مهم برای نوشتن HTML خوب

تورفتگی (Indentation) رعایت کنید: کد قابل خواندن، کد قابل نگهداری است.
همیشه alt برای تصاویر بنویسید: هم برای accessibility، هم برای SEO.
از Semantic Tags استفاده کنید: به جای div برای همه چیز، از header، main، article و footer استفاده کنید.
یک h1 در هر صفحه: برای SEO ضروری است.
تگ‌ها را همیشه ببندید: مرورگرها خیلی بخشنده هستند، اما کد ناقص می‌تواند رفتارهای عجیب ایجاد کند.

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

نتیجه‌گیری

HTML پایه‌ای است که تمام وب روی آن بنا شده. شاید ساده به نظر برسد، اما تسلط واقعی بر HTML — از Semantic Elements تا accessibility و SEO — چیزی است که توسعه‌دهندگان حرفه‌ای را از مبتدیان جدا می‌کند.

قدم بعدی بعد از یادگیری HTML، یادگیری CSS است — زبانی که به HTML ظاهر و استایل می‌دهد. بعد از آن، JavaScript به صفحاتتان جان می‌دهد. این سه به اضافه یک فریم‌ورک مثل React، تمام چیزی است که برای ساختن هر وب‌اپلیکیشن مدرنی نیاز دارید.

HTML چیست؟ آموزش جامع HTML از صفر تا پیشرفته