وثائق HTML قابلة للتشغيل: سمات HTML

Q: ما هي سمة HTML؟

السمة معلومة إضافية تُكتب داخل وسم الفتح بالشكل name="value". تضبط العنصر: href تحدد إلى أين يذهب الرابط، وsrc وalt تصفان الصورة، وclass وid تتيحان لـ CSS وJavaScript إيجاد العنصر.

Q: ما الفرق بين class وid في HTML؟

يجب أن يكون id فريدًا في الصفحة، فهو يحدد عنصرًا واحدًا لروابط #fragment و وgetElementById. أما class فيمكن أن تشترك فيه عناصر كثيرة، ويمكن أن يحمل العنصر الواحد عدة فئات مفصولة بمسافات. استخدم الفئات للتنسيق.

Q: كيف أضيف أكثر من class إلى عنصر HTML؟

ضعها في سمة class واحدة مفصولة بمسافات: . كتابة class مرتين لا تعمل: يحتفظ المتصفح بالأولى فقط.

Q: لماذا يبقى الزر معطلًا مع disabled="false"؟

disabled سمة منطقية: وجودها يعني true مهما كانت القيمة. لتفعيل العنصر احذف السمة، أو اكتب button.disabled = false في JavaScript، وهذا يحذفها.

Q: هل يمكنني اختراع سمات HTML خاصة بي؟

استخدم البادئة data-: السمتان data-price="12" وdata-user-id="7" صالحتان على أي عنصر ويمكن قراءتهما في JavaScript عبر element.dataset. الأسماء المخترعة بلا البادئة تجعل HTML غير صالح.

ما هي سمات HTML

السمة تضيف معلومة إلى العنصر. توضع داخل وسم الفتح وتُكتب كاسم ثم علامة يساوي ثم قيمة بين علامتي تنصيص: name="value". يمكن أن يحمل العنصر أي عدد من السمات مفصولة بمسافات.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Attributes</title>
</head>
<body>
  <a href="#note" title="Jumps to the note below">A link with href and title</a>
  <p>
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='28' fill='%2316a34a'/%3E%3C/svg%3E" alt="A green circle" width="60" height="60">
  </p>
  <input type="email" placeholder="you@example.com" required>
  <p id="note">Hover the link to see its title.</p>
</body>
</html>

href تخبر الرابط إلى أين يذهب، وsrc وalt تصفان الصورة، وtype وplaceholder وrequired تضبط حقل الإدخال. لكل عنصر مجموعته الخاصة من السمات، وبعضها (السمات العامة أدناه) يعمل على كل العناصر.

قواعد الصيغة

<input type="text" name="city" value="Paris" disabled>

اسم، ثم علامة يساوي، ثم قيمة بين علامتي تنصيص. علامات التنصيص المزدوجة هي العرف، والمفردة تعمل أيضًا (title='Say "hi"' هي طريقة وضع علامة تنصيص مزدوجة داخل القيمة).
الأسماء لا تتأثر بحالة الأحرف. CLASS وclass السمة نفسها. أما القيم فتتأثر: class="Box" وclass="box" فئتان مختلفتان.
علامات التنصيص اختيارية عند غياب المسافات، لكن ضعها على أي حال. class=big box يعطي العنصر الفئة big وسمة ثانية بلا معنى اسمها box.
الترتيب لا يهم. <img alt="" src="a.png"> هو نفسه <img src="a.png" alt="">.
كل اسم مرة واحدة في العنصر. إذا تكررت سمة مرتين، يحتفظ المتصفح بالأولى ويتجاهل الثانية بصمت.

السمات المنطقية (Boolean)

بعض السمات إما مفعّلة أو معطّلة. في هذه السمات الوجود يعني true، والقيمة يتم تجاهلها. disabled وchecked وrequired وreadonly وhidden وmultiple وautofocus وopen كلها تعمل بهذه الطريقة.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Boolean attributes</title>
</head>
<body>
  <p><button>No attribute: enabled</button></p>
  <p><button disabled>disabled: off</button></p>
  <p><button disabled="false">disabled="false": still off</button></p>
  <p><label><input type="checkbox" checked> checked</label></p>
</body>
</html>

الزر الثالث معطّل رغم أن القيمة تقول false، لأن المتصفح يتحقق فقط من وجود السمة. لإيقاف سمة منطقية احذفها. وفي JavaScript يفعل button.disabled = false ذلك بالضبط.

السمة class

class تعطي العنصر اسمًا أو أكثر يستخدمه CSS وJavaScript لإيجاده. يمكن لعدة عناصر أن تشترك في فئة واحدة، ويمكن للعنصر الواحد أن يحمل عدة فئات مفصولة بمسافات:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>class</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .card { border: 2px solid #e5e7eb; border-radius: 8px; padding: 12px; margin-bottom: 8px; }
    .featured { border-color: #2563eb; }
    .muted { color: #6b7280; }
  </style>
</head>
<body>
  <div class="card">class="card"</div>
  <div class="card featured">class="card featured"</div>
  <div class="card featured muted">class="card featured muted"</div>
</body>
</html>

كل فئة إضافية تضيف قواعدها فوق ما سبق. في CSS تُحدَّد الفئة بنقطة (.card)، وفي JavaScript يغيّرها element.classList.add('featured') وclassList.remove. الفئات هي الطريقة المعتادة للتنسيق: معظم CSS الذي تكتبه سيستهدف فئات.

السمة id

id تعطي العنصر اسمًا يجب أن يكون فريدًا في الصفحة. استخدمها عندما تحتاج عنصرًا واحدًا بالضبط: هدف رابط، أو <label for>، أو document.getElementById.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>id</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #pricing { background: #e5e7eb; padding: 12px; margin-top: 600px; }
  </style>
</head>
<body>
  <a href="#pricing">Jump to pricing</a>
  <p><label for="email">Email</label> <input id="email" type="email"></p>
  <section id="pricing">This section has id="pricing". The link above scrolls here.</section>
</body>
</html>

النقر على التسمية ينقل التركيز إلى حقل الإدخال، لأن for="email" تشير إلى id="email". والرابط ينتقل إلى #pricing لأن الجزء بعد # في href يطابق قيمة id.

	`class`	`id`
كم عنصرًا يمكن أن يشترك فيها	أي عدد	عنصر واحد (فريد)
عدد القيم في العنصر	عدة قيم مفصولة بمسافات	قيمة واحدة
محدد CSS	`.name`	`#name`
الاستخدام المعتاد	تنسيق مجموعات من العناصر	أهداف الروابط، التسميات، عنصر محدد في JavaScript

لا يمكن أن يحتوي id على مسافات. ابدأه بحرف ليسهل استخدامه في CSS: #2col ليس محدد CSS صالحًا من دون تهريب.

السمات العامة

هذه السمات تعمل على أي عنصر:

السمة	وظيفتها
`id`	اسم فريد للعنصر
`class`	قائمة أسماء فئات مفصولة بمسافات
`style`	CSS مضمّن، مثل `style="color: red"`
`title`	نص تلميح يظهر عند مرور المؤشر
`lang`	لغة المحتوى، مثل `lang="fr"`
`dir`	اتجاه النص: `ltr` أو `rtl` أو `auto`
`hidden`	تخفي العنصر (منطقية)
`tabindex`	تجعل العنصر قابلًا للتركيز بمفتاح Tab، أو تحدد ترتيبه
`contenteditable`	تتيح للمستخدم تحرير نص العنصر
`data-*`	بياناتك الخاصة، تُقرأ بـ JavaScript

لـ سمة lang صفحة خاصة لأنها تؤثر في قارئات الشاشة والترجمة والبحث.

سمات data-*

عندما تحتاج إلى تخزين قيمة خاصة بك على عنصر، ابدأ اسم السمة بـ data-. أي اسم يصلح بعد البادئة، وتقرأ JavaScript القيم عبر element.dataset، مع تحويل الشرطات إلى أسلوب camelCase:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data attributes</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    button { margin: 4px; }
    #out { font-weight: bold; }
  </style>
</head>
<body>
  <button data-product-id="101" data-price="4.50">Tea</button>
  <button data-product-id="102" data-price="3.20">Coffee</button>
  <p id="out">Click a product.</p>
  <script>
    document.querySelectorAll('button').forEach((btn) => {
      btn.addEventListener('click', () => {
        const { productId, price } = btn.dataset;
        document.getElementById('out').textContent = 'Product ' + productId + ' costs ' + price;
      });
    });
  </script>
</body>
</html>

data-product-id تصبح dataset.productId. القيم تعود دائمًا كنصوص، لذلك حوّلها بـ Number() قبل إجراء عمليات حسابية. ويمكن لـ CSS أيضًا أن يحددها: [data-price="4.50"].

أخطاء شائعة

كتابة class مرتين. <div class="a" class="b"> يحتفظ بـ a فقط. ضع الاثنتين في سمة واحدة: class="a b".
تكرار id. عنصران بنفس id يعطّلان روابط #links والتسميات وgetElementById التي تُرجع الأول فقط. استخدم class لأي شيء متكرر.
disabled="false" أو checked="false". السمة ما زالت موجودة، إذن ما زالت مفعّلة. احذفها بدلًا من ذلك.
قيم بلا علامات تنصيص تحتوي على مسافات. alt=My photo يضبط alt على My. ضع كل قيمة بين علامتي تنصيص.
اختراع سمات بلا data-. <div price="4"> يجعل HTML غير صالح وقد يتعارض مع سمة قياسية مستقبلية. استخدم data-price.

الأسئلة الشائعة

ما هي سمة HTML؟

السمة معلومة إضافية تُكتب داخل وسم الفتح بالشكل name="value". تضبط العنصر: href تحدد إلى أين يذهب الرابط، وsrc وalt تصفان الصورة، وclass وid تتيحان لـ CSS وJavaScript إيجاد العنصر.

ما الفرق بين class وid في HTML؟

يجب أن يكون id فريدًا في الصفحة، فهو يحدد عنصرًا واحدًا لروابط #fragment و<label for> وgetElementById. أما class فيمكن أن تشترك فيه عناصر كثيرة، ويمكن أن يحمل العنصر الواحد عدة فئات مفصولة بمسافات. استخدم الفئات للتنسيق.

كيف أضيف أكثر من class إلى عنصر HTML؟

ضعها في سمة class واحدة مفصولة بمسافات: <div class="card featured dark">. كتابة class مرتين لا تعمل: يحتفظ المتصفح بالأولى فقط.

هل تحتاج سمات HTML إلى علامات تنصيص؟

علامات التنصيص اختيارية إذا لم تحتوِ القيمة على مسافات أو رموز خاصة، لكن وضعها دائمًا هو العادة الآمنة. class=big box يعطي العنصر الفئة big مع سمة منفصلة اسمها box.

لماذا يبقى الزر معطلًا مع disabled="false"؟

disabled سمة منطقية: وجودها يعني true مهما كانت القيمة. لتفعيل العنصر احذف السمة، أو اكتب button.disabled = false في JavaScript، وهذا يحذفها.

هل يمكنني اختراع سمات HTML خاصة بي؟

استخدم البادئة data-: السمتان data-price="12" وdata-user-id="7" صالحتان على أي عنصر ويمكن قراءتهما في JavaScript عبر element.dataset. الأسماء المخترعة بلا البادئة تجعل HTML غير صالح.

مفاهيم ذات صلة