عناصر، تگ‌ها و ویژگی‌ها

تگ (Tag) چیست؟

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

انواع تگ‌ها

۱. تگ‌های جفتی (Container Tags)

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

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

محتوایی که بین تگ باز و بسته قرار می‌گیرد، توسط آن تگ تحت تأثیر قرار می‌گیرد.

۲. تگ‌های تهی (Void / Self-closing Tags)

برخی تگ‌ها محتوا ندارند و نیازی به تگ بسته ندارند:

تگ	کاربرد
<br>	شکست خط
<hr>	خط افقی
<img>	تصویر
<input>	فیلد ورودی
<meta>	متادیتا
<link>	اتصال به فایل خارجی

عنصر (Element) چیست؟

بسیاری از افراد «تگ» و «عنصر» را یکی می‌دانند، اما تفاوت دارند:

• تگ: خود علامت‌ها — مثل <p> یا

• عنصر: کل مجموعه — تگ باز + محتوا + تگ بسته — مثل <p>متن</p>

عناصر می‌توانند داخل هم قرار بگیرند (تودرتو یا Nested):

<p>این متن <strong>ضخیم</strong> است.</p>

تودرتو بودن صحیح (Nesting)

تگ‌ها باید به‌درستی داخل هم بسته شوند — مثل پرانتزها. ترتیب بسته شدن باید برعکس ترتیب باز شدن باشد:

✅ درست: <p><strong>متن</strong></p>

❌ غلط: <p><strong>متن</p></strong>

ویژگی‌ها (Attributes)

ویژگی‌ها اطلاعات اضافی به تگ‌ها اضافه می‌کنند و همیشه در تگ باز قرار می‌گیرند:

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

ساختار ویژگی: نام="مقدار"

قوانین ویژگی‌ها

• بین نام ویژگی و علامت مساوی فاصله نباشد
• مقدار داخل کوتیشن (") یا سینگل‌کوتیشن (') قرار گیرد
• چند ویژگی با فاصله از هم جدا می‌شوند
• برخی ویژگی‌ها مقدار ندارند (Boolean) مثل disabled

ویژگی‌های پرکاربرد سراسری (Global Attributes)

این ویژگی‌ها روی تقریباً همه تگ‌ها قابل استفاده هستند:

ویژگی	کاربرد
id	شناسه یکتا عنصر
class	کلاس برای استایل‌دهی (قابل تکرار)
style	استایل inline
title	توضیح (نمایش به‌صورت tooltip)
lang	زبان محتوا
dir	جهت متن (rtl یا ltr)
data-*	ذخیره داده سفارشی

نکات مهم

• همیشه تگ‌های جفتی را ببندید — فراموش کردن تگ بسته باعث مشکلات نمایش می‌شود
• تگ‌ها را به‌درستی تودرتو کنید
• از نام‌های معنادار برای id و class استفاده کنید
• ویژگی‌ها را با حروف کوچک بنویسید