کدلپر - مرجع جامع آموزش برنامه‌نویسی

All Right Reserved © 2025 Codoloper

background codoloper

صفت id در HTML

خانه

صفت id در HTML

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

صفت id

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

صفت id برای اشاره به یک تعریف استایل (style declaration) مشخص در یک شیوه‌نامه استفاده می‌شود. همچنین توسط جاوا اسکریپت برای دسترسی و دستکاری عنصری با id مشخص به کار می‌رود.

نحو (syntax) استفاده از id به این صورت است: یک کاراکتر هَش (#) بنویسید، و به دنبال آن نام id را بیاورید. سپس، خصوصیات CSS را درون آکولادهای {} تعریف کنید.

در مثال زیر یک عنصر <h1> داریم که به نام id یعنی "myHeader" اشاره می‌کند. این عنصر <h1> بر اساس تعریف استایل #myHeader در بخش <head> استایل‌دهی خواهد شد:

مثال



<!DOCTYPE html>
<html>
  <head>
    <style>
      #myHeader {
        background-color: lightblue;
        color: black;
        padding: 40px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1 id="myHeader">My Header</h1>
  </body>
</html>
 

توجه: نام id به بزرگی و کوچکی حروف حساس است (case sensitive)!

توجه: نام id باید حداقل شامل یک کاراکتر باشد، نمی‌تواند با عدد شروع شود و نباید حاوی فضاهای خالی (فاصله، تب و غیره) باشد.

تفاوت بین Class و ID

یک نامِ کلاس (class) می‌تواند توسط چندین عنصر HTML استفاده شود، در حالی که یک نامِ id باید فقط توسط یک عنصر HTML در صفحه استفاده شود:

مثال

<style>
  /* استایل‌دهی به عنصر با id "myHeader" */
  #myHeader {
    background-color: lightblue;
    color: black;
    padding: 40px;
    text-align: center;
  }

  /* استایل‌دهی به تمام عناصر با نام کلاس "city" */
  .city {
    background-color: tomato;
    color: white;
    padding: 10px;
  }
</style>

<h1 id="myHeader">My Cities</h1>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

نکته: شما می‌توانید در آموزش CSS ما اطلاعات بسیار بیشتری در مورد CSS بیاموزید.

نشانک‌های (Bookmarks) HTML با ID و لینک‌ها

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

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

مثال

ابتدا، یک نشانک با صفت id ایجاد کنید:



<h2 id="C4">Chapter 4</h2>
سپس، یک لینک به آن نشانک ("پرش به فصل ۴")، از داخل همان صفحه اضافه کنید:
 

مثال



<a href="#C4">Jump to Chapter 4</a>

 

یا، یک لینک به آن نشانک ("پرش به فصل ۴")، از یک صفحه دیگر اضافه کنید:

<a href="html_demo.html#C4">Jump to Chapter 4</a>


 

استفاده از صفت id در جاوا اسکریپت

صفت id همچنین می‌تواند توسط جاوا اسکریپت برای انجام برخی کارها روی آن عنصر خاص استفاده شود.

جاوا اسکریپت می‌تواند با متد getElementById() به عنصری با id مشخص دسترسی پیدا کند:

مثال

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



<script>
  function displayResult() {
    document.getElementById("myHeader").innerHTML = "Have a nice day!";
  }
</script>
 

نکته: جاوا اسکریپت را در فصل جاوا اسکریپت HTML یا در آموزش جاوا اسکریپت ما مطالعه کنید.

خلاصه فصل

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

  • مقدار صفت id باید در کل سند HTML منحصر به فرد باشد.

  • صفت id توسط CSS و جاوا اسکریپت برای استایل‌دهی/انتخاب یک عنصر خاص استفاده می‌شود.

  • مقدار صفت id به بزرگی و کوچکی حروف حساس است.

  • صفت id همچنین برای ایجاد نشانک‌های HTML استفاده می‌شود.

  • جاوا اسکریپت می‌تواند با متد getElementById() به عنصری با id مشخص دسترسی پیدا کند.