صفت های class و id در html

در یکی از مقاله های آموزشی، صفت ها در html را توضیح داده ایم. نوع خاص و پرکاربردی از مشخه ها در html، مربوط به دو نوع از آن هاست.

صفت های class و id در html، این امکان را در طول فرآیند طراحی صفحات وب به شما می دهند تا نامگذاری و رده بندی مناسبی برای عناصر مختلف صفحات سایت داشته باشید.

وقتی عناصر به وسیله ی صفت های class و id نامگذاری می شوند؛ این قابلیت را خواهیم داشت تا بتوانیم عناصر html را انتخاب کنیم تا به وسیله ی جاوااسکریپت کنترل کرده و یا به وسیله ی سی اس اس سبک دهی کنیم.

صفت id

اگر در هر صفحه، یک عنصر با نام مورد نظرتان دارید، می توانید از صفت ی id برای نامگذاری آن استفاده کنید. مثلا در طراحی سایت، به طور منطقی در هر صفحه تنها یک لوگو وجود دارد. یعنی صفحات دارای چند لوگو نیستند! بنابر این می توانید برای نام گذاری عنصر مربوط به لوگو، از صفت id استفاده کنید:

[html]<a id="logo" href="https://onliner.co">web design</a>[/html]

صفت class

اگر در هر صفحه، این احتمال وجود داشته باشد که یک یا چند عنصر با یک نام وجود داشته باشند، از صفت class برای نامگذاری آن استفاده می کنیم. مثال ممکن است یک بخش با آی دی gallery داشته باشیم که ممکن است در آن چندین آیتم وجود داشته باشند (در یک گالری چند تصویر وجود دارد). در این صورت مثال زیر گزینه ی خوبی است:

[html]<div id="gallery">
<img src="#" alt="#" />
<img src="#" alt="#" />
<img src="#" alt="#" />
<img src="#" alt="#" />
</div>[/html]

ترفند:

برای مشخص کردن تگ های پایانی برای هر کدام از عناصری که با آی دی و یا کلاس نامگذاری شده اند، با استفاده از توضیحات اچ تی ام ال (html comments)، می توانید مانند کد روبرو استفاده کنید:

[html]<div id="content">
<ul>
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
<li><a href="#">php</a></li>
</ul><!– .nav –>
</div><!– #content –>[/html]

در این روش علاوه بر نوشتن نام هر عنصر، نوع آن را نیز مشخص می کنیم. این کار با قرار دادن # قبل از نام عنصری که نام آن با آی دی مشخص شده است و همچنین با قرار دادن . قبل از نام عنصری که نام آن با کلاس مشخص شده است، انجام می شود. استفاده از این تکنیک به خوانایی کدها خیلی کمک می کند.

نکته:

علت انتخاب # و . برای مشخص کردن آیدی ها و کلاس ها این است که در جاوااسکریپت و سی اس اس، آیدی ها و کلاس ها با همین نشان ها انتخاب می شوند.