blob: 699c9192c9bd9516d32fb4fcf51e9cabfd492855 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
---
title: دلالات semantics
slug: Glossary/Semantics
tags:
- لغة ترميز النص الفائق
- مسرد
translation_of: Glossary/Semantics
---
<p dir="rtl">في البرمجة فأن كلمة semantics تشير الى معنى قطعه من الكود code. اليوم نتحدث عن معنى العناصر وليس مظهرها. هذا الموضوع الشيق يأخذنا الى ابعد من ذلك من خلال تركيز على معنى كتابة الكود code. وطرح تسائل مهم هو "ماهو تأثير هذا السطر عندما نقوم بتنفيذ الايعاز؟" وربما يأخذنا الى ابعد من ذلك بقليل "ماهو الغرض او الدور الذي يلعبة هذا العنصر في الـ html ؟".</p>
<p dir="rtl">دعنا نأخذ العنصر {{htmlelement("h1")}} كمثال تطبيقي، فهو عنصر دلالي semantics يقوم بإعطاء النص الذي يحيطه القدرة على أن يؤدي دور (أو وظيفة) "مستوى العنونة الأوّل في صفحتك" (أي أوَّل عنوان رئيسي في الصفحة).</p>
<pre class="brush: html notranslate"><h1>هذا مستوى العنونة الأوّل</h1></pre>
<p dir="rtl">يُنسَّق العنصر السابق، إفتراضياً، بحجم خط كبير لجعله عنواناً (بالرغم من أنَّه يمكنك إعادة تصميمه وتنسيقه لتغيير شكله جذرياً)، ولكن الأكثر أهميّة من شكله هو القيمة الدلاليّة (semantic) التي يحملها هذا العنصر ويمكن استخدامها في طرق متعددة، كاستخدامها من قبل محركات البحث عبر اعتبار هذا الجزء من المحتوى (العنوان) كلمة مفتاحيّة مهمة ستُؤثِر على ترتيب الموقع في نتائج البحث (طالع مصطلح {{Glossary("SEO", "تحسين محركات البحث")}})، أو كاستخدام قيمة العنوان الدلاليّة من قبل قارئِات الشاشة كإشارة (أو ما يسمى بعلامة الإرشاد) لمساعدة المستخدمين المتضررين بصرياً على التنقل بين محتويات الصفحة.</p>
<p dir="rtl">على الرغم من كل ما سبق، يمكنك جعل أي عنصر <em>يبدو</em> كعنوان ذو درجة عنونة أولى. دعنا نأخذ المثال أدناه على سبيل المثال:</p>
<pre class="brush: html notranslate"><span style="font-size: 32px; margin: 21px 0;">هل هذا مستوى العنونة الأوّل؟</span></pre>
<p dir="rtl">سيُعرَض هذا العنصر في المتصفح كعنوان من الدرجة الأولى، ولكنه لن يحمل أي قيمة دلاليّة، وبالتالي لن تستفيد من الفوائد الإضافيّة التي تضفيها هذه القيمة كما شُرِحَ أعلاه. وبالتالي، من الأفضل استخدام عنصر ل.ت.ن.ف الصحيح في المكان الصحيح لإنجاز المهمة المخصص لها.</p>
<p dir="rtl"></p>
<h2 dir="rtl" id="الـ_semantics_و_الجافا_سكربت_javaScript">الـ semantics و الجافا سكربت javaScript</h2>
<p dir="rtl">لنفهم الـ semantics في الجافا سكربت javaScript علينا ان نأخذ مثال يقوم بانشاء عنصر ولنقل مثلا عنصر <a href="/en-US/docs/docs/Web/HTML/Element/li"><li></a>. الدالة function التي تقوم بهذا الامر تقوم بأرجاع هذا العنصر ونحن نقوم فقط بارسال محتوى العنصر textContent. حسناً اذا اسمينا الدالة باسم build وقمنا باستخدامها : </p>
<pre dir="rtl">build('Peach');
</pre>
<p dir="rtl">بالتأكيد لم تسطيع فهم عمل هذه الدالة الى في حالة رؤية الكود الداخلي الخاص بها. او البعض يحل المشكلة باستخدام التعليقات comments . وهذا حل ليس مثاليا. </p>
<p dir="rtl">الحال المثالي ان تجعل اسم الدالة يدعى على عملها. بهذا حققت غالية الـ semantics ولا تحتاج الى سطر اضافي لتعليقات comments: </p>
<pre class="notranslate">createLiWithContent('Peach')
</pre>
<p dir="rtl">برأيك من هو الاحلى والافضل الدالة build او createLiWithContent ؟!!! </p>
<h2 dir="rtl" id="عناصر_دلاليّة">عناصر دلاليّة</h2>
<p dir="rtl">يوجد أدناه بعض من عناصر ل.ت.ن.ف الدلاليّة (مأخوذة <a href="http://www.w3schools.com/html/html5_semantic_elements.asp">من هنا</a>):</p>
<ul>
<li>{{htmlelement("article")}}</li>
<li>{{htmlelement("aside")}}</li>
<li>{{htmlelement("details")}}</li>
<li>{{htmlelement("figcaption")}}</li>
<li>{{htmlelement("figure")}}</li>
<li>{{htmlelement("footer")}}</li>
<li>{{htmlelement("header")}}</li>
<li>{{htmlelement("main")}}</li>
<li>{{htmlelement("mark")}}</li>
<li>{{htmlelement("nav")}}</li>
<li>{{htmlelement("section")}}</li>
<li>{{htmlelement("summary")}}</li>
<li>{{htmlelement("time")}}</li>
</ul>
<h2 dir="rtl" id="المزيد_من_التفاصيل">المزيد من التفاصيل</h2>
<h3 dir="rtl" id="معلومات_عامة">معلومات عامة</h3>
<ul dir="rtl">
<li>مقالة عن <a href="https://ar.wikipedia.org/wiki/%D8%B9%D9%84%D9%85_%D8%A7%D9%84%D9%85%D8%B9%D8%A7%D9%86%D9%8A_(%D9%84%D8%B3%D8%A7%D9%86%D9%8A%D8%A7%D8%AA)#%D9%81%D9%8A_%D8%A7%D9%84%D8%A8%D8%B1%D9%85%D8%AC%D8%A9">علم المعاني</a> في الموسوعة الحرَّة</li>
</ul>
<h3 dir="rtl" id="مراجع_تقنيّة">مراجع تقنيّة</h3>
<ul dir="rtl">
<li><a href="/ar/docs/Web/HTML/Element#Inline_text_semantics">مرجع عناصر ل.ت.ن.ف</a> في شبكة مطوري موزيلا</li>
<li>مقالة "<a href="/ar/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Problems_solved_by_HTML5">استخدام الحدود والأقسام في ل.ت.ن.ف</a>" في شبكة مطوري موزيلا</li>
<li>مقالة "<a href="http://www.w3schools.com/html/html5_semantic_elements.asp">عناصر ل.ت.ن.ف الدلاليّة</a>" من موقع w3schools</li>
</ul>
|
