مدونة عربيكو التعليمية: عناصر البيانات الوصفية في لغة(html)

ماهي عناصر البينات الوصفية(Metadata Elements) ؟ هي العناصر التي تُقدِّم وصفًا ومعلومات عن مستند HTML للمتصفحات، ومحركات البحث، وأنظمة أخرى. هذه البيانات لا يراها المستخدم ولا تظهر له ضمن محتوى الصفحة، بل هي معلومات هامة توضح لـ (المتصفحات أو محركات البحث) الطريقة التي يجب أن تتبعها للتعامل مع المستند، يجب وضع جميع هذه البيانات الوصفية داخل عنصر <head>، وهو القسم المخصص لهذا الغرض في مستند (HTML).
اهم هذه العناصر هو عنصر عنوان الصفحة <title> يصف عنوان المستند وعنصر ميتا <meta> الذي يستخدم لوصف بيانات عديدة تتحكم فيها سمات داخل هذ العنصر لتحديد البيانات الوصفية ومن العناصر الوصفية العنصر <link> وهو عنصر ربط يستخدم لربط بيانات خارجية بالصفحة فيما يلي شرح لجميع عناصر البيانات الوصفية في مستند(html):

أنواع عناصر البيانات الوصفية

عنصر عنوان الصفحة<title>

هو عنصر يصف عنوان المستند او عنوان صفحة الويب للمتصفحات في تبويب المتصفح، وكذلك هذا العنوان تحتاج اليه محركات البحث العالمية لفهم الصفحة، وهو العنوان العام للصفحة وهذه مثال لكيفية كتابة عنوان الصفحة داخل صفحة ويب:

<title>عنوان الصفحة</title>

يجب ان يكون هذا العنصر داخل عنصر الرأس بين وسم البداية ووسم النهاية للعنصر الرأس <head>انظر للمثال ادناه :

<!DOCTYPE html>
<html>

    <head>
<title>عنوان الصفحة </title>
    </head>

<body></body>

</html>

عنصر ميتا <meta>

هذا العنصر يمكن من خلاله إضافة بيانات وصفية متعددة للمتصفحات ومحركات البحث العالمية تتحكم فيه سمات لتحديد نوع البيانات الوصفية ،وهذا العنصر هو الاكثر استخداما في صفحات الانترنت فهو هام جدا لصفحات الانترنت، تستخدم السمة charset داخل عنصر ميتا لتحديد ترميز الاحرف في صفحات وتستخدم السمة nameوcontentداخل عنصر ميتا لتحديد تجاوب الصفحة مع الشاشات المختلفة وهذه السمة ايضا تحدد بيانات أخري غير تحديد تجاوب الصفحة مع الشاشات المختلفة ،وهناك سمات أخري تستخدم داخل عنصر ميتا لتحديد بيانات وصفية محددة انظر للأمثلة الاتية :

استخدام السمة charsetلتحديد ترميز الاحرف

<meta charset="UTF-8"/>

استخدام السمة content لتحديد تجاوب الصفحة مع الشاشات المختلفة

<meta name='viewport' content='width=device-width, initial-scale=1.0' />

العنصر <link>

هو عنصر وصفي يحتاج لسمات ايضا لاضافة بيانات وصفية محددة، يستخدم هذا العنصر لربط ملفات خارجية بالصفحة منها :-

رابط صورة ايقونة الصفحةfavicon
ربط ملف (css) خارجي
ربط canonical urlلاختيار عنوان الصفحة الاساسي الذي يجب تتم فهرسته من قبل محركات البحث.
التحميل المسبق للموارد الخارجية rel="preload"
وهناك استخدامات أخري لهذا العنصر ستتعرف عليها لاحقا

العنصر <style>

وهو عنصر يستخدم لكتابة خصائص لغة (css)هذه الخصائص هي بيانات وصفية تحدد طريقة عرض العناصر في الصفحة من حيث الشكل العام والمظهر مثال :

<style>
.main{background-color:#222;text-align:center;}
body{margin:0;padding:10px;}
</style>

العنصر <script>

هو عنصر وصفي يستخدم لكتابة شيفرة مباشرة من لغة جافاسكريبت داخل مستند(html) قابلة للتنفيذ او لربط الصفحة بملف جافا سكريبت خارجي مثال:

شيفرة مباشرة

<script>
const url=new URL(location.href);url.searchParams.delete('m');history.replaceState({}, document.title, url);
</script>

او يمكن استخدام هذا العنصر لربط الصفحة بملف جافاسكريبت خارجي وفي هذه الحالة لابد من استخدام السمة src لتحديد رابط الملف الخارجي مثال لذلك :

<script src="رابط الملف الخارجي"/>

العنصر <base>

هو عنصر يستخدم العنوان الاساسي لجميع الروابط النسبية في الصفحة مثل روابط الصفحات الفرعية وروابط الصور والملفات وجافا سكريبت وغيرها، وهو عنصر يستخدم مرة واحدة فقط داخل مستند (html) مثال:

<base href="mydomin.net"/>

ملاحظة

اي عنصر وصفي يجب أن يكون داخل عنصر الرأس <head>بين وسم البداية لعنصر الرأس ووسم النهاية.
بعض عناصر البيانات الوصفية تعمل في عنصر الجسم ايضا لكن بحدود مثل عنصر <style>و<script>فيما عدا ذلك جميع عناصر البيانات الوصفية يجب ان تكون داخل عنصر الرأس
عناصر البيانات الوصفية لاتظهر للمستخدم مباشرة في الصفحة، هي عبارة عن معلومات ترشد المتصفح او محرك البحث لكيفية التعامل مع الصفحة بطريقة محددة .

تطبيق عملي لوضع عناصر البيانات الوصفية داخل ملف (html)

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

<title>عنوان لصفحة ويب </title>

<link href="رابط صورة ايقونة الصفحة"/>

<meta charset="UTF-8"/>

<meta content="mon, tree, gomy" name="description"/>

<style>
body{
background-color:#115454;
color:red
}
</style>

<script src="مسار الملف الخارجي "/>

جميع العناصر اعلاه يجب ان تكون داخل عنصر الرأس

<head>هنا</head>

<!DOCTYPE html>
<html>

<head>
<title>عنوان لصفحة ويب </title>
<link href="رابط صورة ايقونة الصفحة"/>
<meta charset="UTF-8"/>
<meta content="mon, tree, gomy" name="description"/>
<style>
body{
background-color:#115454;
color:red;
}
</style>
<script src="مسار الملف الخارجي "/>
</head>



<body>...</body>

</html>