ID ها و کلاس ها در HTML

در این مقاله از وبسایت راکت قصد داریم شما را با مبحث ID ها و کلاس ها در HTML بیشتر آشنا کنیم.

شناسه و کلاس در HTML چیست؟

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

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

بله. معمولاً کلاس برای یک ظاهر طراحی شده و ID طراحی شده است تا اجازه دستکاری مستقیم توسط اسکریپت‌ها را بدهد.

کلاس­های HTML چیست؟

تعریف، کاربرد و ویژگی یک یا چند کلاس را برای یک عنصر مشخص می کند. از ویژگی کلاس بیشتر برای اشاره به یک کلاس در یک صفحه استفاده می­شود. با این حال، همچنین می­تواند توسط جاوا اسکریپت از طریق (HTML DOM) برای ایجاد تغییر در عناصر HTML با یک کلاس مشخص استفاده شود. از انتخاب کلاس، برای تعیین سبک برای گروهی از عناصر استفاده می­شود. انتخابگر کلاس اغلب روی چندین عنصر استفاده می­شود. این به شما امکان می‌دهد برای بسیاری از عناصر HTML با همان کلاس سبک خاصی را تعیین کنید.

انتخابگر کلاس از ویژگی کلاس HTML استفاده می­کند و با "" تعریف می­شود. نمونه‌هایی از نام کلاس‌ها عبارتند از: برچسب، نظر، دکمه نوار ابزار، پیام هشدار یا ایمیل.

ID های HTML چیست؟

مشخصه id globalیک شناسه (ID) را تعریف می­کند که باید منحصر به فرد باشد. هدف آن شناسایی عنصر هنگام پیوند دادن، برنامه­‌نویسی یا روش دهی با CSS است. این عنصر منحصر به فرد کل صفحه شما را شناسایی می­‌کند. هیچ عنصر دیگری نباید با همان ID اعلام شود. IDبرای تعیین سبک برای یک عنصر منحصر به فرد استفاده می‌­شود. ID از ویژگی ID عنصر HTML استفاده می‌­کند و با "#" تعریف می­‌شود. نمونه‌هایی از شناسه‌ها عبارتند از: محتوای اصلی، هدر، پاورقی یا نوار کناری سمت چپ.

تفاوت‌­های بین کلاس و ID

تفاوت بین ID و کلاس این است که ID فقط برای شناسایی یک عنصر واحد در HTML استفاده می­شود. ID ها فقط زمانی استفاده می­‌شوند که یک عنصر در صفحه باید سبک خاصی را روی آن اعمال کند. با این حال، یک کلاس می‌تواند برای شناسایی بیش از یک عنصر HTML استفاده شود. کلاس ها برای نشان دادن عناصر متعددی استفاده می­‌شوند که سبک یکسانی را دریافت خواهند کرد. وقتی می‌خواهید چندین عنصر را به طور مداوم در تمام صفحه یا سایت استفاده کنید، باید از کلاس استفاده کنید. کلاس ­ها زمانی مفید هستند که شما بیش از یک عنصر مشابه داشته باشید یا احتمالاً در آینده قصد اضافه کردن عنصر جدیدی را دارید. علاوه بر این، یک عنصر داده شده می­‌تواند بیش از یک کلاس مرتبط با آن داشته باشد. در حالی که یک عنصر فقط می‌تواند یک ID داشته باشد. به­ علاوه، توجه داشته باشید که کلاس ­ها اغلب علاوه بر روش تصویری، برای تعریف روش رفتاری نیز مورد استفاده قرار می­‌گیرند. بهتر است ازکلاس ها استفاده کنید؛ زیرا به شما کمک می­‌کند هر آنچه را که می­‌خواهید اجرا کنید.ID ­ها وقتی استفاده میشوند که یک عنصر واحد در صفحه دارید که می‌خواهد از یک روش استفاده کند. به یاد داشته باشید که ID­ها باید منحصر به فرد باشند. شما نمی‌توانید بیش از یک عنصر با ID مشابه در یک سند HTML داشته باشید اما کلاس ­ها را می‌توان برای چندین عنصر استفاده کرد.

از ID­ ها برای عناصر یکبار مصرف و کلاس ­ها برای عناصر چند منظوره استفاده کنید.

ID­ها این قابلیت را دارند که به عنوان پیوند به بخش‌­های خاصی در یک صفحه وب کار کنند. یک کلمه کلیدی بعد از # برچسب شما را به بخش خاصی از صفحه وب هدایت می­‌کند. از ویژگی کلاس می‌توان با چندین عنصر یا برچسب HTML استفاده کرد و همه تأثیر خواهند داشت. علاوه بر این، ID­ها از ویژگی بالاتر از کلاس‌­ها برخوردار هستند. ID هنگامی استفاده می‌­شود که ما باید ویژگی CSS را فقط روی یک ویژگی اعمال کنیم. کلاس زمانی استفاده می‌شود که مجبور شویم از ویژگی CSS در بسیاری از مکان‌های داخل همان صفحه یا مکان‌های مختلف استفاده کنیم.

چرا ID­ ها باید در هر صفحه منحصر به فرد باشند؟

درک این نکته برای یک مبتدی مهم است زیرا استفاده از ID مشابه برای چندین عنصر در یک صفحه هیچ خطایی ایجاد نمی­‌کند و دارای تأثیرات یک کلاس است. بنابراین از دیدگاه HTML / CSS ، منحصر به فرد بودن ID در هر صفحه باعث ایجاد حس نمی‌­شود. اما از دیدگاه جاوا اسکریپت، داشتن یک ID در هر عنصر در هر صفحه مهم است زیرا getElementByIdعناصر را توسط ID­های خود شناسایی می‌کند، همان­طور که از نام آن مشخص است. بنابراین حتی اگر شما یک توسعه دهنده HTML / CSS خالص هستید، به دو دلیل خوب باید به جنبه منحصر به فرد ID­ها در هر صفحه احترام بگذارید:

وضوح: هر زمان که ID­ای را می‌بینید مطمئن هستید که در جای دیگری در همان صفحه وجود ندارد.

مقیاس پذیری: حتی اگر فقط در HTML / CSS در حال توسعه هستید، باید روزی را که خود یا یک توسعه دهنده دیگر برای ادامه پروژه و افزودن به آن در نظر گرفته­‌اید، برای حفظ و افزودن قابلیت وب سایت خود در جاوا اسکریپت رعایت کنید.

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

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

می توانیم از ID ها و کلاس ­ها همزمان استفاده کنیم؟

بله، در یک تقسیم واحد می­‌توانید از هر دو استفاده کنید اما خیلی معمول نیست.

منابع:

1.www.codecademy.com

2.stackoverflow.com