العناصر الدلالية HTML Semantic Elements

العناصر الدلالية هي العناصر ذات المعنى.
ما هي العناصر الدلالية؟What are Semantic Elements
يصف العنصر الدلالي لكل من المتصفح والمطور معناه .
أمثلة على العناصر غير الدلالية: <div> و <span> - لا تخبر شيئًا عن محتواها هي عبارة عن حاوية فقط.
أمثلة على العناصر الدلالية: <form> و <table> و <article> - تحدد محتوياتها بوضوح مثل هذا جدول هذا مقال هذا نموذج ادخال البيانات وهكذا.
العناصر الدلالية Semantic Elements in HTML
تحتوي العديد من مواقع الويب على كود HTML مثل: <"div id = "nav"> <div class = "header"> <div id = "footer"> للإشارة إلى التنقل والعنوان والتذييل.
توجد في HTML بعض العناصر الدلالية التي يمكن استخدامها لتحديد أجزاء مختلفة من صفحة الويب:

<article> المعنى <مقالة>
<aside> المعنى <جانب>
<details> المعنى <التفاصيل>
<figcaption> المعنى <لتحديد تسمية توضيحية للصورة او عنصر>
<figure> المعنى <تكوين>
<footer> المعنى <تذييل>
<header> المعنى <رأس الصفحة>
<main> المعنى <قائمة رئيسية>
<mark> المعنى <علامة>
<nav> المعنى <قائمة روابط>
<section> المعنى <القسم>
<summary> المعنى <ملخص>
<time> المعنى <الوقت>

عنصر <section> في HTML
يحدد العنصر <section> قسمًا في الصفحة.
وفقًا لوثائق HTML الخاصة بـ W3C: "القسم هو تجميع موضوعي للمحتوى ، عادةً مع عنوان."
أمثلة على مكان استخدام عنصر <section>:

فصول
مقدمة
الاخبار
معلومات للتواصل

يمكن عادةً تقسيم صفحة الويب إلى أقسام للمقدمة والمحتوى ومعلومات الاتصال.
مثال
قسمان في الصفحة:

<!DOCTYPE html>
<html>
<body dir="rtl">

<section>
  <h1>تصميم المواقع </h1>
  <p>تصميم المواقع هو عملية تخطيط وتنفيذ محتويات متعددة الوسائط عبر الشبكة (الإنترنت )، بواسطة أنماط التقنيات كلغات التوصيف المناسبة للعرض على متصفحات الإنترنت أو بقية واجهات المستخدم المبنية في الإنترنت.</p>
</section>

<section>
  <h1>الأساسيات التي يقوم عليها أى موقع إنترنت </h1>
  <p>يتكون أى موقع على الإنترنت من ثلاث عناصر أساسية (اسم الموقع و عنوانه - الخادم الذي يوضع عليه ملفات الموقع - ملفات الموقع نفسه التي تعرض للمستخدم). تتطلب عملية تصميم أى موقع التعامل مع هذه العناصر الثلاث لأنها تكمل بعضها ليظهر الموقع على الإنترنت في النهاية..</p>
</section>

</body>
</html>

عنصر <article> في HTML
يحدد العنصر <article> محتوى مستقلًا قائمًا بذاته.
يجب أن يكون للمقال معنى من تلقاء نفسه ، ويجب أن يكون من الممكن توزيعه بشكل مستقل عن باقي موقع الويب.
أمثلة على مكان استخدام العنصر <article>:

مشاركات المنتدى
مشاركات المدونة
تعليقات المستخدم
بطاقات المنتجات
مقالات الصحف

مثال
ثلاث مقالات بمحتوى مستقل ومستقل:

<!DOCTYPE html>
<html>
<body dir="rtl" style="font-family:tahoma;">

<h1> عنصر المقالة (article element)</h1>

<article>
  <h2>Google Chrome</h2>
  <p> Google Chrome هو متصفح ويب تم تطويره بواسطة Google ، وتم إصداره في عام 2008. Chrome هو متصفح الويب الأكثر شعبية في العالم اليوم!!</p>
</article>

<article>
  <h2>Mozilla Firefox</h2>
  <p>Mozilla Firefox هو متصفح ويب مفتوح المصدر تم تطويره بواسطة Mozilla. كان Firefox ثاني أكثر مستعرضات الويب شهرة منذ يناير 2018..</p>
</article>

<article>
  <h2>Microsoft Edge</h2>
  <p>Microsoft Edge هو متصفح ويب تم تطويره بواسطة Microsoft ، وتم إصداره في عام 2015. وقد حل Microsoft Edge محل Internet Explorer..</p>
</article>

</body>
</html>

هل تتداخل <article> في <section> أو العكس ؟
يحدد العنصر <article> محتوى مستقلًا قائمًا بذاته.
يحدد عنصر <section> القسم في الصفحة.
هل يمكننا استخدام التعريفات لنقرر كيفية تداخل هذه العناصر؟ لا لانستطيع!
لذلك ، ستجد صفحات HTML بها عناصر <section> تحتوي على عناصر <article> ، و <article> تحتوي على عناصر <section>.
عنصر <header> في html
يمثل العنصر <header> حاوية لمحتوى تمهيدي أو مجموعة من روابط التنقل.
يحتوي عنصر <header> عادةً على:

عنصر عنوان واحد أو أكثر من (<h1> - <h6>)
شعار أو رمز
معلومات التأليف

ملاحظة: يمكن أن يكون لديك عدة عناصر <header> في صفحةHTML . ومع ذلك ، لا يمكن وضع <header> داخل <footer> أو <address> أو عنصر <header> آخر.
مثال
عنوان <article>:

<!DOCTYPE html>
<html>
<body dir="rtl" style="font-family:tahoma">

<article>
  <header>
    <h1>Google Chrome هو متصفح ويب </h1>
    <p>جوجل كروم:</p>
  </header>
  <p>Google Chrome هو متصفح ويب تم تطويره بواسطة Google ، وتم إصداره في عام 2008. Chrome هو متصفح الويب الأكثر شعبية في العالم اليوم!</p>
</article>

</body>
</html>

عنصر <footer> في HTML
يحدد العنصر <footer> تذييلًا لمستند أو قسم.
عادةً ما يحتوي عنصر <footer> على:

معلومات التأليف
معلومات حقوق التأليف والنشر
معلومات للتواصل
خريطة الموقع
العودة إلى أعلى الروابط
الوثائق ذات الصلة

يمكن أن يكون لديك عدة عناصر <footer> في صفحة واحدة.
مثال
مقطع تذييل في مستند:

<!DOCTYPE html>
<html>
<body>

<footer>
  <p>Author: Hege Refsnes</p>
  <p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>

</body>
</html>

عنصر <nav> في HTML
يحدد العنصر <nav> مجموعة من روابط التنقل.
لاحظ أنه لا يجب أن تكون جميع روابط الصفحة داخل عنصر <nav>. عنصر <nav> مخصص فقط للكتلة الرئيسية لروابط التنقل.
يمكن للمتصفحات ، مثل برامج قراءة الشاشة للمستخدمين المعوقين ، استخدام هذا العنصر لتحديد ما إذا كان سيتم حذف العرض الأولي لهذا المحتوى.
مثال
مجموعة روابط التنقل:

<!DOCTYPE html>
<html>
<body>

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

</body>
</html>

عنصر <aside> في HTML
يحدد العنصر <aside> بعض المحتوى بصرف النظر عن المحتوى الذي تم وضعه فيه (مثل الشريط الجانبي).
يجب أن يكون المحتوى <aside> مرتبطًا بشكل غير مباشر بالمحتوى المحيط.
مثال
اعرض بعض المحتوى من المحتوى الذي تم وضعه فيه:

<!DOCTYPE html>
<html>
<body dir="rtl" style="font-family:tahoma">

<p>زرت أنا وعائلتي مركز The Epcot هذا الصيف. كان الطقس لطيفًا ، وكانت Epcot رائعة! قضيت صيفًا رائعًا مع عائلتي!</p>

<aside>
  <h4>منتزه ترفيهي</h4>
  <p>منتزه ترفيهي في منتجع والت ديزني وورلد يضم معالم جذب مثيرة وأجنحة دولية وألعاب نارية حائزة على جوائز ومناسبات موسمية خاصة.</p>
</aside>

</body>
</html>

عناصر <figure> و <figcaption> في HTML
تحدد علامة <figure> المحتوى المستقل ، مثل الرسوم التوضيحية والرسوم البيانية والصور وقوائم الرموز وما إلى ذلك.
تحدد العلامة <figcaption> تسمية توضيحية لعنصر <figure>. يمكن وضع عنصر <figcaption> باعتباره العنصر الأول أو الأخير لعنصر <figure>.
يحدد العنصر <img> الصورة / الرسم التوضيحي الفعلي.
مثال

<!DOCTYPE html>
<html>
<base href="https://www.w3schools.com/html/" />
<body dir="rtl" style="font-family:tahoma">

<h2>اماكن للزيارة</h2>

<p>من أشهر معالم بوليا المنازل المخروطية الفريدة (ترولي) الموجودة في المنطقة المحيطة بألبيروبيلو ، وهي أحد مواقع التراث العالمي لليونسكو.</p>

<figure>
  <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

</body>
</html>

لماذا العناصر الدلالية؟
وفقًا لـ W3C: "تسمح شبكة الويب الدلالية بمشاركة البيانات وإعادة استخدامها عبر التطبيقات والمؤسسات والمجتمعات."

الدرس السابق الدرس التالي