عناصر معاني HTML5

النحو (مصدره من اليونانية القديمة) يمكن تعريفه بأنه دراسة معاني اللغة.

العناصر النحوية هي العناصر التي تحتوي على نحو.

ما هو العنصر النحوي؟

توضح العناصر النحوية للغة المتصفح والمطورين معانيها.

غير النحوأمثلة على العناصر: <div>،<span> - لا يمكن تقديم معلومات عن محتواها.

النحوأمثلة على العناصر: <form>،<table>،<img> - تعريف محتواها بشكل واضح.

دعم المتصفح

نعم نعم نعم نعم نعم

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

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

للتعرف على المزيد من المعرفة في هذا الفصل، يرجى زيارة متصفح 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

عناصر معاني HTML5

عنصر <section> في HTML5

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

حسب وثائق HTML الخاصة بمجلس W3C: "القسم (section) هو مجموعة محتوى لها موضوع، عادة ما يكون له عنوان."

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

مثال

<section>
   <h1>WWF</h1>
   <p>المؤسسة العالمية لحماية الطبيعة (WWF) هي....</p>
</section>

جرب ذلك بنفسك

عنصر <article> في HTML5

تعين عناصر <article> محتوى مستقلاً ومضموناً.

يمكن للوثيقة أن تحتوي على معنى خاص بها وأن تقرأ بشكل مستقل عن محتوى الموقع الآخر.

تطبيقات عنصر <article>:

  • منتدى
  • مدونة
  • أخبار

مثال

<article>
   <h1>ماذا يقوم به WWF؟</h1>
   <p>مهمة WWF هي وقف تدهور بيئة كوكبنا الطبيعية,</p>
  وبناء مستقبل يعيش فيه البشر في وئام مع الطبيعة.</p>
</article>

جرب ذلك بنفسك

الإطار语义ية المدمجة

في معيار HTML5، تعين عناصر <article> ككتل مرتبطة ومضمونة كاملة.

تعين عناصر <section> ككتل عناصر مرتبطة.

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

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

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

عنصر <header> في HTML5

تعين عناصر <header> رأس الوثيقة أو الفصل.

يجب استخدام عناصر <header> كعناصر حاوية للمحتوى التدchلي.

يمكن أن يحتوي الوثيقة على عدة عناصر <header>.

في المثال التالي تم تعريف رأس الوثيقة:

مثال

<article>
   <header>
     <h1>ماذا يقوم به WWF؟</h1>
     <p>مهمة WWF:</p>
   </header>
   <p>مهمة WWF هي وقف تدهور بيئة كوكبنا الطبيعية,</p>
  وبناء مستقبل يعيش فيه البشر في وئام مع الطبيعة.</p>
</article>

جرب ذلك بنفسك

عنصر <footer> في HTML5

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

يجب أن توفر عناصر <footer> معلومات عن العناصر المضمونة.

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

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

مثال

<footer>
   <p>مكتوب من قبل: Hege Refsnes</p>
   <p>معلومات الاتصال: <a href="mailto:someone@example.com">
  <a href="mailto:someone@example.com">someone@example.com</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>زارت عائلتي مركز إيبيكوت هذا الصيف.</p>
<aside>
   <h4>مركز إيبيكوت</h4>
   <p>مركز إيبيكوت هو منتزه في عالم ديزني، ولاية فلوريدا.</p>
</aside>

جرب ذلك بنفسك

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

في الكتب والصحف، غالباً ما تكون الأعمدة التي تزين الصور شائعة.

يستخدم العنصر العنوان (الوصف) لضمان أن تكون هناك تفسيرات مرئية للصور.

من خلال HTML5، يمكن دمج الصور والأعمدة في <figure> في العنصر:

مثال

<figure>
   <img src="pic_mountain.jpg" alt="منبر السر" width="304" height="228">
   <figcaption>الصورة 1. - منبر السر، النرويج.</figcaption>
</figure>

جرب ذلك بنفسك

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

لماذا يستخدم عناصر HTML5؟

إذا كنت تستخدم HTML4، فإن المطورين سيستخدمون أسماء الخصائص التي يفضلونها لضبط أنماط عناصر الصفحة:

الرأس، الأعلى، الأسفل، التذييل، القائمة، التوجيه، الرئيسي، المضخم، المحتوى، المقالة، الرف الجانبي، الأعلى من الرأس، ...

بهذا، لا يمكن للمتصفح التعرف على محتوى الصفحة الصحيح.

ومن خلال عناصر HTML5 مثل：<header> <footer> <nav> <section> <article>، يمكن حل هذه المشكلة بسهولة.

وفقاً للـ W3C، الشبكة الذكية:

“يسمح بمشاركة وتكرار البيانات عبر التطبيقات والشركات والجماعات.”

عناصر النسيج في HTML5

فيما يلي قائمة مرتبة حسب الحروف لأحدث عناصر النسيج لـ HTML5.

هذه الروابط تشير إلى دليل HTML الكامل.

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