ID و Class در HTML چیست؟ تفاوت و کاربرد id و class

در درس قبل با Attributeها در HTML آشنا شدیم و دیدیم که می‌توانیم با استفاده از آنها اطلاعات و ویژگی‌های بیشتری برای عناصر مشخص کنیم.

دو مورد از مهم‌ترین و پرکاربردترین Attributeهای عمومی HTML، ویژگی‌های id و class هستند.

اگر قصد دارید HTML را به‌صورت اصولی یاد بگیرید، درک ID و Class در HTML اهمیت زیادی دارد؛ زیرا در ادامه مسیر طراحی وب، CSS و JavaScript دائماً از این دو ویژگی برای شناسایی، انتخاب و کار با عناصر صفحه استفاده می‌کنند.

در این درس یاد می‌گیریم id و class چه هستند، چه تفاوتی با یکدیگر دارند، چه زمانی باید از هرکدام استفاده کنیم و چرا استفاده صحیح از آنها در ساختار صفحات وب اهمیت دارد.

ID و Class در HTML چیست؟

id و class هر دو از Attributeهای عمومی HTML هستند و می‌توانیم از آنها برای مشخص کردن هویت یا دسته‌بندی عناصر استفاده کنیم.

برای مثال:

<h1 id="page-title">
    آموزش HTML
</h1>

<p class="intro">
    به دوره آموزش HTML خوش آمدید.
</p>

در مثال بالا:

• عنصر h1 دارای ID با مقدار page-title است.
• عنصر p دارای Class با مقدار intro است.

در نگاه اول ممکن است این دو شبیه یکدیگر به نظر برسند، اما هدف و نحوه استفاده از آنها تفاوت‌های مهمی دارد.

ویژگی id در HTML چیست؟

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

مثال:

<section id="about">
    محتوای بخش درباره ما
</section>

در این مثال شناسه عنصر section برابر است با:

about

هدف اصلی ID این است که بتوانیم یک عنصر مشخص را در سند شناسایی کنیم.

مقدار ID باید در صفحه یکتا باشد

یکی از مهم‌ترین قوانین استفاده از id این است که مقدار آن باید در سند یکتا باشد.

یعنی اگر چنین عنصری داریم:

<section id="about">
    ...
</section>

نباید عنصر دیگری در همان سند نیز دارای همین ID باشد:

<section id="about">
    بخش اول
</section>

<div id="about">
    بخش دوم
</div>

این ساختار صحیح نیست، زیرا مقدار:

about

برای دو عنصر مختلف تکرار شده است.

هر مقدار ID باید بتواند یک عنصر مشخص را در همان صفحه شناسایی کند.

آیا یک عنصر می‌تواند چند ID داشته باشد؟

مقدار Attribute با نام id یک شناسه واحد است و مانند Class فهرستی از چند مقدار جداشده با فاصله نیست.

برای مثال:

<div id="main-content">
    ...
</div>

یک ID معتبر برای عنصر مشخص کرده‌ایم.

اما نباید تصور کنیم با قرار دادن فاصله می‌توانیم چند ID تعریف کنیم:

<div id="main content">
    ...
</div>

این ساختار به معنی داشتن دو ID به نام‌های main و content نیست.

مقدار ID نباید شامل فاصله ASCII باشد.

ویژگی class در HTML چیست؟

Attribute با نام class برای قرار دادن یک عنصر در یک یا چند کلاس استفاده می‌شود.

برای مثال:

<p class="intro">
    متن معرفی
</p>

در اینجا عنصر p عضو کلاسی با نام:

intro

است.

برخلاف ID، یک Class می‌تواند روی تعداد زیادی عنصر تکرار شود.

برای مثال:

<p class="note">
    نکته اول
</p>

<p class="note">
    نکته دوم
</p>

<div class="note">
    نکته سوم
</div>

هر سه عنصر می‌توانند Class یکسان note داشته باشند.

یک عنصر می‌تواند چند Class داشته باشد

یکی از ویژگی‌های مهم Attribute با نام class این است که می‌توانیم چند کلاس را هم‌زمان برای یک عنصر مشخص کنیم.

نام کلاس‌ها با فاصله از یکدیگر جدا می‌شوند.

مثال:

<div class="card featured large">
    محتوای کارت
</div>

این عنصر سه Class دارد:

• card
• featured
• large

هرکدام از این کلاس‌ها می‌توانند بعداً برای اهداف مختلف در CSS یا JavaScript استفاده شوند.

تفاوت ID و Class در HTML چیست؟

مهم‌ترین تفاوت را می‌توان به‌صورت ساده این‌گونه بیان کرد:

ID برای شناسایی یک عنصر مشخص و یکتا در سند استفاده می‌شود، اما Class برای دسته‌بندی یک یا چند عنصر کاربرد دارد.

مثلاً فرض کنید در صفحه فقط یک بخش محتوای اصلی داریم:

<main id="main-content">
    ...
</main>

اما چند کارت محصول داریم که ساختار مشابهی دارند:

<article class="product-card">
    محصول اول
</article>

<article class="product-card">
    محصول دوم
</article>

<article class="product-card">
    محصول سوم
</article>

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

مقایسه سریع ID و Class

ویژگی	ID	Class
هدف اصلی	شناسایی یک عنصر مشخص	دسته‌بندی عناصر
تکرار مقدار در یک سند	نباید تکرار شود	می‌تواند تکرار شود
چند مقدار برای یک عنصر	یک شناسه	یک یا چند کلاس
کاربرد در CSS	بله	بله
کاربرد در JavaScript	بله	بله
لینک به بخش خاص صفحه	بله	به‌صورت مستقیم خیر

چه زمانی از ID استفاده کنیم؟

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

برای مثال:

<section id="contact">
    ...
</section>

این شناسه می‌تواند بعداً برای موارد مختلف استفاده شود؛ از جمله:

• لینک دادن به همان بخش از صفحه
• انتخاب عنصر در JavaScript
• انتخاب عنصر در CSS در صورت نیاز
• برخی ارتباط‌های ساختاری میان عناصر HTML

چه زمانی از Class استفاده کنیم؟

Class زمانی مناسب است که بخواهیم یک یا چند عنصر را در یک گروه قرار دهیم.

مثلاً فرض کنید چند پیام هشدار در صفحه داریم:

<p class="warning">
    رمز عبور اشتباه است.
</p>

<p class="warning">
    اتصال اینترنت برقرار نیست.
</p>

هر دو پیام متعلق به گروه warning هستند.

در CSS می‌توانیم برای تمام عناصر این گروه یک ظاهر مشخص تعیین کنیم و در JavaScript نیز می‌توانیم همه آنها را انتخاب کنیم.

کاربرد ID در CSS

CSS می‌تواند یک عنصر را با استفاده از ID انتخاب کند.

برای مثال HTML:

<h1 id="page-title">
    آموزش HTML
</h1>

در CSS برای انتخاب این ID از علامت # استفاده می‌شود:

#page-title {
    font-size: 2rem;
}

علامت # در اینجا به CSS اعلام می‌کند که می‌خواهیم عنصری با ID مشخص را انتخاب کنیم.

فعلاً نیازی نیست قواعد CSS را حفظ کنید؛ هدف فقط این است که ارتباط ID با مراحل بعدی طراحی وب را مشاهده کنید.

کاربرد Class در CSS

برای انتخاب Class در CSS از نقطه . استفاده می‌شود.

HTML:

<p class="intro">
    متن معرفی
</p>

CSS:

.intro {
    font-size: 1.2rem;
}

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

تفاوت علامت ID و Class در CSS

این تفاوت ساده را از حالا به خاطر بسپارید:

#page-title

یعنی انتخاب ID با نام page-title.

اما:

.page-title

یعنی انتخاب Class با نام page-title.

بنابراین علامت‌های:

#

و:

.

در CSS معنای متفاوتی دارند.

آیا بهتر است برای استایل‌دهی همیشه از ID استفاده کنیم؟

خیر.

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

در بسیاری از پروژه‌ها Class انتخاب مناسب‌تری برای استایل‌دهی است، زیرا قابل استفاده مجدد است و ساختار CSS را انعطاف‌پذیرتر می‌کند.

برای مثال به جای:

<article id="product-one">...</article>
<article id="product-two">...</article>

اگر هر دو ظاهر مشترکی داشته باشند، می‌توانیم بنویسیم:

<article class="product-card">...</article>
<article class="product-card">...</article>

سپس یک قانون CSS برای تمام کارت‌ها ایجاد کنیم.

کاربرد ID در JavaScript

JavaScript نیز می‌تواند عنصر دارای ID مشخص را پیدا کند.

مثلاً HTML:

<button id="submit-button">
    ارسال
</button>

در JavaScript یکی از روش‌های دسترسی به آن استفاده از getElementById() است:

const button = document.getElementById("submit-button");

این متد به دنبال عنصری با ID مورد نظر می‌گردد.

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

کاربرد Class در JavaScript

JavaScript می‌تواند عناصر دارای یک Class را نیز پیدا کند.

HTML:

<p class="message">پیام اول</p>
<p class="message">پیام دوم</p>

یکی از روش‌ها:

const messages = document.getElementsByClassName("message");

در این حالت می‌توانیم به مجموعه عناصری که Class مورد نظر را دارند دسترسی پیدا کنیم.

لینک دادن به یک بخش صفحه با ID

یکی از کاربردهای بسیار مهم ID در HTML ایجاد لینک به بخش مشخصی از همان صفحه یا صفحه‌ای دیگر است.

فرض کنید بخشی با ID زیر داریم:

<section id="contact">
    <h2>ارتباط با ما</h2>
</section>

می‌توانیم لینکی ایجاد کنیم که مستقیماً به این بخش هدایت شود:

<a href="#contact">
    رفتن به بخش ارتباط با ما
</a>

علامت # همراه مقدار ID مشخص می‌کند مقصد لینک بخشی با همان شناسه در صفحه است.

لینک از صفحه دیگر به یک ID

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

برای مثال:

<a href="about.html#team">
    آشنایی با تیم ما
</a>

اگر در فایل about.html عنصری با ID زیر وجود داشته باشد:

<section id="team">
    ...
</section>

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

به این قسمت از URL معمولاً Fragment Identifier گفته می‌شود.

یک مثال کاربردی از فهرست مطالب با ID

ID برای ساخت فهرست مطالب داخل یک صفحه بسیار مفید است.

مثلاً:

<nav>
    <a href="#html">HTML</a>
    <a href="#css">CSS</a>
    <a href="#javascript">JavaScript</a>
</nav>

<section id="html">
    <h2>HTML</h2>
</section>

<section id="css">
    <h2>CSS</h2>
</section>

<section id="javascript">
    <h2>JavaScript</h2>
</section>

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

آیا Class باید در صفحه یکتا باشد؟

خیر.

اصلاً یکی از اهداف اصلی Class این است که بتوانیم چند عنصر را در یک گروه مشترک قرار دهیم.

برای مثال:

<article class="course-card">
    دوره HTML
</article>

<article class="course-card">
    دوره CSS
</article>

<article class="course-card">
    دوره JavaScript
</article>

تکرار Class با مقدار course-card در اینجا کاملاً منطقی است.

آیا دو عنصر می‌توانند ID یکسان داشته باشند؟

خیر. مقدار ID باید در سند یکتا باشد.

این ساختار نامناسب است:

<section id="services">
    ...
</section>

<section id="services">
    ...
</section>

بهتر است هر بخش ID مخصوص خودش را داشته باشد:

<section id="web-design">
    ...
</section>

<section id="seo">
    ...
</section>

آیا می‌توان ID و Class را هم‌زمان استفاده کرد؟

بله.

یک عنصر می‌تواند هم ID و هم Class داشته باشد.

مثال:

<section
    id="featured-course"
    class="course-card featured"
>
    دوره ویژه
</section>

این عنصر:

• یک ID با مقدار featured-course دارد.
• دارای Class با نام course-card است.
• دارای Class دیگری با نام featured نیز هست.

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

چگونه برای ID و Class نام مناسب انتخاب کنیم؟

انتخاب نام مناسب باعث می‌شود کدهای HTML، CSS و JavaScript خواناتر و قابل نگهداری‌تر باشند.

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

برای مثال:

main-navigation
product-card
course-title
site-footer
contact-form

این نام‌ها درباره نقش عنصر اطلاعات مناسبی می‌دهند.

نام‌هایی مانند نمونه‌های زیر معمولاً انتخاب‌های ضعیف‌تری هستند:

red-text
big-box
left-item

زیرا ممکن است ظاهر عنصر در آینده تغییر کند.

مثلاً عنصری که امروز قرمز است ممکن است بعداً آبی شود، اما نام red-text همچنان در کد باقی بماند و باعث سردرگمی شود.

بهتر است نام Class یا ID تا حد امکان براساس نقش و مفهوم عنصر انتخاب شود، نه صرفاً ظاهر فعلی آن.

آیا می‌توان از فاصله در نام ID استفاده کرد؟

خیر. مقدار ID نباید شامل فاصله باشد.

نمونه نامناسب:

<div id="main content">
    ...
</div>

بهتر است از یک نام بدون فاصله استفاده کنیم:

<div id="main-content">
    ...
</div>

فاصله در Class چه معنایی دارد؟

در Class، فاصله برای جدا کردن چند نام کلاس استفاده می‌شود.

مثلاً:

<div class="card featured dark">
    ...
</div>

این عنصر دارای سه Class مستقل است:

card
featured
dark

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

مثلاً:

product card

دو Class جداگانه ایجاد می‌کند.

برای یک نام واحد می‌توانیم بنویسیم:

product-card

آیا می‌توان از نام فارسی برای ID و Class استفاده کرد؟

HTML از کاراکترهای Unicode پشتیبانی می‌کند و از نظر فنی مقادیر مختلفی می‌توانند در ID و Class استفاده شوند.

اما در پروژه‌های وب معمولاً بهتر است برای ID و Class از نام‌های ساده و قابل پیش‌بینی انگلیسی استفاده کنیم.

مثلاً:

<section id="contact">
    ...
</section>

<article class="course-card">
    ...
</article>

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

استفاده از حروف کوچک در نام ID و Class

برای داشتن کد یکدست بهتر است یک شیوه نام‌گذاری مشخص انتخاب کنیم.

در این دوره بیشتر از حروف کوچک انگلیسی همراه با خط تیره استفاده خواهیم کرد:

main-content
course-card
page-header
contact-form

این سبک ساده، خوانا و قابل پیش‌بینی است.

ID و Class چه ارتباطی با معنای HTML دارند؟

ID و Class به خودی خود جایگزین انتخاب عنصر معنایی مناسب نمی‌شوند.

برای مثال به جای اینکه برای همه بخش‌ها فقط از div همراه با Class استفاده کنیم، باید هرجا عنصر معنایی مناسبی در HTML وجود دارد از همان عنصر استفاده کنیم.

مثلاً:

<nav class="main-navigation">
    ...
</nav>

معمولاً از نظر معنایی بهتر از این است که صرفاً بنویسیم:

<div class="main-navigation">
    ...
</div>

البته انتخاب عنصر مناسب به نقش واقعی محتوا بستگی دارد و در درس HTML معنایی این موضوع را کامل بررسی خواهیم کرد.

اشتباهات رایج در استفاده از ID و Class

استفاده از ID یکسان برای چند عنصر

نمونه اشتباه:

<div id="card">کارت اول</div>
<div id="card">کارت دوم</div>

اگر چند عنصر متعلق به یک گروه هستند، معمولاً Class انتخاب مناسب‌تری است:

<div class="card">کارت اول</div>
<div class="card">کارت دوم</div>

استفاده از فاصله برای ساخت ID چندکلمه‌ای

نمونه اشتباه:

<section id="main content">
    ...
</section>

نمونه مناسب:

<section id="main-content">
    ...
</section>

تکرار Attribute class

به جای:

<div class="card" class="featured">
    ...
</div>

تمام کلاس‌ها را در یک Attribute بنویسید:

<div class="card featured">
    ...
</div>

نام‌گذاری فقط براساس ظاهر

نام:

red-big-box

ممکن است بعداً با تغییر طراحی بی‌معنی شود.

نامی مانند:

warning-message

هدف و نقش عنصر را بهتر توضیح می‌دهد.

استفاده بی‌دلیل از ID برای تمام عناصر

لازم نیست هر عنصر صفحه دارای ID باشد.

ID زمانی استفاده شود که واقعاً به یک شناسه یکتا برای آن عنصر نیاز داریم.

اگر فقط قصد گروه‌بندی چند عنصر مشابه را داریم، معمولاً Class مناسب‌تر است.

یک مثال عملی کامل

ساختار زیر را ببینید:

<main id="main-content">

    <section id="courses">

        <h1 class="section-title">
            دوره‌های آموزشی
        </h1>

        <article class="course-card featured">
            آموزش HTML
        </article>

        <article class="course-card">
            آموزش CSS
        </article>

        <article class="course-card">
            آموزش JavaScript
        </article>

    </section>

</main>

در این مثال:

• main-content یک ID یکتا برای عنصر اصلی است.
• courses ID بخش دوره‌ها است.
• section-title یک Class برای عنوان بخش است.
• course-card روی چند عنصر تکرار شده است.
• کارت اول علاوه بر course-card کلاس featured نیز دارد.

این مثال تفاوت عملی ID و Class را به‌خوبی نشان می‌دهد.

تمرین اول: ID و Class را تشخیص دهید

کد زیر را بررسی کنید:

<section id="news">

    <h2 class="section-title">
        تازه‌ترین مطالب
    </h2>

    <article class="post-card featured">
        مقاله اول
    </article>

    <article class="post-card">
        مقاله دوم
    </article>

</section>

سعی کنید بدون نگاه کردن به پاسخ، مشخص کنید:

• کدام مقدار ID است؟
• کدام Class بین چند عنصر مشترک است؟
• کدام عنصر دو Class دارد؟
• کدام Class فقط روی عنوان استفاده شده است؟

تمرین دوم: یک ساختار بسازید

خودتان کدی ایجاد کنید که شامل موارد زیر باشد:

• یک بخش با ID یکتا برای محصولات
• سه محصول با Class مشترک
• یک محصول ویژه با یک Class اضافه
• یک عنوان دارای Class مشخص

برای مثال نام‌ها را خودتان انتخاب کنید و سعی کنید براساس مفهوم عناصر باشند.

تمرین سوم: لینک داخلی با ID

دو بخش در صفحه ایجاد کنید:

<section id="html"> <h2>HTML</h2> </section> <section id="css"> <h2>CSS</h2> </section>

سپس در ابتدای صفحه دو لینک ایجاد کنید که کاربر را مستقیماً به این بخش‌ها منتقل کنند:

<a href="#html">رفتن به HTML</a> <a href="#css">رفتن به CSS</a>

فایل را ذخیره کنید، صفحه را در مرورگر باز کنید و روی لینک‌ها کلیک کنید.

در این درس چه چیزهایی یاد گرفتیم؟

در این آموزش با ID و Class در HTML آشنا شدیم و یاد گرفتیم:

• id برای شناسایی یک عنصر مشخص استفاده می‌شود.
• مقدار ID باید در سند یکتا باشد.
• ID نباید شامل فاصله ASCII باشد.
• class برای دسته‌بندی عناصر استفاده می‌شود.
• یک Class می‌تواند روی چند عنصر تکرار شود.
• یک عنصر می‌تواند چند Class داشته باشد.
• Classها با فاصله از یکدیگر جدا می‌شوند.
• ID و Class هر دو در CSS کاربرد دارند.
• JavaScript نیز می‌تواند عناصر را با استفاده از ID و Class پیدا کند.
• با ID می‌توان به بخش مشخصی از صفحه لینک داد.
• بهتر است نام ID و Class براساس نقش و مفهوم عنصر انتخاب شود.

جمع‌بندی

حالا می‌دانیم ID و Class در HTML هر دو برای شناسایی و دسته‌بندی عناصر کاربرد دارند، اما هدف آنها یکسان نیست.

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

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

این مفاهیم در آینده هنگام یادگیری CSS و JavaScript بسیار مهم خواهند بود، زیرا برای انتخاب و کنترل عناصر صفحه دائماً با ID و Class سروکار خواهیم داشت.

در درس بعدی وارد بخش محتوای متنی HTML می‌شویم و با عنوان‌ها و پاراگراف‌ها در HTML، تگ‌های h1 تا h6 و عنصر p آشنا خواهیم شد.

درس قبلی: Attribute در HTML چیست؟ آشنایی با خصوصیت‌های تگ‌های HTML

درس بعدی: عنوان و پاراگراف در HTML چیست؟ آشنایی با تگ‌های h1 تا h6 و p