أ. لماذا يجب أن تهتم بلغة اتش.تي.إم.إل الدلالية Semantic HTML ؟

الدلالات Semantics هي معاني الكلمات أو العبارات في لغة ما. في "اتش.تي.إم.إل" HTML، وهي لغة، للعناصر لها دلالاتها Semantic الخاصة أيضًا. في الواقع، يمكنك اعتبار مستند "اتش.تي.إم.إل" HTML document الخاص بك بمثابة مستند نصي text document. وكما هو الحال في المستندات النصية، قد يحتوي على عناوين headings وصور images ونصوص غامقة bold text وتنسيقات أخرى other formatting.

يشير المعنى الدلالي The semantic meaning لعنصر ما إلى المعلومات الخاصة التي ينقلها هذا العنصر.

المعنى الدلالي The semantic meaning لعنصر p، على سبيل المثال، هو فقرة نصية:

<p>

.دعوني أخبركم عن عطلتي الرائعة في باريس
!رأيتُ برج إيفل الرائع عن قرب

</p>
			

معظم العناصر لها معنى دلالي semantic meaning. عنصر div من العناصر القليلة جدًا التي لا تحمل هذا المعنى. ولكن ما أهمية هذا؟

أولاً وقبل كل شيء، يضمن استخدام لغة "اتش.تي.إم.إل" الدلالية المناسبة proper semantic HTML أفضل تجربة للمستخدمين الذين يستخدمون تقنيات مساعدة مثل قارئات الشاشة screen readers. كما يمكن للغة "اتش.تي.إم.إل" الدلالية semantic HTML تحسين ترتيب موقعك في نتائج البحث search rankings، وهو ما يُعرف بتحسين محركات البحث SEO.

أخيرًا، يُمكن لاستخدام العناصر الدلالية الصحيحة correct semantic elements أن يُحسّن تجربة تطوير improve your development experience موقعك. فبدلًا من البحث بين العديد من عمليات التطوير للعثور على "شريط التنقل" navigation bar، يُمكنك تعديل عنصر nav مباشرةً ومعرفة التغييرات التي تُجريها. ستتعلم في هذا القسم المزيد عن هذه المواضيع، وكيفية استخدام العناصر الدلالية semantic elements، وأهمية "اتش.تي.إم.إل" الدلالية Importance of Semantic HTML.

ب. لماذا من المهم وجود تسلسل هيكلي جيد Good Structural Hierarchy ؟

أهم جانب في إنشاء تسلسل هيكلي Structural Hierarchy هو الاستخدام الأمثل لعناصر العناوين Heading elements. تُرقّم عناصر العناوين بالترتيب h1، ثم h2، ثم h3، وهكذا. تُمثّل هذه الأرقام مستوى عنوان The heading level كل عنصر.

كما هو الحال في المستندات النصية text document، لا يُنصح باستخدام مستويات العناوين heading levels بترتيب غير صحيح in the incorrect order. عنصر h1 هو عنوانك الرئيسي your top-level heading. نادرًا ما تجد أكثر من عنصر واحد في الصفحة، وعادةً ما يأتي قبل كل المحتوى.

عنصر h2 هو عنوانك الفرعي your subheading. يجب أن يأتي دائمًا بعد h1، وقد يأتي بعد نص تمهيدي introductory text. بخلاف عنصر h1، يمكنك إضافة عدة عناصر h2 على صفحتك. ستستخدم هذا غالبًا لتحديد أقسام المحتوى المختلفة to delineate different sections of content.

باتباع هذا النمط the pattern، يجب أن يأتي عنصر h3 دائمًا بعد عنصر h2. أي أنه لا يجب عليك الانتقال مباشرةً من h1 إلى h2. مع ذلك، يمكنك استخدام عدة عناصر عناوين multiple heading elements في نفس المستوى at the same level.

على سبيل المثال، هذا الكود code صحيح:

<section>
	<h1>عالم "اتش.تي.إم.إل"</h1>
	<h2>تعلم تطوير الواجهة الأمامية</h2>
	<h2>تعلم تطوير الواجهة الخلفية</h2>
</section>
			

لكن هذا الكود code غير صحيح، لأن h3 يسبق h2:

<section>
	<h1>عالم اتش.تي.إم.إل</h1>
	<h3>مقدمة في اتش.تي.إم.إل</h3>
	<h2>تعلم تطوير الواجهة الأمامية</h2>
</section>
			

انقل عنصر h2 فوق h3 ليصبح دلاليًا بشكل صحيح Semantically correct :

<section>
	<h1>عالم اتش.تي.إم.إل</h1>
	<h2>مقدمة في اتش.تي.إم.إل</h2>
	<h3>تعلم تطوير الواجهة الأمامية</h3>
</section>
			

قد يكون من المغري be tempting استخدام عنصر عنوان محدد a specific heading element نظرًا لأسلوبه، مثل h1 للنصوص الكبيرة large text:

<article>
	<article>
		إليكم بعض
		<h1>نص كبير</h1>
	</article>
</article>
			

بدلاً من ذلك، عليك اختيار العنصر المناسب The appropriate element لهيكل مستندك for your document structure واستخدام CSS لتحقيق التصميم the styling الذي تريده.

يُعد استخدام التسلسل الهرمي الصحيح The right hierarchy أمرًا بالغ الأهمية Important لسهولة الوصول For Accessibility. تعتمد التقنيات المساعدة Assistive technologies، مثل قارئات الشاشة screen readers، على بنية صفحة الويب لتحديد كيفية تحليلها to parse وإظهارها announce للمستخدم to the user. قد يُوحي استخدام عنصر h3 بعد عنصر h1 لمستخدم قارئ الشاشة screen reader user بأنه قد تجاوز محتوى مهمًا عن طريق الخطأ، نظرًا لعدم وجود عنصر h2.

البنية السليمة Proper structure مهمة أيضًا لتحسين محركات البحث SEO. تستخدم محركات البحث Search engines الأتمتة Automation لتحليل to parse محتوى صفحتك الإلكترونية The content of your web page وتحديد متى وأين يجب أن تظهر في النتائج show up in results. إذا كانت بنيتك your structure غير صحيحة is malformed، فقد لا تتمكن محركات البحث search engines من ترتيبك جيدًا في نتائج البحث ذات الصلة in the relevant search results.

أخيرًا، بناءً depending على مدى خطأ بنيتك your structure، قد لا يكون "اتش.تي.إم.إل" HTML صالحًا تقنيًا technically valid. عند حدوث ذلك، يجب على متصفح الويب web browser تخمين guess ما كنت تنوي فعله بدقة. وقد لا يكون ما يخمنه هو ما تريده على الإطلاق at all.

كما تعلمتم اليوم، هناك العديد من الأسباب many reasons لاستخدام هيكلية هرمية مناسبة The Proper Structural Hierarchy لصفحتكم. ضعوا ذلك في اعتباركم Keep this in mind عند بناء مشاريع جديدة as you build new projects.

ج. ما الفرق بين اتش.تي.إم.إل العرضي Presentational HTML و اتش.تي.إم.إل الدلالي Semantic HTML ؟

تُركز لغة "اتش.تي.إم.إل" التقديمية Presentational HTML على مظهر المحتوى وأسلوبه. في بداياتها، كان المطورون يستخدمون عناصر مثل المركز center و الكبير big و الخط font. ولكن في تطوير الويب الحديث، لا ينبغي استخدام هذه الأنواع من العناصر، نظرًا لقيودها limitations وتأثيرها السلبي negative impact على إمكانية الوصول accessibility والصيانة maintainability.

العديد من عناصر "اتش.تي.إم.إل" التقديمية Presentational HTML elements أصبحت قديمة، أي أنها لم تعد مُوصى بها. هناك طرق أفضل للحصول على نفس النتائج. مع ذلك، من المفيد معرفة وجودها، لذا سنلقي نظرة على بعض الأمثلة.

عنصر font، عنصر قديم يُستخدم لتحديد حجم ولون خط النص.

فيما يلي مثال لعنصر font:

<font size="5" color="blue">هذا النص باللون الأزرق وكبير.</font>
			

يُعيّن هذا المثال لون color النص إلى blue وحجمه size إلى القيمة 5. يتراوح نطاق سمة size بين 1 و 7، حيث 1 هو الأصغر و7 هو الأكبر. القيمة الافتراضية The default value هي 3، إذا لم تُعيّن القيمة صراحةً.

على الرغم من أن هذا العنصر لا يزال يعمل، فلا يجب عليك استخدامه لأنه يجب دائمًا تعيين حجم الخط ولونه في CSS، وليس في "اتش.تي.إم.إل" HTML.

العنصر center هو عنصر آخر تم إهماله ويستخدم لمركز المحتوى to center the content أفقيًا horizontally داخل الحاوية container الخاصة به.

فيما يلي مثال لعنصر center الذي يحتوي على نص text وعنصر فقرة a paragraph element:

<center>
	.هذا النص في المنتصف
	<p>.اتش.تي.إم.إل رائع</p>
</center>

<p>.مثال نص آخر</p>
			

والآن، لدينا العنصر big. وهو عنصر "اتش.تي.إم.إل" عرضي قديم deprecated presentational HTML آخر، يجعل النص المُحاط the enclosed text أكبر بمقدار مستوى واحد one level bigger من النص المحيط به its surrounding text .

لدينا هنا مثالاً يحدد فقرة مكونة من جزئين:

<p>
	.حجم خط هذا النص عادي
	<big>.هذا النص أكبر</big>
	.نص آخر
</p>
			

تذكر أن حجم الخط font size يجب أن يتم تعيينه دائمًا باستخدام CSS، لذلك لا يجب عليك استخدام هذا العنصر في "اتش.تي.إم.إل" الحديث modern HTML.

كانت هذه أمثلة لعناصر "اتش.تي.إم.إل" التقديمية Presentational HTML Elements. لكن جميعها أصبحت قديمة ولم تعد مُوصى بها. فماذا يُنصح باستخدامه بدلاً منها؟ لنرَ.

"اتش.تي.إم.إل" الدلالي Semantic HTML هو الآن الأسلوب المُوصى به. فهو يصف describes محتوى العناصر content of the elements، مما يُسهّل قراءتها وفهمها وصيانتها.

تستطيع محركات البحث Search engines فهم موقعك الإلكتروني بسهولة عند استخدام لغة "اتش.تي.إم.إل" الدلالية Semantic HTML. كما أنها مفيدة لتسهيل الوصول Accessibility، لأن قارئات الشاشة screen readers تحتاج إلى معلومات دلالية Semantic information لوصف to describe محتوى صفحة الويب.

تتضمن أمثلة عناصر "اتش.تي.إم.إل" الدلالية Semantic HTML Elements ما يلي:

• عنصر header لتحديد رأس المستند the header of the document أو القسم section.
• عنصر "قسم التنقل" The navigation section element، nav، للأقسام التي تحتوي على "روابط تنقل" navigation links.
• عنصر section لتجميع grouping المعلومات ذات الصلةrelated information.
• عنصر figure للرسوم التوضيحية illustrations والمخططات diagrams.

هذا مثال لعنصر header يحتوي على عنصر "قسم التنقل" navigation section:

<header>	
	<nav>
		<a href="#">الصفحة الرئيسية</a>
		<a href="#">صفحة حول</a>
		<a href="#">صفحة المنتجات</a>
		<a href="#">صفحة الاتصال</a>
	</nav>	
</header>	
			

تُظهر العناصر الدلالية The Semantic Elements غرضها بوضوح ضمن بنية "اتش.تي.إم.إل" The HTML Structure. هناك العديد من عناصر "اتش.تي.إم.إل" الدلالية المختلفة. ستجد بالتأكيد العنصر الذي يناسب احتياجات مشروعك.

عمل رائع. الآن تعرف الفرق بين "اتش.تي.إم.إل" العرضي Presentational والدلالي Semantic : "اتش.تي.إم.إل" الدلالي Semantic HTML يصف المحتوى، بينما "اتش.تي.إم.إل" العرضي Presentational HTML يركز على المظهر.