ماهي السمات في لغة 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
الفوائد الرئيسية للاستخدام السمات المخصصة:
- توفير معلومات إضافية للمطورين حول العناصر في الصفحة.
- يمكن استخدامها لتبسيط الأكواد وتجنب الحاجة إلى إضافة بيانات إضافية في الصفحة باستخدام بيانات خارجية مثل قاعدة البيانات وغيرها...
وهكذا إنتهينا تعرفنا على العناصر في لغة
html
نلتقي في دروس
أخرى و وفقكم الله.