یاد بگیریم، بسازیم

← بازگشت به صفحه اصلی

HTML چیست؟

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

فهرست مطالب

HTML دقیقاً چیکار می‌کنه؟

HTML مخفف HyperText Markup Language هست. کارش اینه که محتوای یه صفحه‌ی وب رو مشخص کنه: کجا تیتره، کجا پاراگرافه، کجا تصویره، کجا لینکه. HTML خودش مسئول ظاهر (رنگ، فونت) نیست — اون وظیفه‌ی CSS‌ه؛ HTML فقط ساختار و معنای محتوا رو مشخص می‌کنه.

چرا HTML به وجود اومد؟

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

ساختار پایه‌ای یه سند HTML

هر فایل HTML یه ساختار استاندارد داره:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>عنوان صفحه</title>
</head>
<body>
    <h1>سلام دنیا</h1>
</body>
</html>
  • <!DOCTYPE html> به مرورگر می‌گه این سند از نسخه‌ی HTML5 استفاده می‌کنه
  • <head> اطلاعاتی داره که خود کاربر مستقیم نمی‌بینه (عنوان تب، فونت، لینک CSS)
  • <body> محتوایی که واقعاً تو صفحه نمایش داده می‌شه

تگ و ویژگی (Attribute)

هر تگ معمولاً یه علامت باز و بسته داره:

<p>این یک پاراگراف است.</p>

می‌تونی به تگ‌ها یه سری اطلاعات اضافه به اسم «ویژگی» (attribute) بدی:

<a href="https://example.com">لینک</a>

اینجا href یه ویژگیه که آدرس مقصد لینک رو مشخص می‌کنه.

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

  • <h1> تا <h6>: تیترها، از مهم‌ترین (h1) تا کم‌اهمیت‌ترین (h6)
  • <p>: پاراگراف متن
  • <a>: لینک
  • <img>: تصویر
  • <ul> و <li>: لیست و آیتم‌های لیست
  • <div> و <span>: کانتینرهای عمومی بدون معنای خاص، برای گروه‌بندی محتوا

تو بخش بعدی این مجموعه با تگ‌های متنی، لیست، لینک، تصویر، جدول و فرم با جزئیات بیشتر آشنا می‌شی.

چرا تگ‌های سمانتیک مهمن؟

به‌جای این‌که همه‌چیز رو با <div> بسازی، HTML5 یه سری تگ سمانتیک (معنادار) داره که هم برای مرورگر و موتورهای جستجو، هم برای ابزارهای صفحه‌خوان (کاربران کم‌بینا) معنای بیشتری دارن:

<header>...</header>
<nav>...</nav>
<main>...</main>
<article>...</article>
<footer>...</footer>

مثلاً همین سایتی که الان می‌بینی، هدر، نویگیشن، محتوای اصلی و فوترش هر کدوم با تگ سمانتیک درستش نوشته شدن، نه یه مشت <div> بی‌نام. این کار سئوی سایت رو هم بهتر می‌کنه.

کجاها HTML لازمه؟

  • هر صفحه‌ی وب: بدون HTML اصلاً چیزی برای نمایش وجود نداره
  • ایمیل‌های HTML: خیلی از ایمیل‌های تبلیغاتی و خبرنامه‌ها با HTML طراحی می‌شن
  • اپلیکیشن‌های وب: فریم‌ورک‌هایی مثل React یا Vue هم در نهایت HTML تولید می‌کنن

این مقاله بخش اوله از یه مجموعه‌ی سه‌بخشی درباره‌ی HTML:

جمع‌بندی

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

← بازگشت به صفحه اصلی