در حال بارگذاری...

id در HTML

کلاس برچسب اشتراکی بود. id نام یک عنصر است — درِ یکتا برای بوکمارک، قلاب CSS یا هدف اسکریپت. دو عنصر با یک id ابزارها را گیج می‌کند.

نام یکتا چرا مهم است

لینک fragment و getElementById یک تطبیق فرض می‌کنند. id تکراری ممکن است در کلیک سریع «کار کند» و دسترسی‌پذیری را بشکند. مثل کلید اصلی صفحه رفتار کنید.

پاسخ مستقیم

id="faq" روی دقیقاً یک عنصر. لینک با href="#faq". در CSS #faq. همان id را دو بار نگذارید. id="#faq" ننویسید. برای استایل مشترک چند پاراگراف class را ترجیح دهید.

📊 id versus class

Feature	id	class
Uniqueness	One per page (ideally)	Many elements may share
HTML attribute	id="faq" (no #)	class="tip" (no .)
CSS selector	#faq	.tip
Common uses	Bookmarks, unique hooks, script targets	Reusable styles and groups

لینک fragment به heading یکتا

لینک بالا و heading پایین با id منطبق — کلیک اسکرول می‌کند.

Unique id and fragment link

html

HTML Code

<p><a href="#faq">Jump to FAQ</a></p>
<h2 id="faq">FAQ</h2>
<p>Answers go here.</p>

خواندن نمونهٔ fragment

href="#faq" به قطعهٔ faq
id="faq" روی یک heading
# فقط در لینک و CSS
غلط املایی پرش را می‌شکند

قلاب CSS یکتا با `#id`

گاهی یک پنل برجستهٔ یک‌باره لازم است — با احتیاط؛ بیشتر سیستم‌ها هنوز class می‌خواهند.

Unique id with CSS

html

HTML Code

<div id="promo">
<h2>Limited offer</h2>
<p>One panel, one unique hook.</p>
</div>
<style>
#promo { border: 2px solid #0a7; padding: 12px; }
</style>

خواندن نمونهٔ استایل یکتا

فقط این div promo است
#promo همان عنصر
# داخل attribute نگذارید
ترکیب class و id روی یک عنصر مجاز است

انتخاب id یا class

بیش از یک عنصر؟ → class. بوکمارک/اسکریپت یک گره؟ → id.

تمرین

heading با id یکتا
لینک href="#…" و پرش
تکرار id را حذف کنید
دو tip را با class مشترک استایل دهید
جمله دربارهٔ # در href/CSS در برابر نام لخت در attribute

اشتباهات آسان

دو عنصر با یک id
# داخل attribute
id برای هر استایل اشتراکی
فراموش # در href

خلاصه

id یکتا برای بوکمارک و قلاب
href و CSS با #؛ attribute بدون #
class برای ظاهر مشترک
بعدی: ساختار بزرگ‌تر صفحه

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود

زبان