قسمت ۴ – تگ، المان و اتریبیوت در HTML

اتریبیوت در html اطلاعات اضافه‌ای است که داخل تگ شروع یک المان نوشته می‌شود و رفتار یا معنای آن را تغییر می‌دهد؛ مثل href که مقصد لینک را مشخص می‌کند یا alt که متن جایگزین تصویر است. هر اتریبیوت معمولاً یک نام و یک مقدار دارد: name="value".

نویسنده: تیم siloow (سیلو سولوشن) — آخرین به‌روزرسانی: آبان ۱۴۰۵

در این قسمت سه مفهوم پایه‌ای را که همه کدهای HTML روی آن ساخته می‌شوند دقیق یاد می‌گیرید: تگ چیست، المان چه تفاوتی با تگ دارد و اتریبیوت‌ها (از جمله اتریبیوت‌های سراسری، بولی و data-*) چطور کار می‌کنند. در پایان کامنت‌نویسی در HTML را هم یاد می‌گیرید. اگر قالب فارسی قسمت قبل را آماده ندارید، اول قسمت ۳ – ساختار صفحه HTML را مرور کنید.

تگ در HTML چیست؟

تگ در html یک کلمه کلیدی داخل علامت‌های کوچک‌تر و بزرگ‌تر است که شروع یا پایان یک بخش از محتوا را مشخص می‌کند؛ مثلاً <p> تگ شروع پاراگراف و </p> تگ پایان آن است. تگ پایان همیشه یک اسلش (/) قبل از نام دارد.

<p class="intro">به کافه نارنج خوش آمدید.</p>

در این خط سه بخش داریم:

• تگ شروع: <p class="intro"> که نام المان و اتریبیوت‌ها را دارد.
• محتوا: متن «به کافه نارنج خوش آمدید.»
• تگ پایان: </p> که هیچ اتریبیوتی نمی‌گیرد.

نام تگ‌ها در HTML به حروف کوچک و بزرگ حساس نیست (<P> و <p> یکسان‌اند)، اما قرارداد همه تیم‌های حرفه‌ای و همه مثال‌های این دوره نوشتن با حروف کوچک است.

تفاوت تگ و المان چیست؟

تگ فقط «علامت» شروع یا پایان است، اما المان کل مجموعه است: تگ شروع، محتوا و تگ پایان با هم. وقتی می‌گوییم «المان p»، منظور کل پاراگراف است؛ وقتی می‌گوییم «تگ پایان p»، فقط </p> را در نظر داریم.

در گفت‌وگوی روزمره بسیاری از برنامه‌نویس‌ها این دو را به جای هم به کار می‌برند و اشکالی هم ندارد، اما درک تفاوت تگ و المان کمک می‌کند مستندات MDN و پیام‌های خطا را دقیق‌تر بفهمید. یک نکته مهم: المان در درخت DOM وجود دارد حتی اگر تگ آن را ننوشته باشید؛ همان‌طور که در قسمت قبل دیدید مرورگر <head> و <body> را در صورت نبود، خودش می‌سازد.

مفهوم	تعریف	مثال
تگ (Tag)	نشانه شروع یا پایان در کد منبع	<h1> یا </h1>
المان (Element)	تگ شروع + محتوا + تگ پایان؛ یک گره در DOM	<h1>منو</h1>
اتریبیوت (Attribute)	اطلاعات اضافه داخل تگ شروع	lang="fa"
محتوا (Content)	متن یا المان‌های داخل المان	«منو»
المان خالی (Void)	المانی که محتوا و تگ پایان ندارد	<br>، <img>

المان‌های خالی (Void Elements) کدام‌اند؟

بعضی المان‌ها نمی‌توانند محتوا داشته باشند و تگ پایان هم ندارند. در HTML امروزی این المان‌ها عبارت‌اند از: area، base، br، col، embed، hr، img، input، link، meta، source، track و wbr.

<!-- المان‌های معمولی: تگ شروع + محتوا + تگ پایان -->
<h1>منوی امروز</h1>
<p>قهوه دمی با شیر بادام</p>

<!-- المان‌های خالی (void): فقط تگ شروع، بدون محتوا و تگ پایان -->
<br>
<hr>
<img src="cake.jpg" alt="کیک هویج با روکش خامه‌ای">
<meta charset="UTF-8">

شاید در کدهای قدیمی یا خروجی فرمت‌کننده‌ها شکل <br /> را دیده باشید. این اسلش انتهایی میراث XHTML است و در HTML نادیده گرفته می‌شود؛ نوشتنش خطا نیست، ولی لازم هم نیست. مراقب باشید: روی المان‌های غیرخالی مثل <div /> اسلش هیچ اثری ندارد و المان همچنان باز می‌ماند. نوشتن تگ پایان برای المان خالی (</br> یا </input>) هم نامعتبر است.

تودرتو کردن (Nesting) المان‌ها

المان‌ها می‌توانند داخل هم قرار بگیرند، به شرطی که آخرین تگی که باز شده، اول بسته شود؛ درست مثل جعبه‌هایی که داخل هم می‌گذارید:

<!-- درست: تگ‌ها به ترتیب عکس بسته می‌شوند -->
<p>این محصول <strong>فقط امروز</strong> تخفیف دارد.</p>

<!-- غلط: تگ‌ها روی هم افتاده‌اند (overlap) -->
<p>این محصول <strong>فقط امروز</p></strong>

مرورگرها کد غلط را هم به نوعی نمایش می‌دهند، اما نتیجه همیشه قابل پیش‌بینی نیست و در CSS و جاوااسکریپت دردسر می‌سازد. تورفتگی منظم در VS Code (کلید Shift+Alt+F) این خطاها را سریع نشان می‌دهد.

اتریبیوت در HTML چطور نوشته می‌شود؟

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

<!-- اتریبیوت با مقدار -->
<a href="https://siloow.com/codepress/" title="فهرست قسمت‌های دوره">کدپرس</a>

<!-- چند اتریبیوت روی یک المان -->
<img src="logo.svg" alt="لوگوی کافه نارنج" width="120" height="40">

<!-- اتریبیوت بولی: حضورش یعنی true -->
<input type="checkbox" checked>
<button disabled>ارسال</button>

قواعد نوشتن اتریبیوت‌ها:

1. مقدار را همیشه داخل کوتیشن دوتایی (") بنویسید. استاندارد، کوتیشن تکی و حتی بدون کوتیشن را هم (برای مقدارهای بدون فاصله) می‌پذیرد، اما کوتیشن دوتایی کمترین خطا را دارد.
2. بین نام، علامت مساوی و مقدار فاصله نگذارید: class="card" نه class = "card" (معتبر است ولی ناخوانا).
3. یک اتریبیوت را دو بار روی یک المان ننویسید؛ مرورگر فقط اولی را در نظر می‌گیرد.
4. نام اتریبیوت‌ها را با حروف کوچک بنویسید.
5. اگر مقدار شامل کوتیشن دوتایی است، از " یا کوتیشن تکی برای دور مقدار استفاده کنید.

اتریبیوت‌های بولی (Boolean) چطور کار می‌کنند؟

اتریبیوت بولی فقط دو حالت دارد: اگر روی المان باشد «فعال» است و اگر نباشد «غیرفعال». مقدار آن اهمیتی ندارد؛ پس required="false" هم فیلد را اجباری می‌کند! برای غیرفعال کردن، خود اتریبیوت را حذف کنید.

<!-- هر سه یکسان‌اند؛ حضور اتریبیوت یعنی فعال -->
<input type="email" required>
<input type="email" required="">
<input type="email" required="required">

<!-- اشتباه رایج: این هم required است! -->
<input type="email" required="false">

نمونه‌های رایج اتریبیوت بولی: required، disabled، checked، readonly، hidden، autofocus، multiple، open. توجه کنید که بعضی اتریبیوت‌ها شبیه بولی‌اند اما مقدار متنی می‌گیرند؛ مثلاً contenteditable و spellcheck باید "true" یا "false" داشته باشند و translate مقدار "yes" یا "no" می‌گیرد.

نکته: هر جا در مستندات خواندید «boolean attribute»، یعنی فقط حضور یا نبودِ اتریبیوت مهم است. اشتباه نوشتن disabled="false" یکی از رایج‌ترین باگ‌های فرم‌هاست که در بازبینی کد پروژه‌ها بارها با آن روبه‌رو شده‌ایم.

اتریبیوت‌های سراسری HTML کدام‌اند؟

اتریبیوت‌های سراسری (Global Attributes) اتریبیوت‌هایی هستند که روی همه المان‌های HTML قابل استفاده‌اند؛ برخلاف اتریبیوت‌های اختصاصی مثل href که فقط برای المان‌هایی مثل a و link معنی دارند. مهم‌ترین آن‌ها را در جدول زیر می‌بینید:

اتریبیوت	کاربرد	مثال
id	شناسه یکتا در کل صفحه؛ برای لینک داخلی، CSS و جاوااسکریپت	id="menu"
class	یک یا چند نام کلاس (با فاصله) برای گروه‌بندی و استایل‌دهی	class="card active"
lang	زبان محتوای المان	lang="en"
dir	جهت متن: rtl، ltr یا auto	dir="ltr"
title	توضیح تکمیلی که هنگام نگه داشتن ماوس نمایش داده می‌شود	title="ساعت کاری"
style	CSS درون‌خطی؛ فقط برای موارد استثنایی	style="color: red"
hidden	پنهان کردن المان (مقدار until-found هم دارد)	hidden
data-*	ذخیره داده سفارشی برای جاوااسکریپت و CSS	data-price="85000"
tabindex	کنترل فوکوس با کلید Tab (در قسمت ۲۲)	tabindex="0"
translate	اجازه یا منع ترجمه خودکار	translate="no"
contenteditable	قابل ویرایش کردن محتوای المان در مرورگر	contenteditable="true"
inert	غیرفعال کردن تعامل و فوکوس کل یک بخش	inert
popover	تبدیل المان به پنجره بازشو (در قسمت ۲۰)	popover

فهرست کامل را می‌توانید در صفحه Global attributes در MDN ببینید. نمونه زیر چند اتریبیوت سراسری را روی یک المان نشان می‌دهد:

<section id="menu" class="card card--featured" lang="fa" dir="rtl"
         title="منوی ویژه" data-branch="vanak" hidden>
  <h2>منوی ویژه شعبه ونک</h2>
</section>

تفاوت id و class

مقدار id باید در کل صفحه یکتا باشد و فاصله نداشته باشد؛ هر المان حداکثر یک id دارد. class برعکس، می‌تواند روی ده‌ها المان تکرار شود و هر المان می‌تواند چند کلاس (جداشده با فاصله) داشته باشد. قاعده ساده: id برای «این یک مورد خاص» و class برای «این نوع از موارد». استفاده از این دو در CSS را در قسمت ۲۴ و کاربرد id در لینک به بخش‌های صفحه را در قسمت ۸ یاد می‌گیرید.

اتریبیوت‌های data-* برای داده سفارشی

اگر به اتریبیوتی نیاز دارید که در استاندارد نیست، اسم دلخواه نسازید (مثلاً price="…" نامعتبر است). به‌جای آن از پیشوند data- استفاده کنید؛ نام بعد از پیشوند باید با حروف کوچک انگلیسی باشد:

<ul>
  <li data-price="85000" data-stock="12">قهوه دمی</li>
  <li data-price="120000" data-stock="0">کیک شکلاتی</li>
</ul>

در جاوااسکریپت این مقدارها از طریق element.dataset.price در دسترس‌اند. ما در قالب‌های وردپرسی و وب‌اپلیکیشن‌هایی مثل سیستم سفارش آنلاین چندشعبه‌ای، شناسه محصول و شعبه را دقیقاً با همین روش در HTML نگه می‌داریم تا اسکریپت‌ها بدون درخواست اضافه به آن دسترسی داشته باشند.

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

کامنت در html با <!-- شروع و با --> تمام می‌شود و مرورگر هر چیزی را که بین این دو باشد نمایش نمی‌دهد. از کامنت برای توضیح بخش‌های کد، یادداشت برای هم‌تیمی‌ها و غیرفعال کردن موقت کد استفاده می‌شود.

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

<!--
  کامنت چندخطی:
  بخش فوتر را بعد از تأیید طراح اضافه کنید.
-->

<!-- <p>این پاراگراف موقتاً غیرفعال شده است.</p> -->

• کامنت‌ها تودرتو نمی‌شوند؛ اولین --> کامنت را می‌بندد.
• کامنت در کد منبع صفحه (Ctrl+U) برای همه قابل مشاهده است؛ هرگز رمز، آدرس سرور یا اطلاعات محرمانه در آن ننویسید.
• میانبر Ctrl+/ در VS Code خط انتخاب‌شده را کامنت یا از کامنت خارج می‌کند.

یک مثال کامل: کارت محصول

در مثال زیر همه مفاهیم این قسمت کنار هم آمده‌اند: المان‌های تودرتو، المان خالی img، اتریبیوت‌های سراسری id، class، title، lang، dir و data-*، اتریبیوت بولی disabled و یک کامنت:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>کارت محصول</title>
</head>
<body>
  <!-- کارت محصول: نمونه کامل تگ، المان و اتریبیوت -->
  <article id="product-12" class="product" data-sku="NR-012">
    <h2 title="پرفروش‌ترین محصول هفته">کیک هویج</h2>
    <img src="carrot-cake.jpg" alt="برش کیک هویج با گردو" width="400" height="300">
    <p>قیمت: <strong>۱۲۰٬۰۰۰ تومان</strong></p>
    <p lang="en" dir="ltr">Carrot cake with walnuts</p>
    <button type="button" disabled>ناموجود</button>
  </article>
</body>
</html>

این کد را در فایل جدیدی ذخیره کنید، با Live Server اجرا کنید و با F12 المان‌ها و اتریبیوت‌ها را در زبانه Elements بررسی کنید. ظاهر فعلاً ساده است؛ در بخش CSS همین کارت را زیبا می‌کنیم. اگر کنجکاوید یک صفحه واقعی از چه اجزایی ساخته می‌شود، راهنمای مراحل طراحی سایت از ایده تا تحویل دید خوبی می‌دهد.

اشتباهات رایج در تگ‌ها و اتریبیوت‌ها

• فراموش کردن تگ پایان: مخصوصاً برای <a> و <strong> که باعث می‌شود بقیه صفحه لینک یا پررنگ شود.
• بستن تگ‌ها با ترتیب غلط: <b><i>…</b></i> نامعتبر است.
• تکرار id در صفحه: لینک‌های داخلی و جاوااسکریپت فقط اولی را پیدا می‌کنند.
• نوشتن disabled="false": اتریبیوت بولی با هر مقداری فعال است.
• ساختن اتریبیوت من‌درآوردی: به‌جای color="red" یا price="…" از CSS یا data-* استفاده کنید.
• کوتیشن‌های فارسی یا هوشمند: class=«card» یا class=”card” کار نمی‌کند؛ فقط " انگلیسی.
• نوشتن اطلاعات حساس در کامنت: کامنت‌ها برای همه قابل مشاهده‌اند.

تمرین این قسمت

1. در کد کارت محصول بالا، تگ شروع، تگ پایان، محتوا و اتریبیوت‌های هر المان را روی کاغذ مشخص کنید.
2. سه المان خالی را در یک صفحه به کار ببرید و بررسی کنید که هیچ‌کدام تگ پایان ندارند.
3. یک دکمه با disabled="false" بسازید و ببینید هنوز غیرفعال است؛ سپس با حذف اتریبیوت آن را فعال کنید.
4. به سه آیتم یک لیست، اتریبیوت‌های data-price و title بدهید و در DevTools آن‌ها را ببینید.
5. یک بخش از صفحه را با کامنت غیرفعال کنید و توضیح یک‌خطی بالای هر بخش بنویسید.

خلاصه

• تگ نشانه شروع یا پایان است؛ المان کل مجموعه تگ شروع، محتوا و تگ پایان است.
• المان‌های خالی مثل img، br و input تگ پایان ندارند و اسلش انتهایی در آن‌ها اختیاری و بی‌اثر است.
• اتریبیوت در HTML داخل تگ شروع و به شکل name="value" نوشته می‌شود.
• اتریبیوت بولی با حضورش فعال می‌شود، نه با مقدارش.
• اتریبیوت‌های سراسری مثل id، class، lang، dir و data-* روی همه المان‌ها کار می‌کنند.
• کامنت با <!-- --> نوشته می‌شود و برای همه قابل مشاهده است.

در قسمت بعد، «قسمت ۵ – تیترها و پاراگراف؛ تگ h1 تا h6 و p»، اولین المان‌های محتوایی را دقیق یاد می‌گیریم. قسمت‌های قبلی یعنی HTML چیست؟ و ساخت اولین صفحه HTML همیشه در دسترس‌اند و فهرست کامل دوره را در کدپرس پیدا می‌کنید.

منابع

• HTML Living Standard — استاندارد رسمی HTML (WHATWG)
• MDN Web Docs — مرجع عناصر HTML
• web.dev — دوره Learn HTML گوگل

سوالات متداول تگ، المان و اتریبیوت