انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 47
دورة لغة HTML

العناصر الدلالية في لغة HTMLHTML Semantic Elements

سوف تتعلم في هذا الدرس جميع العناصر الدلالية في لغة HTML، وهي readable elements العناصر المقروءة من محركات البحث ومطوري المواقع، والتي تساعد في تنظيم وفهم أوامر HTML.

ابدأ التعلّم استكشف الأمثلة
THE BUILDING BLOCKS OF THE WEBHTML
index.html
1<h1>Hello, web.</h1>
وسم الفتحالمحتوىوسم الإغلاق
النتيجة في المتصفح Hello, web.
كل صفحة رائعة تبدأ بعنصر.
أقسام الدرس
8
الأمثلة
7
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
13,779
محتوى الدرس
في هذا الدرس 8تصفّح المواضيع

HTML semantic elements العناصر الدلالية في لغة HTML

الدلالة في HTML هي معنى العنصر ودوره في المحتوى، وليست مجرد شكل اسمه أو موضعه على الشاشة. مثلًا يعبّر <table> عن بيانات جدولية، و<img> عن صورة، و<link> عن علاقة بمورد آخر.

العنصران <div> و<span> حاويتان عامتان لا تحددان دورًا خاصًا مثل المقال أو التنقل. نستخدمهما عندما لا يوجد عنصر أدق يعبّر عن المحتوى.

أضاف HTML5 عناصر دلالية لتنظيم الصفحة مثل <header> و<footer>؛ لكن الدلالة ليست حكرًا على العناصر الجديدة. استخدم العنصر الذي يصف المحتوى فعلًا، مما يساعد المطورين والتقنيات المساعدة ومحركات البحث على فهم بنيته. يبقى الشكل والتخطيط من مسؤولية CSS.


non-semantic العناصر غير الدلالية في لغة HTML:

  • <div>
  • <span>


semantic elements العناصر الدلالية في لغة HTML5:

  • <article>
  • <aside>

  • <details>

  • <figcaption>

  • <figure>

  • <footer>

  • <header>

  • <main>

  • <mark>

  • <nav>

  • <section>

  • <summary>

  • <time>
العناصر الدلالية في لغة HTML

HTML header element عنصر header في لغة HTML

يمثل عنصر <header> محتوى تمهيديًا أو وسائل تنقل للصفحة أو للقسم الذي ينتمي إليه. قد يكون رأس الموقع العام، أو مقدمة مقال أو قسم، ولا يفرض بنفسه موضعًا بصريًا أعلى الشاشة.


يحتوي جزء header على:

  • navigation bar قائمة التنقل الرئيسية للموقع.
  • logo شعار موقع الويب أو تطبيق.
  • contact Information بيانات التواصل الأساسية.

HTML header element

يضع المثال روابط تمهيدية داخل header؛ ويمكن استخدام header مناسب داخل مقال أو قسم أيضًا.

HTML 
<header>
  <ul>
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">About</a>
    </li>
    <li>
        <a href="#">Products</a>
    </li>
    <li>
        <a href="#">Contact</a>
    </li>
  </ul>
</header>
جرّب بنفسك

HTML section element عنصر section في لغة HTML

يُستخدم عنصر <section> لتمثيل مجموعة محتوى مترابطة بموضوع واحد، وليست بالضرورة نصوصًا فقط، حيث تحتوي هذه المجموعة على عنوان رئيسي وفقرات نصية تشرح هذا العنوان.

يسهّل استخدم عنصر <section> عمل مطوري مواقع الويب، ويسهل عليهم أيضا فهم الأجزاء المُتعلقة ببعضها.


يمكن أن يحتوي عنصر <section> على:

  • contact information بيانات اتصال.
  • introduction مقدمة موضوع.
  • paragraphs فقرات نصية من موضوع.
  • news أخبار.

HTML section element

يمكن أن يتم وضع عنصر HTML section أسفل عنصر header.

HTML 
<section>
  <h1>Lorem Ipsum is simply</h1>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of     
    type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s 
    with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</section>
جرّب بنفسك

HTML article element عنصر article في لغة HTML

يستخدم عنصر <article> في لغة HTML لتمثيل محتوى مكتمل أو مستقل يمكن إعادة استخدامه أو نشره منفصلًا، مثل:

  • posts المنشورات.
  • comments تعليقات المستخدمين.
  • newspaper مقالات إخبارية.

HTML article element

لا يرتبط article بموضع بصري محدد أو بشرط أن يأتي أسفل header؛ المعيار هو استقلال المحتوى ومعناه.

HTML 
<article>
  <h2>HTML Header</h2>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley       
        of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 
        1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</article>
جرّب بنفسك

HTML nav element عنصر nav في لغة HTML

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

HTML nav element

تستخدم قائمة التنقل الرئيسية للموقع داخل عنصر nav element في HTML.

HTML 
<nav>
  <ul>
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">About</a>
    </li>
    <li>
        <a href="#">Products</a>
    </li>
    <li>
        <a href="#">Contact</a>
    </li>
  </ul>
</nav>
جرّب بنفسك

HTML aside element عنصر aside في لغة HTML

يمثل <aside> محتوى مرتبطًا بالمحتوى المحيط ارتباطًا جانبيًا ويمكن فصله عنه، مثل معلومات إضافية أو اقتباس جانبي. قد يُعرض كشريط جانبي، لكنه يظهر دون CSS أيضًا؛ نستخدم CSS لتحديد موقعه وتخطيطه، وليس لإعطاء العنصر معناه.

HTML aside element

يستخدم المثال aside لمحتوى إضافي؛ وضعه يمين الصفحة أو يسارها يحتاج تخطيطًا باستخدام CSS.

HTML 
<aside>
  <h1>Left sidebar</h1>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</p>
</aside>
جرّب بنفسك

HTML figure and figcaption elements عنصر figure وعنصر figcaption في لغة HTML

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

يستخدم عنصر <figcaption> لكتابة نصوص توضيحية لعنصر <figure>، حيث يمكن وضع عنصر <figcaption> باعتباره العنصر الأول أو الأخير لعنصر <figure>.

HTML figure and figcaption Elements

استخدام العناصر <figure> و <figcaption> في لغة HTML لعرض الصور ونصوصها التوضيحية.

HTML 
<figure>
  <img src="https://www.closetag.com/images/mountain.jpg" alt="Mountain">
  <figcaption>Mountain</figcaption>
</figure>
جرّب بنفسك

HTML footer element عنصر footer في لغة HTML

يُستخدم عنصر <footer> لتمثيل تذييل القسم الأقرب الذي ينتمي إليه، أو تذييل الصفحة عند عدم وجود قسم محيط؛ ولا يفرض مكانًا بصريًا ثابتًا أسفل الشاشة، وكمثال على هذه المعلومات نذكر: 

  • authorship information معلومات المؤلف.
  • copyright information حقوق الملكية.
  • contact information معلومات التواصل.
  • sitemap خريطة الموقع.
  • back to top links رابط الذهاب مرة أخرى لأعلى الصفحة.

HTML footer element

يمكن في عنصر HTML footer إضافة روابط وشعار الموقع أسفل الصفحة.

HTML 
<footer>
  <p>Powered By Closetag</p>
  <p><a href="mailto:[email protected]">mailto:[email protected]</a></p>
</footer>
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات9

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 9 مفهومةأول بطاقة، أول خطوة
01 Semantic دلالت الألفاظ
للمراجعة
02 Elements عناصر
للمراجعة
03 Non-Symantec لاتدل علي الألفاظ
للمراجعة
04 Header عنوان
للمراجعة
05 Article محتوي مقالي
للمراجعة
06 Form نموذج
للمراجعة
07 Table جدول
للمراجعة
08 Section قسم أو جزء
للمراجعة
09 Footer الجزء السفلي
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات3

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 3 مفهومةأول بطاقة، أول خطوة
01 HTML5 HTML5
Hypertext Markup Language Version 5
لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت إصدار 5
للمراجعة
02 Nav Nav
navigation bar
شريط تنقل
للمراجعة
03 Aside Aside
Side bar
شريط جانبي
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

5أسئلة 3أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي5 أسئلة تنتظرك
01

من العناصر التي تصنف ك non-Symantec هي

02

من العناصر التي تصنف ك Symantec هي

03

يستخدم العنصر <section > في ؟

04

يستخدم العنصر article في ؟

05

يستخدم العنصر <Footer> في إضافة المعلومات التي تظهر بأخر الصفحة من الأسفل ؟