⚡ دایره‌المعارف جامع HTML

۰

مقدمه و راهنمای استفاده

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

به کامل‌ترین مرجع HTML فارسی خوش آمدی! 👋 این سند یک کتاب آموزشی ساده نیست؛ یک دایره‌المعارف است که سعی کرده تمام تگ‌های HTML را پوشش دهد — از پرکاربردترین‌ها تا تگ‌هایی که دهه‌هاست منقضی شده‌اند و دیگر هیچ مرورگری ازشان پشتیبانی نمی‌کند.

راهنمای برچسب‌ها (Pills)

کنار نام هر تگ، یک یا چند «برچسب رنگی» می‌بینی که نوع آن را مشخص می‌کند:

Block — بلوکی Inline — درون‌خطی Empty — خالی (بدون تگ بسته) Metadata — متادیتا Deprecated — منقضی Obsolete — حذف‌شده

Block (بلوکی): کل عرض خط را می‌گیرد و خط جدید ایجاد می‌کند (مثل پاراگراف).
Inline (درون‌خطی): فقط به اندازه محتوایش جا می‌گیرد و وسط متن می‌نشیند.
Empty (خالی/Void): محتوا ندارد، پس تگ بسته هم ندارد (مثل تصویر).
Metadata: در بخش <head> قرار می‌گیرد و دیده نمی‌شود.
Deprecated (منقضی): هنوز شاید کار کند اما استفاده‌اش ممنوع است — جایگزین مدرن دارد.
Obsolete (حذف‌شده): کاملاً از استاندارد حذف شده و مرورگرهای مدرن نادیده‌اش می‌گیرند.

🔍 از جستجو استفاده کن!

بالای منوی کناری یک جعبه جستجو هست. هر تگی را که دنبالش هستی تایپ کن (مثلاً canvas یا «فرم») تا فوراً فصل مربوطه فیلتر شود.

📌 درباره استانداردها

این مرجع بر اساس HTML Living Standard (استاندارد زنده WHATWG) که نسخه فعلی و رسمی HTML است نوشته شده. هر جا تگی قدیمی باشد، صریحاً مشخص شده.

۱

آناتومی کامل تگ‌ها و صفت‌ها

درک عمیق از واحدهای سازنده HTML

قبل از غرق شدن در تگ‌ها، بیا با دقت کالبدشکافی کنیم که یک «عنصر» (Element) دقیقاً از چه چیزهایی ساخته شده. این پایه‌ی فهم همه چیز است.

عنصر، تگ و محتوا

آناتومی یک عنصر

   ┌─── تگ باز (Opening Tag)
   │        ┌─── محتوا (Content)
   │        │       ┌─── تگ بسته (Closing Tag)
   ▼        ▼       ▼
<p>سلام دنیا</p>
└──────────────────┘
  کل این = یک «عنصر» (Element)

کالبدشکافی یک صفت (Attribute)

آناتومی صفت

<a href="page.html" target="_blank">
    ▲       ▲              ▲
    │       │              └── صفت دوم
    │       └── مقدار (Value) داخل گیومه
    └── نام صفت (Name)

صفت‌ها فقط در تگ باز می‌آیند.
با فاصله از نام تگ و از همدیگر جدا می‌شوند.
مقدار را معمولاً داخل گیومه دوتایی " " می‌گذاریم (توصیه می‌شود).
ترتیب صفت‌ها مهم نیست.

صفت‌های بولی (Boolean Attributes)

بعضی صفت‌ها فقط «وجود» یا «عدم وجود»‌شان مهم است و مقدار نمی‌خواهند:

صفت بولی

<!-- این‌ها همگی معتبر و معادل هستند: -->
<input disabled>
<input disabled="">
<input disabled="disabled">

<!-- صرفِ نوشتن نام صفت = فعال بودن آن -->
<video autoplay muted loop controls>

نمونه‌های صفت بولی: disabled، checked، required، readonly، selected، multiple، autofocus، hidden، async، defer.

انواع گروه‌بندی محتوا (Content Categories)

HTML تگ‌ها را در دسته‌های منطقی گروه‌بندی می‌کند. این مفهوم پیشرفته اما مهم است:

دسته	توضیح
Flow	اکثر عناصری که در body می‌آیند
Phrasing	متن و عناصر درون‌خطی
Heading	عناوین (h1 تا h6)
Sectioning	بخش‌بندی (article, section, nav, aside)
Embedded	محتوای خارجی (img, video, iframe)
Interactive	عناصر تعاملی (a, button, input)
Metadata	عناصر head (meta, link, title)

کامنت‌ها

کامنت

<!-- این یک کامنت تک‌خطی است -->

<!--
  کامنت
  چندخطی
-->

<!-- کامنت‌ها در منبع صفحه دیده می‌شوند پس
     اطلاعات حساس را داخلشان نگذار! -->

⚠️ تگ‌های خود-بسته (Self-closing)

در HTML5، نوشتن اسلش پایانی در تگ‌های خالی اختیاری است: هم <br> و هم <br /> درست‌اند. اما در XHTML (یا داخل SVG) اسلش اجباری است. قرارداد مدرن: در HTML خالص اسلش را حذف کن.

۲

تگ‌های ساختاری ریشه

اسکلت اصلی که هر سند باید داشته باشد

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

<!DOCTYPE html> اعلان اعلان نوع سند — به مرورگر می‌گوید این HTML5 است

اولین خط هر سند. این یک تگ معمولی نیست، بلکه یک «اعلان» است. وظیفه‌اش این است که مرورگر را در «حالت استاندارد» (Standards Mode) قرار دهد، نه «حالت عجیب» (Quirks Mode) که رفتار قدیمی و غیرقابل‌پیش‌بینی دارد.

DOCTYPE

<!DOCTYPE html>  <!-- HTML5 — ساده و مدرن -->

<!-- در گذشته (HTML4) اینطوری بود: -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ...>

⚠️ اگر فراموشش کنی

بدون DOCTYPE، مرورگر وارد Quirks Mode می‌شود و طراحی صفحه‌ات به‌هم می‌ریزد. همیشه در خط اول بنویسش.

<html> ریشه عنصر ریشه (root) که همه چیز داخلش قرار می‌گیرد

تنها فرزندان مستقیم مجازش <head> و <body> هستند.

صفت‌های مهم:

صفت	کاربرد
lang	زبان سند (fa, en, ar...) — برای SEO و صفحه‌خوان حیاتی
dir	جهت متن: rtl (راست‌به‌چپ) یا ltr (چپ‌به‌راست) یا auto
xmlns	فضای‌نام XML (فقط در XHTML لازم است)

html

<html lang="fa" dir="rtl">
  ...
</html>

<head> متادیتا ظرف اطلاعات نامرئی سند

هر چیزی که در صفحه دیده نمی‌شود اما برای مرورگر، موتورهای جستجو و شبکه‌های اجتماعی مهم است، اینجا قرار می‌گیرد: عنوان، متاها، لینک CSS، اسکریپت‌ها و... . (تمام تگ‌های مجاز در head را در فصل ۳ کامل می‌بینی.)

<body> بدنه تمام محتوای قابل مشاهده صفحه

هر چیزی که کاربر می‌بیند اینجاست. در هر سند فقط یک body مجاز است.

صفت‌های رویداد معروف body:

صفت	کاربرد
onload	وقتی کل صفحه بارگذاری شد اجرا می‌شود
onunload	هنگام ترک صفحه
onresize	هنگام تغییر اندازه پنجره

💀 صفت‌های مرده body

صفت‌هایی مثل bgcolor، text، link، background روی body منقضی شده‌اند. این کارها حالا با CSS انجام می‌شوند. (در فصل تگ‌های مرده بیشتر می‌بینی.)

۳

متادیتا و عناصر <head>

اطلاعات پشت‌صحنه‌ای که سرنوشت سایتت را تعیین می‌کنند

<title> متادیتا عنوان صفحه که در تب مرورگر و نتایج گوگل نمایش داده می‌شود

مهم‌ترین عنصر برای SEO! در هر سند فقط یکی مجاز است. متن خالص می‌پذیرد (تگ داخلش کار نمی‌کند).

title

<title>فروشگاه کفش | بهترین قیمت‌ها</title>

یکی از پرکاربردترین و چندمنظوره‌ترین تگ‌ها. با تغییر صفت‌هایش، اطلاعات مختلفی ارائه می‌دهد:

۱. کدگذاری حروف (حیاتی برای فارسی):

charset

<meta charset="UTF-8">

۲. Viewport (ریسپانسیو در موبایل):

viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

۳. توضیحات، کلمات کلیدی، نویسنده (SEO):

SEO meta

<meta name="description" content="توضیح صفحه">
<meta name="keywords" content="کلمه۱, کلمه۲">
<meta name="author" content="صدرا حاتمی | Sadra Hatami">
<meta name="robots" content="index, follow">
<meta name="theme-color" content="#0a0e1a">

۴. رفرش خودکار و ریدایرکت (http-equiv):

http-equiv

<!-- هر ۳۰ ثانیه صفحه رفرش می‌شود -->
<meta http-equiv="refresh" content="30">

<!-- بعد از ۵ ثانیه به صفحه دیگر برو -->
<meta http-equiv="refresh" content="5; url=new.html">

۵. متاهای شبکه اجتماعی (Open Graph & Twitter):

Open Graph

<meta property="og:title" content="عنوان">
<meta property="og:image" content="preview.jpg">
<meta name="twitter:card" content="summary_large_image">

صفت	کاربرد
rel	نوع رابطه: stylesheet, icon, preload, preconnect, alternate, canonical
href	آدرس منبع
type	نوع MIME فایل
media	شرط رسانه‌ای (مثلاً فقط برای چاپ)
sizes	اندازه آیکون
crossorigin	تنظیمات CORS

link

<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="canonical" href="https://site.com/page">

برای استایل‌های داخلی صفحه. صفت media می‌گیرد تا فقط در شرایط خاص اعمال شود.

style

<style>
  body { background: black; }
</style>

<base> متادیتا خالی تعیین آدرس پایه و هدف پیش‌فرض برای همه لینک‌ها

در هر سند فقط یکی مجاز است و باید قبل از سایر تگ‌هایی که از URL استفاده می‌کنند بیاید.

base

<base href="https://example.com/" target="_blank">
<!-- حالا href="about" یعنی https://example.com/about -->

اگر مرورگر کاربر JavaScript را خاموش کرده باشد، محتوای داخل این تگ نمایش داده می‌شود.

noscript

<noscript>
  <p>لطفاً JavaScript را فعال کنید!</p>
</noscript>

۴

بخش‌بندی و عناوین معنایی

تگ‌هایی که به ساختار صفحه معنا می‌دهند

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

<header>بلوکیسربرگ صفحه یا یک بخش (لوگو، عنوان، منو)

می‌تواند چندبار در صفحه استفاده شود (هر article می‌تواند header خودش را داشته باشد). نباید داخل footer یا header دیگری قرار گیرد.

<nav>بلوکیبخش ناوبری اصلی (مجموعه لینک‌های مهم)

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

<main>بلوکیمحتوای اصلی و یکتای صفحه

در هر صفحه فقط یک main باید قابل مشاهده باشد و نباید داخل article, aside, header, footer یا nav قرار گیرد.

<footer>بلوکیپاورقی صفحه یا بخش (کپی‌رایت، لینک‌ها)

مثل header می‌تواند چندبار استفاده شود (پاورقی کل صفحه و پاورقی هر مقاله).

<article>بلوکیمحتوای مستقل و خودکفا (پست، خبر، نظر)

تست: اگر بتوان آن را جدا کرد و جای دیگری منتشر کرد و باز هم معنادار باشد، باید article باشد (مثل یک پست وبلاگ یا یک کامنت).

<section>بلوکییک بخش موضوعی مستقل از محتوا

معمولاً با یک عنوان (h1-h6) همراه است. اگر فقط برای استایل‌دهی می‌خواهی گروه‌بندی کنی، از div استفاده کن نه section.

<aside>بلوکیمحتوای جانبی و مرتبط (نوار کناری، تبلیغ، نکته)

محتوایی که به‌طور غیرمستقیم با محتوای اصلی مرتبط است.

<h1> ... <h6>بلوکیشش سطح عنوان، از مهم‌ترین (h1) تا کم‌اهمیت‌ترین (h6)

ساختار سلسله‌مراتبی صفحه را می‌سازند. به ترتیب استفاده کن و از پرش نکن.

⚠️ قانون h1

در هر صفحه فقط یک h1 (عنوان اصلی). بعد از h1 به h2 برو، نه h3. این برای SEO و دسترسی‌پذیری حیاتی است.

<hgroup>بلوکیگروه‌بندی یک عنوان اصلی با عنوان فرعی

برای ترکیب یک عنوان (h1-h6) با یک پاراگراف توضیحی فرعی.

hgroup

<hgroup>
  <h1>عنوان اصلی</h1>
  <p>شعار یا زیرعنوان</p>
</hgroup>

<address>بلوکیاطلاعات تماس نویسنده یا صاحب صفحه

معمولاً داخل footer قرار می‌گیرد. به‌طور پیش‌فرض ایتالیک نمایش داده می‌شود.

🖥️ ساختار معنایی نمونه

<header> سربرگ + لوگو

<nav> منو

<aside>

<footer> پاورقی

۵

گروه‌بندی محتوای متنی

پاراگراف، نقل‌قول، کد، شکل و جعبه‌های بلوکی

<p>بلوکیپاراگراف متنی

پایه‌ای‌ترین واحد متن. نمی‌توان داخلش عنصر بلوکی (مثل div یا p دیگر) گذاشت.

<hr>بلوکیخالیجداکننده موضوعی (خط افقی)

از نظر معنایی نشان‌دهنده «تغییر موضوع» است، نه فقط یک خط تزئینی. به‌طور پیش‌فرض یک خط افقی رسم می‌کند.

<pre>بلوکیمتن از پیش‌قالب‌بندی‌شده (حفظ فاصله و خطوط)

برخلاف سایر تگ‌ها، تمام فاصله‌ها، تب‌ها و خطوط جدید را دقیقاً حفظ می‌کند. با فونت monospace نمایش داده می‌شود. اغلب همراه با <code> برای نمایش کد استفاده می‌شود.

<blockquote>بلوکینقل‌قول بلند و بلوکی

صفت cite می‌گیرد که آدرس منبع نقل‌قول را مشخص می‌کند (نمایش داده نمی‌شود ولی معنادار است).

blockquote

<blockquote cite="https://source.com">
  <p>به آینده باور داشته باش.</p>
</blockquote>

<ol> <ul> <li>بلوکیلیست‌ها (در فصل ۱۰ کامل توضیح داده شده)

این تگ‌ها در فصل اختصاصی «لیست‌ها» با تمام جزئیات بررسی می‌شوند.

<dl> <dt> <dd>بلوکیلیست توضیحی (اصطلاح ← تعریف)

dl ظرف، dt اصطلاح (term) و dd توضیح (description) است. یک dt می‌تواند چند dd داشته باشد.

<figure> <figcaption>بلوکیمحتوای مستقل (تصویر/کد/نمودار) با زیرنویس

figcaption زیرنویس را مشخص می‌کند و باید اولین یا آخرین فرزند figure باشد.

figure

<figure>
  <img src="chart.png" alt="نمودار">
  <figcaption>شکل ۱: رشد فروش</figcaption>
</figure>

<div>بلوکیظرف بلوکی عمومی و بی‌معنا

پرکاربردترین تگ برای گروه‌بندی و استایل‌دهی. هیچ معنای معنایی ندارد. فقط وقتی استفاده کن که هیچ تگ معنایی مناسبی وجود نداشته باشد.

<menu>بلوکیلیست دستورات/گزینه‌ها (معادل معنایی ul برای ابزارها)

در HTML امروزی، رفتارش دقیقاً مثل ul است اما معنای «نوار ابزار/دستورات» دارد.

۶

معناشناسی متن درون‌خطی

دایره‌المعارف کامل تگ‌های inline — همه را پوشش می‌دهیم

اینجا تمام تگ‌های درون‌خطی (inline / phrasing) را با معنای دقیقشان می‌بینی. خیلی‌هایشان ظاهر مشابه دارند اما معنای متفاوت — و معنا همان چیزی است که تو را حرفه‌ای می‌کند.

تگ	نمایش پیش‌فرض	معنا و کاربرد
<a>	لینک آبی زیرخط‌دار	پیوند (در فصل ۷ کامل)
<strong>	پررنگ	اهمیت بالا (معنایی)
<b>	پررنگ	جلب توجه بصری بدون اهمیت معنایی
<em>	کج	تأکید (معنایی) — لحن صدا را تغییر می‌دهد
<i>	کج	متن متفاوت: اصطلاح فنی، نام خارجی، فکر
<mark>	هایلایت زرد	متن نشانه‌گذاری/مرتبط با جستجو
<small>	کوچک‌تر	متن جانبی (کپی‌رایت، شرایط)
<del>	خط‌خورده	متن حذف‌شده (صفت cite و datetime می‌گیرد)
<ins>	زیرخط‌دار	متن اضافه‌شده
<s>	خط‌خورده	متنی که دیگر دقیق/معتبر نیست
<u>	زیرخط‌دار	متن با حاشیه‌نویسی غیرمتنی (مثل غلط املایی)
<sub>	زیرنویس کوچک	اندیس پایین (H₂O)
<sup>	بالانویس کوچک	توان/اندیس بالا (x²)
<code>	فونت مونو	قطعه کد یا نام دستور
<kbd>	فونت مونو	ورودی کیبورد (Ctrl+C)
<samp>	فونت مونو	خروجی نمونه یک برنامه
<var>	کج	متغیر ریاضی/برنامه‌نویسی
<q>	با گیومه خودکار	نقل‌قول کوتاه درون‌خطی
<cite>	کج	عنوان یک اثر (کتاب، فیلم، آهنگ)
<abbr>	زیرخط نقطه‌چین	مخفف (با صفت title برای توضیح کامل)
<dfn>	کج	اولین تعریف یک اصطلاح
<time>	معمولی	تاریخ/زمان ماشین‌خوان (صفت datetime)
<data>	معمولی	اتصال محتوا به مقدار ماشین‌خوان (صفت value)
<span>	معمولی	ظرف درون‌خطی بی‌معنا (برای استایل/اسکریپت)
<br>	شکست خط	شکستن خط (در شعر/آدرس) — Empty
<wbr>	—	نقطه پیشنهادی شکستن کلمه طولانی — Empty
<bdi>	معمولی	جداسازی جهت متن (عالی برای فارسی+انگلیسی)
<bdo>	معمولی	وارونه کردن اجباری جهت متن (صفت dir)
<ruby>	ویژه	حاشیه‌نویسی تلفظ (زبان‌های شرق آسیا)
<rt>	کوچک بالا	متن تلفظ داخل ruby
<rp>	—	پرانتز جایگزین برای مرورگرهای بدون پشتیبانی ruby

مثال‌های عملی

نمونه‌های ترکیبی

<p>فرمول آب H<sub>2</sub>O و توان x<sup>2</sup></p>
<p>برای کپی <kbd>Ctrl+C</kbd> را بزن.</p>
<abbr title="HyperText Markup Language">HTML</abbr>
<time datetime="2024-01-15">۱۵ ژانویه</time>
<!-- bdi برای نام انگلیسی وسط متن فارسی -->
<p>کاربر <bdi>username123</bdi> امتیاز گرفت.</p>

🖥️ خروجی زنده

آب: H₂O — توان: x²

پررنگ مهم · تأکید کج · هایلایت · ~~حذف~~ · افزوده

کلید: Ctrl + C

💡 strong/b و em/i

strong و em «معنا» دارند (اهمیت و تأکید) و برای SEO و صفحه‌خوان بهترند. b و i فقط ظاهری‌اند. وقتی شک داری، نسخه معنایی را انتخاب کن.

۷

لینک‌ها — تگ <a> کامل

قلب وب — تمام صفت‌ها و انواع مسیر

<a>درون‌خطیتعاملیپیوند (anchor) به صفحات، فایل‌ها، ایمیل و...

تمام صفت‌های <a>:

صفت	کاربرد
href	آدرس مقصد (URL، #id، mailto:، tel:، javascript:)
target	محل باز شدن: _blank (تب جدید)، _self (همینجا)، _parent، _top، نام frame
rel	رابطه: noopener, noreferrer, nofollow, next, prev, external, author
download	دانلود فایل به‌جای باز کردن (می‌توان نام فایل را تعیین کرد)
hreflang	زبان سند مقصد
type	نوع MIME مقصد
ping	آدرس‌هایی که هنگام کلیک پینگ می‌شوند (ردیابی)
referrerpolicy	سیاست ارسال اطلاعات referrer

انواع مسیر:

انواع href

<!-- مطلق (سایت دیگر) -->
<a href="https://site.com">سایت</a>
<!-- نسبی (فایل خودت) -->
<a href="pages/about.html">درباره</a>
<a href="../index.html">یک پوشه بالا</a>
<!-- لنگر داخل همین صفحه -->
<a href="#section3">پرش به بخش</a>
<!-- ایمیل (با موضوع و متن) -->
<a href="mailto:[email protected]?subject=سلام&body=متن">ایمیل</a>
<!-- تماس / پیامک -->
<a href="tel:+989120000000">تماس</a>
<a href="sms:+989120000000">پیامک</a>
<!-- دانلود فایل با نام دلخواه -->
<a href="file.pdf" download="راهنما.pdf">دانلود</a>

🔐 نکته امنیتی مهم

هنگام استفاده از target="_blank"، حتماً rel="noopener noreferrer" اضافه کن. بدون آن، صفحه مقصد می‌تواند به صفحه تو دسترسی پیدا کند (حمله tabnabbing). مرورگرهای مدرن این را خودکار انجام می‌دهند اما برای اطمینان بنویسش.

۸

تصاویر و رسانه

تمام تگ‌های نمایش عکس، صوت و ویدیو

<img>درون‌خطیخالینمایش تصویر

صفت	کاربرد
src	آدرس تصویر (اجباری)
alt	متن جایگزین (اجباری برای دسترسی‌پذیری)
width / height	ابعاد به پیکسل (از پرش چیدمان جلوگیری می‌کند)
loading	lazy (بارگذاری تنبل) یا eager (فوری)
srcset	چند تصویر با اندازه‌های مختلف برای صفحات مختلف
sizes	اندازه نمایش در شرایط مختلف (همراه srcset)
decoding	نحوه رمزگشایی: async, sync, auto
crossorigin	تنظیمات CORS
usemap	اتصال به نقشه تصویر (image map)
ismap	نقشه سمت سرور
referrerpolicy	سیاست referrer

img ریسپانسیو

<img src="small.jpg"
     srcset="small.jpg 480w, large.jpg 1080w"
     sizes="(max-width: 600px) 480px, 1080px"
     alt="منظره" loading="lazy">

<picture>درون‌خطیانتخاب هوشمند تصویر بر اساس شرایط

به مرورگر اجازه می‌دهد از بین چند منبع، بهترین تصویر را انتخاب کند (مثلاً فرمت webp اگر پشتیبانی شود، یا تصویر متفاوت در موبایل).

picture

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="عکس">
</picture>

<video>درون‌خطیپخش‌کننده ویدیو

صفت	کاربرد
src	آدرس ویدیو (یا از تگ source استفاده کن)
controls	نمایش دکمه‌های پخش (بولی)
autoplay	پخش خودکار (بولی، نیاز به muted دارد)
muted	بی‌صدا (بولی)
loop	تکرار (بولی)
poster	تصویر پیش‌نمایش قبل از پخش
preload	none / metadata / auto
width / height	ابعاد پخش‌کننده
playsinline	پخش درون‌خطی در موبایل (بدون تمام‌صفحه)

video کامل

<video controls poster="thumb.jpg" width="640">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  <track src="subs.vtt" kind="subtitles" srclang="fa" label="فارسی">
  مرورگر شما از ویدیو پشتیبانی نمی‌کند.
</video>

<audio>درون‌خطیپخش‌کننده صوت

صفت‌های مشابه video دارد (controls, autoplay, muted, loop, preload, src). برای موزیک و پادکست.

<source>خالییک منبع رسانه‌ای جایگزین برای video/audio/picture

مرورگر اولین منبعی را که پشتیبانی می‌کند استفاده می‌کند. صفت‌ها: src, type, srcset, media, sizes.

<track>خالیزیرنویس و متن برای video/audio

صفت kind می‌تواند subtitles، captions، descriptions، chapters یا metadata باشد. از فایل‌های فرمت WebVTT استفاده می‌کند.

<map> <area>نقشه تصویر — تعریف نواحی کلیک‌شونده روی یک عکس

با این دو، می‌توانی بخش‌های مختلف یک تصویر را به لینک‌های متفاوت وصل کنی (مثل نقشه جغرافیایی کلیک‌شونده).

image map

<img src="map.png" usemap="#m" alt="نقشه">
<map name="m">
  <area shape="rect" coords="0,0,100,100" href="a.html" alt="بخش A">
  <area shape="circle" coords="200,200,50" href="b.html" alt="بخش B">
</map>

shape می‌تواند rect (مستطیل)، circle (دایره)، poly (چندضلعی) یا default باشد.

۹

محتوای تعبیه‌شده (Embedded)

جاسازی صفحات، اپلیکیشن‌ها و محتوای خارجی

صفت	کاربرد
src	آدرس صفحه‌ای که جاسازی می‌شود
srcdoc	محتوای HTML مستقیم (به‌جای src)
width / height	ابعاد قاب
sandbox	محدودیت‌های امنیتی (allow-scripts, allow-forms...)
allow	مجوزهای ویژگی (camera, microphone, fullscreen)
loading	lazy / eager
referrerpolicy	سیاست referrer
name	نام قاب (هدف لینک‌ها)

🔐 sandbox برای امنیت

صفت sandbox محتوای iframe را در محیط محدود اجرا می‌کند. این برای جاسازی محتوای غیرقابل‌اعتماد حیاتی است.

صفت‌ها: src, type, width, height. امروزه کمتر استفاده می‌شود.

انعطاف‌پذیرتر از embed. <param> (خالی) برای ارسال پارامتر به object استفاده می‌شد.

object

<object data="doc.pdf" type="application/pdf" width="600">
  نمایش PDF ممکن نیست.
</object>

۱۰

لیست‌ها (Lists)

سازماندهی داده‌ها به‌صورت ترتیبی، نامرتب و تعریفی

💡 سه نوع لیست

HTML سه خانوادهٔ لیست دارد: نامرتب (ul) برای آیتم‌هایی که ترتیب اهمیت ندارد، مرتب (ol) برای آیتم‌های شماره‌دار، و تعریفی (dl) برای جفت‌های اصطلاح/توضیح.

<ul>بلوکیلیست نامرتب (Unordered List) — نقطه‌ای / گلوله‌ای

برای فهرستی از آیتم‌ها که ترتیبشان مهم نیست. هر آیتم باید داخل <li> باشد.

ul

<ul>
  <li>سیب</li>
  <li>پرتقال</li>
  <li>موز</li>
</ul>

شکل گلوله را با CSS (list-style-type: disc / circle / square / none) کنترل کن — نه با صفت‌های HTML قدیمی.

<ol>بلوکیلیست مرتب (Ordered List) — شماره‌دار

برای آیتم‌هایی که ترتیب اهمیت دارد (مراحل، رتبه‌بندی). دارای صفت‌های قدرتمند:

صفت	کاربرد
type	نوع شماره‌گذاری: 1 (عدد)، A (حروف بزرگ)، a (حروف کوچک)، I (رومی بزرگ)، i (رومی کوچک)
start	شماره شروع (مثلاً start="5" یعنی از ۵ شروع کن)
reversed	شماره‌گذاری معکوس (نزولی)

ol

<ol type="I" start="3" reversed>
  <li>مرحله سوم</li>
  <li value="10">پرش به ۱۰</li>
</ol>

<li>بلوکیآیتم لیست (List Item)

تنها فرزند مجاز مستقیم ul و ol. صفت value فقط داخل ol معنا دارد و شمارهٔ آن آیتم را دستی تعیین می‌کند. می‌توان لیست‌ها را تو در تو کرد (یک ul/ol داخل یک li).

<dl> <dt> <dd>بلوکیلیست تعریفی (Description List)

برای جفت‌های اصطلاح و توضیح (واژه‌نامه، متادیتا، سوال‌وجواب). <dt> = اصطلاح، <dd> = توضیح. یک dt می‌تواند چند dd داشته باشد و برعکس.

dl

<dl>
  <dt>HTML</dt>
  <dd>زبان نشانه‌گذاری ساختار وب</dd>
  <dt>CSS</dt>
  <dd>زبان استایل‌دهی</dd>
</dl>

<menu>بلوکیلیست دستورات/گزینه‌ها (معادل معنایی ul برای ابزارها)

در HTML امروزی، menu معادل معنایی ul است اما برای فهرستی از فرمان‌ها/دکمه‌ها (مثل نوار ابزار). در گذشته صفت type (context/toolbar) داشت که حالا منسوخ شده است.

۱۱

جدول‌ها (Tables)

نمایش داده‌های دوبعدی به‌صورت ردیف و ستون

⚠️ جدول فقط برای داده

جدول‌ها فقط برای داده‌های جدولی واقعی‌اند، نه برای چیدمان صفحه (layout). برای چیدمان از CSS Grid و Flexbox استفاده کن.

<table>بلوکیجعبهٔ اصلی جدول که همه اجزا را در بر می‌گیرد

ساختار کامل و حرفه‌ای یک جدول از این اجزا تشکیل می‌شود:

table کامل

<table>
  <caption>فروش فصلی</caption>
  <colgroup>
    <col span="2">
  </colgroup>
  <thead>
    <tr><th>محصول</th><th>تعداد</th></tr>
  </thead>
  <tbody>
    <tr><td>لپ‌تاپ</td><td>۱۲</td></tr>
  </tbody>
  <tfoot>
    <tr><td>جمع</td><td>۱۲</td></tr>
  </tfoot>
</table>

<caption>بلوکیعنوان/توضیح جدول

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

<thead> <tbody> <tfoot>بلوکیگروه‌بندی ردیف‌ها به سر، بدنه و پاورقی

این سه عنصر جدول را معنایی می‌کنند. مرورگرها هنگام چاپ، سر و پاورقی را در هر صفحه تکرار می‌کنند. ترتیب نمایش بر اساس thead → tbody → tfoot است حتی اگر tfoot را زودتر بنویسی.

<tr>بلوکییک ردیف از جدول (Table Row)

هر ردیف مجموعه‌ای از سلول‌ها (th یا td) را در بر می‌گیرد.

<th>بلوکیسلول سرستون (Header Cell)

صفت	کاربرد
scope	دامنه سرستون: col (ستون)، row (ردیف)، colgroup، rowgroup — حیاتی برای screen readerها
colspan	تعداد ستون‌هایی که سلول می‌پوشاند
rowspan	تعداد ردیف‌هایی که سلول می‌پوشاند
abbr	نسخه کوتاه‌شده عنوان برای فناوری کمکی
headers	شناسه سلول‌های سرستون مرتبط

<td>بلوکیسلول داده (Table Data Cell)

صفت‌های colspan و rowspan برای ادغام سلول‌ها و headers برای اتصال به سرستون‌ها.

ادغام سلول

<td colspan="2">دو ستون</td>
<td rowspan="3">سه ردیف</td>

<colgroup> <col>خالی (col)تعریف ستون‌ها برای استایل‌دهی گروهی

با colgroup و col می‌توانی به یک یا چند ستون کامل استایل (مثل عرض یا رنگ پس‌زمینه) بدهی بدون اینکه هر سلول را جدا استایل کنی. صفت span روی col تعداد ستون‌ها را تعیین می‌کند.

۱۲

فرم‌ها (Forms)

قلب تعامل با کاربر — جمع‌آوری و ارسال داده

💡 چرا فرم مهم‌ترین فصل است؟

هر ورود/ثبت‌نام، جستجو، نظر، خرید و آپلود فایل در وب با فرم انجام می‌شود. این فصل تمام انواع input و تمام صفت‌هایشان را پوشش می‌دهد.

<form>بلوکیظرف اصلی فرم که داده‌ها را جمع و ارسال می‌کند

صفت	کاربرد
action	آدرس مقصدی که داده‌ها به آن ارسال می‌شوند
method	روش ارسال: get (در URL) یا post (در بدنه درخواست)
enctype	نوع رمزگذاری: application/x-www-form-urlencoded، multipart/form-data (برای فایل)، text/plain
target	محل باز شدن پاسخ: _self، _blank، _parent، _top
autocomplete	on / off — تکمیل خودکار مرورگر
novalidate	غیرفعال کردن اعتبارسنجی داخلی مرورگر
name	نام فرم
accept-charset	کدگذاری کاراکترهای مجاز

<input>خالیپرکاربردترین عنصر فرم — با صفت type شکل می‌گیرد

یک تگ، ده‌ها چهره! نوع آن با صفت type مشخص می‌شود. تمام انواع:

type	کاربرد
text	متن یک‌خطی ساده
password	رمز عبور (کاراکترها پنهان)
email	ایمیل با اعتبارسنجی فرمت
tel	شماره تلفن (روی موبایل کیبورد عددی)
url	آدرس وب با اعتبارسنجی
number	عدد با فلش بالا/پایین
range	اسلایدر (نوار کشویی)
search	جعبه جستجو
checkbox	چک‌باکس (چند انتخاب)
radio	دکمه رادیویی (یک انتخاب از گروه)
date	انتخابگر تاریخ
time	انتخابگر زمان
datetime-local	تاریخ و زمان محلی
month	انتخاب ماه و سال
week	انتخاب هفته
color	انتخابگر رنگ
file	آپلود فایل
hidden	مقدار پنهان (ارسال می‌شود اما دیده نمی‌شود)
submit	دکمه ارسال فرم
reset	دکمه بازنشانی فرم
button	دکمه عمومی (بدون عمل پیش‌فرض)
image	دکمه ارسال به‌شکل تصویر

صفت‌های مشترک input:

صفت	کاربرد
name	نام فیلد (کلید داده هنگام ارسال)
value	مقدار اولیه/فعلی
placeholder	متن راهنمای داخل فیلد
required	اجباری بودن فیلد
readonly	فقط‌خواندنی (قابل ارسال)
disabled	غیرفعال (ارسال نمی‌شود)
min / max	کمینه/بیشینه عدد یا تاریخ
step	گام تغییر عدد/زمان
minlength / maxlength	کمینه/بیشینه طول متن
pattern	الگوی regex برای اعتبارسنجی
autocomplete	on / off / نام فیلد (مثل email, name)
autofocus	تمرکز خودکار هنگام بارگذاری
multiple	چند مقدار (email/file)
accept	نوع فایل مجاز (image/*, .pdf)
checked	پیش‌فرض انتخاب‌شده (checkbox/radio)
list	اتصال به یک datalist
form	اتصال به فرمی با id خاص (خارج از آن)
inputmode	نوع کیبورد موبایل (numeric, decimal, tel...)

نمونه‌های input

<input type="email" name="mail" required placeholder="ایمیل">
<input type="number" min="1" max="10" step="1">
<input type="range" min="0" max="100">
<input type="file" accept="image/*" multiple>
<input type="color" value="#00e5ff">

<label>درون‌خطیبرچسب توصیفی برای فیلد فرم

کلیک روی label تمرکز را روی فیلد می‌برد. با صفت for (که برابر id فیلد است) متصل می‌شود یا فیلد را داخل خود می‌گیرد. برای دسترسی‌پذیری حیاتی است.

label

<label for="user">نام کاربری</label>
<input id="user" type="text">

<textarea>درون‌خطیجعبه متن چندخطی

صفت‌ها: rows (تعداد خطوط)، cols (عرض)، wrap (soft/hard)، maxlength، placeholder، required، readonly. مقدار اولیه بین تگ باز و بسته نوشته می‌شود، نه در صفت value.

textarea

<textarea rows="4" cols="40">متن پیش‌فرض</textarea>

<select> <option> <optgroup>درون‌خطیمنوی کشویی (Dropdown)

select منو را می‌سازد، option هر گزینه و optgroup گزینه‌ها را دسته‌بندی می‌کند. صفت multiple روی select چند انتخابی می‌کند، size تعداد گزینه‌های نمایشی، و selected روی option گزینهٔ پیش‌فرض را تعیین می‌کند.

select

<select name="city">
  <optgroup label="شمال">
    <option value="rasht">رشت</option>
    <option value="sari" selected>ساری</option>
  </optgroup>
</select>

<button>درون‌خطیدکمه با محتوای دلخواه (متن، آیکون، HTML)

برخلاف input[type=button]، می‌تواند محتوای HTML داشته باشد. صفت type: submit (پیش‌فرض)، reset، button. صفت‌های formaction، formmethod، formtarget، formnovalidate رفتار ارسال را override می‌کنند.

button

<button type="submit">✓ ارسال</button>

<fieldset> <legend>بلوکیگروه‌بندی فیلدهای مرتبط با عنوان

fieldset چند فیلد را در یک کادر دور هم جمع می‌کند و legend عنوان آن گروه است. صفت disabled روی fieldset همه فیلدهای داخلش را غیرفعال می‌کند.

<datalist>متادیتالیست پیشنهادهای خودکار برای input

با صفت list روی input به آن متصل می‌شود و پیشنهادهای تکمیل خودکار می‌دهد (کاربر می‌تواند مقدار دیگری هم تایپ کند).

datalist

<input list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
</datalist>

<output>درون‌خطینمایش نتیجه یک محاسبه

برای نمایش خروجی محاسبات (مثلاً نتیجهٔ یک اسلایدر یا جمع). صفت for فیلدهای ورودی مرتبط را مشخص می‌کند.

<progress>درون‌خطینوار پیشرفت (Progress Bar)

صفت‌های value (مقدار فعلی) و max (حداکثر). اگر value نباشد، حالت نامعین (در حال بارگذاری) نشان می‌دهد.

<meter>درون‌خطیسنجه برای مقدار در یک بازه (مثل میزان دیسک)

صفت‌ها: value، min، max، low، high، optimum. برخلاف progress، برای اندازه‌گیری ثابت است نه پیشرفت.

۱۳

عناصر تعاملی (Interactive)

آکاردئون، پنجره و عناصر باز/بسته‌شونده بدون جاوااسکریپت

<details> <summary>بلوکیبخش باز/بسته‌شونده (آکاردئون) بدون JS

یکی از زیباترین قابلیت‌های HTML مدرن! summary عنوان قابل کلیک است و بقیه محتوای داخل details با کلیک باز/بسته می‌شود. صفت open آن را پیش‌فرض باز نگه می‌دارد.

details

<details open>
  <summary>بیشتر بخوانید</summary>
  <p>محتوای پنهان که با کلیک نمایان می‌شود.</p>
</details>

<dialog>بلوکیپنجره گفت‌وگو (Modal / Popup) بومی

پنجرهٔ مودال بومی مرورگر! با متد جاوااسکریپتی showModal() باز و با close() بسته می‌شود. صفت open آن را نمایان می‌کند. مزیت بزرگ: مدیریت تمرکز و بک‌دراپ به‌صورت خودکار.

dialog

<dialog id="m">
  <p>سلام!</p>
  <button onclick="m.close()">بستن</button>
</dialog>

۱۴

اسکریپت‌نویسی و قالب (Scripting)

جاوااسکریپت، نقاشی پویا و قالب‌های قابل‌استفاده مجدد

صفت	کاربرد
src	آدرس فایل جاوااسکریپت خارجی
type	نوع: text/javascript (پیش‌فرض) یا module (برای ES Modules)
async	دانلود موازی و اجرا به‌محض آماده شدن
defer	اجرا پس از کامل شدن تجزیه HTML (به ترتیب)
crossorigin	تنظیمات CORS برای منبع خارجی
integrity	هش امنیتی (Subresource Integrity)
nomodule	فقط برای مرورگرهای قدیمی که module را نمی‌فهمند

script

<script src="app.js" defer></script>
<script>console.log("سلام دنیا");</script>

اگر مرورگر JS را اجرا نکند یا کاربر آن را خاموش کرده باشد، محتوای داخل noscript نمایش داده می‌شود.

<canvas>درون‌خطیبوم نقاشی برای گرافیک پویا با جاوااسکریپت

سطحی برای رسم بازی، نمودار، انیمیشن و پردازش تصویر. با getContext('2d') یا WebGL کنترل می‌شود. صفت‌های width و height ابعاد بوم را تعیین می‌کنند.

canvas

<canvas id="c" width="300" height="150"></canvas>

<template>متادیتاقالب پنهان برای کلون شدن با جاوااسکریپت

محتوای داخل template رندر نمی‌شود تا زمانی که با JS کلون و به DOM اضافه شود. پایهٔ Web Components است.

<slot>درون‌خطیجایگاه محتوا در Web Components (Shadow DOM)

محل جایگذاری محتوای دلخواه داخل کامپوننت‌های سفارشی. صفت name اسلات‌های نام‌دار می‌سازد.

۱۵

گرافیک برداری (SVG) و ریاضی (MathML)

رسم اشکال مقیاس‌پذیر و فرمول‌های ریاضی مستقیم در HTML

💡 SVG چیست؟

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

صفت‌های مهم: width، height، viewBox (سیستم مختصات داخلی)، xmlns. تگ‌های فرزند: rect, circle, ellipse, line, polyline, polygon, path, text, g (گروه)، defs، linearGradient و...

svg

<svg viewBox="0 0 100 100" width="120">
  <circle cx="50" cy="50" r="40" fill="#00e5ff"></circle>
  <rect x="10" y="10" width="30" height="30"></rect>
</svg>

تگ‌های اصلی SVGمجموعهٔ کامل اشکال و عناصر

تگ	کاربرد
<rect>	مستطیل (x, y, width, height, rx)
<circle>	دایره (cx, cy, r)
<ellipse>	بیضی (cx, cy, rx, ry)
<line>	خط (x1, y1, x2, y2)
<polyline>	چند خط متصل
<polygon>	چندضلعی بسته
<path>	مسیر آزاد (قدرتمندترین — با دستورات M, L, C, Z)
<text>	متن برداری
<g>	گروه‌بندی عناصر
<defs>	تعاریف قابل استفاده مجدد
<linearGradient> / <radialGradient>	گرادیان‌ها
<use>	استفاده مجدد از عنصر تعریف‌شده
<animate>	انیمیشن SMIL

<math> (MathML)درون‌خطینمایش فرمول‌های ریاضی

زبان نشانه‌گذاری ریاضی. تگ‌های اصلی: mrow (ردیف)، mi (شناسه)، mn (عدد)، mo (عملگر)، msup (توان)، msub (زیرنویس)، mfrac (کسر)، msqrt (جذر)، mroot (ریشه n-ام).

MathML

<math>
  <msup><mi>x</mi><mn>2</mn></msup>
</math>

۱۶

صفت‌های سراسری (Global Attributes)

صفت‌هایی که روی هر تگ HTML کار می‌کنند

💡 سراسری یعنی چه؟

این صفت‌ها مخصوص یک تگ نیستند — روی تمام عناصر HTML قابل استفاده‌اند. شناختشان سوپرپاور توست!

صفت‌های هویتی و استایلشناسایی و ظاهر عناصر

صفت	کاربرد
id	شناسه یکتا در صفحه (برای CSS، JS، لینک لنگری)
class	یک یا چند نام کلاس (با فاصله) برای گروه‌بندی استایل
style	استایل CSS درون‌خطی (inline)
title	متن راهنمای شناور (tooltip)
hidden	پنهان کردن کامل عنصر (hidden یا hidden="until-found")

صفت‌های زبان و جهتبومی‌سازی و دسترسی‌پذیری

صفت	کاربرد
lang	زبان محتوا (fa، en، ar...)
dir	جهت متن: rtl (راست‌به‌چپ)، ltr، auto
translate	yes / no — آیا ترجمه خودکار شود

صفت‌های تعاملی و ویرایشقابلیت‌های تعاملی روی هر عنصر

صفت	کاربرد
contenteditable	true / false — قابل ویرایش کردن محتوا توسط کاربر
draggable	true / false — قابل کشیدن (Drag & Drop)
spellcheck	true / false — بررسی املا
tabindex	ترتیب حرکت با کلید Tab (0، مثبت یا -1)
accesskey	میانبر صفحه‌کلید
autocapitalize	بزرگ‌نویسی خودکار (none، sentences، words، characters)
inputmode	نوع کیبورد مجازی (numeric، tel، email، url، decimal)
enterkeyhint	برچسب کلید Enter موبایل (search، send، go، done)

data-* (صفت‌های داده سفارشی)ویژهذخیره داده‌های دلخواه روی عناصر

یکی از قدرتمندترین قابلیت‌ها! هر صفتی که با data- شروع شود معتبر است و با JS از طریق element.dataset خوانده می‌شود.

data-*

<div data-user-id="42" data-role="admin"></div>
// JS: el.dataset.userId → "42"

صفت‌های دسترسی‌پذیری (ARIA) و سایرپل ارتباطی با فناوری‌های کمکی

صفت	کاربرد
role	نقش معنایی عنصر برای screen reader
aria-*	خانوادهٔ صفت‌های ARIA (aria-label, aria-hidden, aria-expanded...)
part	نام بخش برای استایل‌دهی از بیرون Shadow DOM
slot	اختصاص عنصر به یک اسلات نام‌دار
itemprop / itemscope / itemtype	Microdata برای داده‌های ساختاریافته (SEO)
nonce	توکن امنیتی CSP
is	ساخت عنصر سفارشی داخلی

۱۷

صفت‌های رویداد (Event Attributes)

واکنش به کلیک، تایپ، حرکت موس و... مستقیم در HTML

⚠️ نکتهٔ حرفه‌ای

اگرچه می‌توانی رویدادها را مستقیم در HTML بنویسی (onclick="...")، روش حرفه‌ای استفاده از addEventListener در جاوااسکریپت است (جدا کردن منطق از ساختار).

رویدادهای موسواکنش به اشاره‌گر

رویداد	زمان فعال شدن
onclick	کلیک تک
ondblclick	دابل‌کلیک
onmousedown / onmouseup	فشردن / رها کردن دکمه موس
onmouseover / onmouseout	ورود / خروج موس از عنصر
onmousemove	حرکت موس روی عنصر
onmouseenter / onmouseleave	ورود/خروج (بدون bubbling)
oncontextmenu	کلیک راست
onwheel	چرخش اسکرول موس

رویدادهای صفحه‌کلید و فرمواکنش به تایپ و ورودی

رویداد	زمان فعال شدن
onkeydown / onkeyup	فشردن / رها کردن کلید
onkeypress	فشردن کلید (منسوخ)
oninput	تغییر مقدار ورودی (لحظه‌ای)
onchange	تغییر مقدار پس از خروج از فیلد
onfocus / onblur	گرفتن / از دست دادن تمرکز
onsubmit	ارسال فرم
onreset	بازنشانی فرم
onselect	انتخاب متن در فیلد

رویدادهای پنجره، رسانه و کشیدنبارگذاری، پخش و Drag & Drop

رویداد	زمان فعال شدن
onload / onunload	بارگذاری / ترک صفحه
onresize	تغییر اندازه پنجره
onscroll	اسکرول صفحه
onerror	خطا در بارگذاری منبع
onplay / onpause / onended	پخش / مکث / پایان رسانه
ontimeupdate	تغییر زمان پخش
ondragstart / ondrag / ondragend	شروع / حین / پایان کشیدن
ondrop / ondragover	رها کردن / عبور هنگام کشیدن
oncopy / oncut / onpaste	کپی / برش / چسباندن

نمونه رویداد

<button onclick="alert('کلیک شد!')">بزن</button>

۱۸

موجودیت‌های HTML (Entities)

نمایش کاراکترهای ویژه و رزرو‌شده

💡 چرا entity لازم است؟

کاراکترهایی مثل < و > در HTML معنای ساختاری دارند. برای نمایش خودِ این کاراکترها باید از کد جایگزین (entity) استفاده کنی. هر entity با & شروع و با ; تمام می‌شود.

موجودیت‌های ضروریکاراکترهای رزرو‌شده HTML

کد	نتیجه	نام
<	<	کوچک‌تر از
>	>	بزرگ‌تر از
&	&	اَمپرسند
"	"	گیومه دوتایی
'	'	گیومه تکی
	(فاصله)	فاصلهٔ غیرشکننده

نمادها و علائم پرکاربردحق کپی، ارز، ریاضی و جهت

کد	نتیجه	توضیح
©	©	کپی‌رایت
®	®	علامت ثبت‌شده
™	™	تجاری
€	€	یورو
£	£	پوند
¢	¢	سنت
°	°	درجه
±	±	به‌علاوه/منها
×	×	ضرب
÷	÷	تقسیم
½	½	یک‌دوم
…	…	سه‌نقطه
—	—	خط تیره بلند
→ ←	→ ←	فلش راست/چپ
&hearts;	♥	قلب

🎯 نکته

می‌توانی از کد عددی هم استفاده کنی: © (دهدهی) یا © (هگزادسیمال) هر دو © می‌سازند. این روش برای هر کاراکتر یونیکدی کار می‌کند.

💀

تگ‌های منقضی‌شده (Deprecated)

تگ‌هایی که هنوز کار می‌کنند اما نباید استفاده شوند

☠️ هشدار مهم

این تگ‌ها هنوز در اکثر مرورگرها کار می‌کنند، اما از استاندارد حذف شده‌اند. وظیفهٔ آن‌ها (اغلب استایل‌دهی) حالا بر عهدهٔ CSS است. آن‌ها را فقط برای شناخت کد قدیمی بدان — هرگز در پروژهٔ جدید استفاده نکن!

<center>منقضیوسط‌چین کردن محتوا

جایگزین مدرن: CSS text-align: center یا margin: auto.

<font>منقضیتعیین فونت، رنگ و اندازه متن

صفت‌های قدیمی: face، size، color. جایگزین: CSS font-family، font-size، color.

<big>منقضیبزرگ‌تر کردن متن

جایگزین: CSS font-size.

<strike>منقضیخط روی متن

جایگزین معنایی: <s> یا <del>، یا CSS text-decoration: line-through.

<tt>منقضیمتن تله‌تایپ (مونواسپیس)

جایگزین: <code> یا <kbd> یا CSS font-family: monospace.

<marquee>منقضیمتن متحرک کشویی (نوستالژی دهه ۹۰!)

متن را به‌صورت خودکار حرکت می‌داد. صفت‌ها: direction، behavior، scrollamount. جایگزین: انیمیشن CSS (@keyframes + transform).

<blink>منقضیمتن چشمک‌زن

متن را چشمک‌زن می‌کرد. به‌خاطر آزاردهنده بودن و مشکلات دسترسی‌پذیری کاملاً کنار گذاشته شد.

سایر صفت‌های منقضیمنقضیصفت‌های استایلی روی تگ‌های معمولی

صفت قدیمی	جایگزین CSS
bgcolor	background-color
align	text-align / float
border (روی img/table)	border
width / height (به‌جز روی img, canvas, video)	width / height در CSS
cellpadding / cellspacing	padding / border-spacing
valign	vertical-align
nowrap	white-space: nowrap

🪦

تگ‌های کاملاً حذف‌شده (Obsolete)

تگ‌هایی که از HTML5 به‌کلی حذف شدند و دیگر پشتیبانی نمی‌شوند

🪦 آرامگاه HTML

این تگ‌ها در گذشته بخشی از وب بودند اما کاملاً منسوخ و از استاندارد حذف شدند. مرورگرهای مدرن یا آن‌ها را نادیده می‌گیرند یا به‌عنوان متن ساده رفتار می‌کنند. این بخش صرفاً تاریخی و آموزشی است.

<acronym>حذف‌شدهسرنام (مخفف خوانده‌شونده)

جایگزین: <abbr> برای همهٔ مخفف‌ها.

<applet>حذف‌شدهجاسازی اپلت جاوا

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

<basefont>حذف‌شدهفونت پیش‌فرض کل صفحه

جایگزین: CSS روی body یا html.

<dir>حذف‌شدهلیست دایرکتوری

جایگزین: <ul>.

<frame> <frameset> <noframes>حذف‌شدهسیستم قاب‌بندی قدیمی صفحه

صفحه را به چند قاب مستقل تقسیم می‌کرد. به‌خاطر مشکلات دسترسی‌پذیری، SEO و کاربری حذف شد. جایگزین: <iframe> برای جاسازی و CSS برای چیدمان.

<isindex>حذف‌شدهفیلد جستجوی تک‌خطی قدیمی

جایگزین: <input type="search"> داخل فرم.

<listing> <xmp> <plaintext>حذف‌شدهنمایش متن خام/کد

برای نمایش متن بدون تفسیر تگ‌ها بودند. جایگزین: <pre> + <code> با escape کردن entityها.

<nextid> <nobr> <spacer> <multicol>حذف‌شدهتگ‌های آزمایشی نتسکیپ/قدیمی

تگ	کار قدیمی → جایگزین
<nobr>	جلوگیری از شکستن خط → CSS white-space: nowrap
<spacer>	ایجاد فاصله → CSS margin/padding
<multicol>	چندستونی → CSS columns
<nextid>	تولید id خودکار → دیگر استفاده نمی‌شود
<bgsound>	صدای پس‌زمینه → <audio>
<blink>	چشمک → CSS animation
<keygen>	تولید کلید رمزنگاری → API های مدرن وب
<menuitem>	آیتم منوی زمینه → حذف شد
<rb> <rtc>	اجزای ruby قدیمی → rt کافی است
<hgroup> (نسخه قدیم)	تعریفش تغییر کرد ولی هنوز هست

🎨

قدم بعدی: CSS

به اسکلت HTML‌ات لباس، رنگ و حرکت بده

💡 CSS چیست؟

HTML ساختار است (استخوان)، CSS ظاهر (پوست و لباس). با CSS رنگ، فونت، فاصله، چیدمان و انیمیشن می‌سازی. همین سندی که می‌بینی، تمام زیبایی‌اش از CSS است!

یک نگاه به CSSانتخابگر، خصوصیت، مقدار

CSS

.card {
  background: #0a0e27;
  color: #00e5ff;
  padding: 20px;
  border-radius: 16px;
  transition: transform 0.3s;
}
.card:hover { transform: scale(1.05); }

مفاهیم کلیدی بعدی: Flexbox، Grid، Media Queries (ریسپانسیو)، انیمیشن و متغیرهای CSS.

⚡

قدم بعدی: JavaScript

به صفحه‌ات مغز و رفتار بده

💡 JS چیست؟

زبان برنامه‌نویسی وب. با آن صفحه را تعاملی می‌کنی: واکنش به کلیک، تغییر محتوا بدون رفرش، دریافت داده از سرور، انیمیشن و بازی. همان جستجو و ذرات متحرک این سند، کار JavaScript است.

یک نگاه به JSتعامل با DOM

JavaScript

const btn = document.querySelector('#myBtn');
btn.addEventListener('click', () => {
  alert('سلام از طرف صدرا حاتمی!');
});

مفاهیم بعدی: متغیرها، توابع، حلقه‌ها، DOM، fetch API، async/await و فریم‌ورک‌ها (React، Vue).

🗄️

قدم بعدی: Backend

سمت سرور — جایی که داده‌ها زندگی می‌کنند

💡 Backend چیست؟

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

دنیای سرورزبان‌ها و پایگاه‌داده

زبان‌های محبوب: Node.js (JavaScript)، Python، PHP، Go. پایگاه‌داده‌ها: PostgreSQL، MySQL، MongoDB. مفاهیم: API، REST، احراز هویت و امنیت.

🚀

مقصد نهایی: Full-Stack

وقتی همهٔ قطعات کنار هم می‌نشینند

🎯 مسیر تو

برنامه‌نویس Full-Stack هم فرانت (HTML/CSS/JS) و هم بک (سرور/دیتابیس) را بلد است. مسیر پیشنهادی: HTML → CSS → JavaScript → یک فریم‌ورک فرانت → یک زبان بک‌اند → دیتابیس → دیپلوی. تو همین حالا قدم اول و مهم‌ترین قدم را برداشتی!

پایان سفر، شروع راه تو ✨

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

با عشق، از طرف صدرا حاتمی | Sadra Hatami