ماهي السمات في لغة html؟

تُستخدم لغة HTML لتصميم صفحات الويب، وتتضمن عناصر HTML وسموم العرض والتنسيق والإدخال. ولكل عنصر في HTML مجموعة من السمات أو الـAttributes التي تحدد خصائص العنصر. في هذه المقالة، سنتحدث عن أهمية السمات في لغة HTML وكيفية استخدامها.
الشكل العام للسمات في لغة HTML:
تتكون السمات في لغة HTML من اسم السمة وقيمة السمة وتكون السمة داخل علامات العنصر. ويتم تحديد اسم السمة بعد اسم العنصر مباشرة ثم يليه قيمة السمة بين علامة الاقتباس.

<element-name attribute_name="attribute_value">content</element-name>

أمثلة على السمات:
class: تستخدم لتحديد العنصر وتنسيقه من خلال CSS.

<p class="paragraph">This is p</p>

id: يستخدم لتحديد العنصر بشكل فريد في الصفحة وتنسيقه باستخدام CSS.

<p id="paragraph">This is p</p>

href: تستخدم لتحديد الرابط للعنصر a.

<a href="https://test.com">visit test.com</a>

src: تستخدم لتحديد المسار لملف الصورة في عنصر img.

<img src="image.jpg">

style: تستخدم لتنسيق العنصر مباشرة باستخدام CSS كما ترون إستبدلنا اللون الخاص بها للون الأحمر.

<p style="color: red"></p>

السمات المخصصة:
تتيح لنا لغة HTML إمكانية إنشاء سمات مخصصة لتخزين بيانات إضافية في العناصر، وذلك عن طريق استخدام "data-" وبعد ذلك اسم السمة المخصصة. سنتحدث عن السمات المخصصة في لغة HTML وكيفية استخدامها.
تعريف السمات المخصصة:
السمات المخصصة هي سمات يتم إنشاؤها من قبل المطورين لتخزين بيانات إضافية في العناصر، ويتم تحديدها باستخدام "data-" متبوعة بعد ذلك بالاسم الذي تريد إضافته. وعندما تستخدم هذه السمات في صفحة HTML، يمكن للمطورين استخدامها لتخزين أي بيانات يريدونها دون أي تأثير على عمل العنصر نفسه. استخدام السمات المخصصة:
يمكن استخدام السمات المخصصة بشكل مشابه للسمات القياسية في لغة HTML، ولكن بدلاً من استخدام اسم السمة القياسي، يجب عليك استخدام اسم السمة المخصصة المتبوعة "data-"، مثل:

HTML

<div data-custom="value"></div>

ويمكنك أيضًا تحديد السمة المخصصة في الكائن DOM باستخدام الوظيفة getAttribute، على النحو التالي:

javascript

const myDiv = document.querySelector('div');
const myAttributeValue = myDiv.getAttribute('data-custom');
console.log(myAttributeValue); // output = value

الفوائد الرئيسية للاستخدام السمات المخصصة:

1. توفير معلومات إضافية للمطورين حول العناصر في الصفحة.
2. يمكن استخدامها لتبسيط الأكواد وتجنب الحاجة إلى إضافة بيانات إضافية في الصفحة باستخدام بيانات خارجية مثل قاعدة البيانات وغيرها...

هناك العديد من الفوائد الأخرى عند تحديث الدرس سنذكرها كلها
وهكذا إنتهينا تعرفنا على العناصر في لغة html نلتقي في دروس أخرى و وفقكم الله.