HTML5 العناصر الدلالية

علم الدلالة هو دراسة معاني الكلمات والعبارات في اللغة.

العناصر الدلالية = العناصر ذات المعنى.

ما هي العناصر الدلالية ؟

يصف العنصر الدلالي بوضوح معناه لكل من المتصفح والمطور.

أمثلة للعناصر غير الدلالية : <div>و <span>– لا تخبر شيئًا عن محتواها.

أمثلة للعناصر الدلالية : <form>و <table>، و <article>– تحدد بوضوح محتواها.

دعم المتصفح

يتم دعم العناصر الدلالية HTML5 في جميع المتصفحات الحديثة.

بالإضافة إلى ذلك ، يمكنك “تعليم” المتصفحات القديمة كيفية التعامل مع “العناصر غير المعروفة”.

العناصر الدلالية الجديدة في HTML5

تحتوي العديد من مواقع الويب على تعليمات HTML البرمجية مثل: <div id = “nav”> <div class = “header”> <div id = “footer”>
للإشارة إلى التنقل والرأس والتذييل.

يقدم HTML5 عناصر الدلالية الجديدة لتحديد أجزاء مختلفة من صفحة الويب:

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

HTML5 <section> العنصر

<section>يحدد العنصر قسم في وثيقة.

وفقًا لتوثيق HTML5 الخاص بـ W3C: “القسم عبارة عن تجميع مواضيعي للمحتوى ، وعادةً ما يكون العنوان”

يمكن عادةً تقسيم الصفحة الرئيسية إلى أقسام للإدخال والمحتوى ومعلومات الاتصال.

<section>

  <h1>WWF</h1>

  <p>The World Wide Fund for Nature (WWF) is....</p>

</section>

HTML5 <article> العنصر

<article>يحدد عنصر محتوى مستقلة، قائمة بذاتها.

يجب أن يكون لأي مقال معنى من تلقاء نفسه ، ويجب أن يكون من الممكن قراءته بشكل مستقل عن بقية الموقع.

أمثلة على المكان الذي <article>يمكن استخدام عنصر فيه:

• منتدى آخر
• مشاركة مدونة
• مقالة جريدة

<article>

  <h1>What Does WWF Do?</h1>

  <p>WWF's mission is to stop the degradation of our planet's natural environment,

  and build a future in which humans live in harmony with nature.</p>

</article>

تداخل <article> في <section> أو العكس؟

<article> يحدد عنصر محتوى مستقلة، قائمة بذاتها.

<section>يحدد عنصر القسم في مستند.

هل يمكننا استخدام التعريفات لتحديد كيفية تداخل هذه العناصر؟ لا لانستطيع!

لذلك ، على الإنترنت ، ستجد صفحات HTML <section>تحتوي على <article> تحتوي على عناصر <article>وعناصر تحتوي على <section>.

ستجد أيضًا صفحات <section>تحتوي على <section> تحتوي على عناصر <article>وعناصر تحتوي على <article>.

HTML5 <header> العنصر

<header>يحدد عنصر رأس لمستند أو المقطع.

<header>ينبغي أن تستخدم عنصر كوعاء لمحتوى استهلالي.

يمكن أن يكون لديك عدة <header> في وثيقة واحدة.

يعرّف المثال التالي رأسًا لمقال:

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

HTML5 <footer> العنصر

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

<footer>يجب أن تحتوي على عنصر المعلومات حول عنصر يحتوي على.

يحتوي التذييل عادةً على مؤلف المستند ، ومعلومات حقوق النشر ، وروابط شروط الاستخدام ، ومعلومات الاتصال ، إلخ.

قد يكون لديك العديد من <footer>العناصر في وثيقة واحدة.

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:[email protected]">
  [email protected]</a>.</p>
</footer>

HTML5 <nav> العنصر

<nav>يحدد العنصر مجموعة من ارتباطات التنقل.

لاحظ أنه لا ينبغي أن تكون جميع روابط الوثيقة داخل <nav>عنصر ما. و <nav>يهدف العنصر فقط لكتلة كبير من ارتباطات التنقل.

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

HTML5 <aside> العنصر

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

<aside>ينبغي أن يرتبط المحتوى إلى محتوى المحيطة بها.

<p>My family and I visited The Epcot center this summer.</p>

<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

عناصر HTML5 <figure> و <figcaption>

الغرض من شرح الصورة هو إضافة شرح مرئي لصورة.

في HTML5 ، يمكن تجميع صورة وتعليق معًا في <figure>:

<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>

و <img>يحدد عنصر الصورة، و <figcaption> يحدد التسمية التوضيحية.

لماذا العناصر الدلالية؟

باستخدام HTML4 ، استخدم المطورين أسماء المعرفات / الفئات الخاصة بهم لعناصر النمط: الرأس ، أعلى ، أسفل ، تذييل ، قائمة ، التنقل ، الرئيسي ، الحاوية ، المحتوى ، المقالة ، الشريط الجانبي ، topnav ، إلخ.

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

مع عناصر HTML5 الجديدة ( <header> <footer> <nav> <section> <article>) ، سيصبح ذلك أسهل.

وفقًا لـ W3C ، الويب الدلالي: “يسمح بمشاركة البيانات وإعادة استخدامها عبر التطبيقات والشركات والمجتمعات”.

العناصر الدلالية في HTML5

يوجد أدناه قائمة أبجدية للعناصر الدلالية الجديدة في HTML5.