آموزش HTML - شناسه

شناسه (id) یک کلمه کلیدی مهم در HTML است. ویژگی "id" در HTML برای شناسایی منحصر‌به‌فرد یک عنصر درون صفحه وب استفاده می‌شود. این ویژگی به عنوان یک برچسب برای آن عنصر عمل کرده و به جاوااسکریپت و CSS امکان می‌دهد تا آن را به صورت دقیق هدف قرار دهند.

ویژگی id در HTML در کد HTML با استفاده از کلمه کلیدی "id" تعریف می‌شود و استایل‌دهی آن در CSS تعیین می‌گردد. این شناسه به اعمال استایل‌های سفارشی، ایجاد ویژگی‌های تعاملی و پیمایش دقیق در صفحه وب کمک می‌کند. مقادیر "id" باید در طول سند منحصر‌به‌فرد باشند.

ما اکیداً توصیه می‌کنیم که برای استایل‌دهی هر عنصری از طریق CSS، از کلاس‌ها (class) استفاده کنید.

سنتکس (نحوه نگارش) id

در CSS، می‌توانید ویژگی id را با استفاده از علامت هش (#) و در ادامه نام id در عنصر HTML هدف قرار دهید. سعی کنید از id در CSS استفاده نکنید و به جای آن از ویژگی class استفاده کنید. شناسه (id) به طور ویژه برای اجرا از طریق جاوااسکریپت ایجاد شده است.

• در HTML:

  <element class="highlight">...</element>

• در CSS:

  /* CSS using id Attribute Selector */
  #highlight {
     background-color: yellow;
     color: black;
     font-weight: bold;
  }

• در جاوااسکریپت:

  document.getElementById('highlight')

استفاده از ویژگی HTML id

شناسه‌های HTML برای مدیریت رویدادها و تغییر ساختار اسناد ضروری هستند. به منظور ایجاد صفحات وب پویا و تعاملی، این ویژگی به توسعه‌دهندگان امکان می‌دهد بخش‌های خاصی را هدف قرار داده و ظاهر و رفتار ویژه‌ای به آن‌ها ببخشند. از id به‌ندرت برای استایل‌دهی در CSS استفاده می‌شود.

تعریف یک id برای استایل‌دهی

در مثال زیر، دو عنصر ایجاد کرده‌ایم که یکی h1 و دیگری p است و روی آن‌ها idهای "header" و "heightlight" را تنظیم نموده‌ایم، اما از "heightlight" در CSS داخلی برای استایل‌دهی به عنصر p استفاده کرده‌ایم. شما می‌توانید به همین ترتیب از id با نام "header" برای استایل‌دهی به عنصر h1 استفاده کنید.

<!DOCTYPE html>
<html>

<head>
   <style>
      <!-- CSS id attribute Selector Used -->
      #highlight {
         background-color: yellow;
         color: black;
         padding: 5px;
      }
   </style>
</head>

<body>
   <!-- Using id attribute in both Element -->
   <h1 id="header">Tutorialspoint</h1>
   <p id="highlight">Simply Easy Learning</p>
</body>

</html>

استفاده از ویژگی id از طریق جاوااسکریپت

شناسه‌ها (idها) اغلب برای شناسایی عناصر جهت استفاده در توابع جاوااسکریپت به کار می‌روند. به عنوان مثال، می‌توانید از یک id برای هدف قرار دادن عناصر خاص مانند یک پاراگراف استفاده کنید و آن‌ها را از طریق جاوااسکریپت تعاملی سازید. در کد زیر، یک دکمه ایجاد کرده‌ایم که تابعی را فراخوانی می‌کند؛ این تابع مقدار ویژگی display یک عنصر p را از none به block تغییر می‌دهد. سپس پاراگراف را مشاهده خواهید کرد.

<!DOCTYPE html>
<html>

<head>
   <script>
      function showContent() {
         var element = document.getElementById('content');
         if (element.style.display === 'none') {
            element.style.display = 'block';
         } else {
            element.style.display = 'none';
         }
      }
   </script>
   <style>
      .interactive-button {
         background-color: #007bff;
         color: #fff;
         padding: 10px 20px;
         border: none;
         cursor: pointer;
      }
   </style>
</head>

<body>
   <button class="interactive-button" 
           onclick="showContent()">Click Me</button>
   <p class="content" style="display: none;">
       This content can be toggled by clicking the button.
   </p>
</body>

</html>

تفاوت بین id و class در HTML

در HTML، ویژگی id منحصر به یک عنصر واحد در صفحه است که آن را برای هدف‌گیری با CSS و جاوااسکریپت کاربردی می‌کند و باید در کل سند یکتا باشد. از طرف دیگر، ویژگی class می‌تواند روی چندین عنصر اعمال شود و امکان دسته‌بندی عناصری را که استایل‌ها یا رفتارهای مشترکی دارند فراهم می‌سازد.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>Difference between id and class</title>
   <style>
      /* ID selector */
      #header {
         background-color: blue;
         color: white;
         padding: 10px;
      }
      /* Class selector */
      .button {
         background-color: green;
         color: white;
         padding: 5px 10px;
         margin: 5px;
      }
   </style>
</head>

<body>
      <!-- Unique ID for the header -->
      <div id="header">
         This is the header
      </div>
      <!-- Shared class for buttons -->
      <div class="button">
         Button 1
      </div>
      <div class="button">
         Button 2
      </div>
</body>

</html>

نکات مهم درباره id

• ویژگی id باید حداقل شامل یک کاراکتر باشد، حرف شروع‌کننده باید یک حرف انگلیسی (a-z یا A-Z) باشد و مابقی حروف از هر نوعی حتی کاراکترهای خاص قابل نوشتن هستند.
• ویژگی id نباید هیچ فاصله خالی (space) داشته باشد.
• در درون یک سند، هر id باید منحصر‌به‌فرد باشد.

الگوی معتبر برای ویژگی‌های id

برخی ویژگی‌های ID در HTML 5 معتبر هستند، اما در CSS (Cascading Style Sheets) معتبر نیستند. در چنین مواردی، توصیه می‌شود به جای خروجی استایل‌دهی‌شده از خروجی ساده استفاده کنید، زیرا ممکن است برخی مقادیری که برای ID استفاده می‌کنیم در CSS غیرمجاز باشند.

مثال زیر نحوه استفاده از ویژگی‌های ID ساده را نشان می‌دهد.

مثال

اگر کد زیر را اجرا کنیم، دو عنصر div نمایش داده می‌شوند؛ یکی با ویژگی id برابر با (TutorialsPoint Website) و دیگری با ویژگی id دیگر شامل (Html5 Tutorials, CSS Tutorials, JavaScript Tutorials).

<!DOCTYPE html>
<html>

<head>
   <title>Simple Id Attributes</title>
   <style>
      /* Remove @ from the code and run the code again */
      #@TP {
         color: #070770;
         text-align: center;
         font-size: 30px;
         font-weight: bold;
      }
      #@TP1 {
         text-align: center;
         font-size: 25px;
      }
   </style>
</head>

<body>
   <div id="@TP">
      TutorialsPoint Website
   </div>
   <div id="@TP1"> 
      Html5 Tutorials, CSS Tutorials, JavaScript Tutorials 
   </div>
</body>
</html>

اگر نماد @ را از مقدار id حذف کنیم، به یک تعریف معتبر id تبدیل می‌شود و استایل‌های اعمال‌شده روی عنصر HTML تأثیر خواهند گذاشت.