العناصر الدلالية في HTML5
نبني هيكل الصفحة بوسوم تقول معناها، كما رسمناه في المخطط. ⏱ نحو 20 دقيقة.
- تذكر العناصر الدلالية في
HTML5ومعنى كل منها. - تبني هيكل صفحة كاملة بها.
- تشرح فائدتها لقارئات الشاشة ومحركات البحث.
- تفرّق بين
divوspan.
١وسم يقول ما هو
في الدرس 6 رسمت الصفحة أجزاءً: ترويسة ومحتوى وتذييل. في HTML5 لكل جزء وسم دلالي، أي وسم اسمه يدل على معناه:
| الوسم | معناه |
|---|---|
<header> | الترويسة: الشعار والعنوان، وغالبًا التنقل. |
<nav> | مجموعة روابط التنقل الرئيسية. |
<main> | المحتوى الرئيسي للصفحة. واحد فقط في كل صفحة. |
<section> | قسم له موضوع، ويبدأ عادة بعنوان h2. |
<article> | محتوى مستقل يُفهم وحده: خبر، أو تدوينة، أو بطاقة منتج. |
<aside> | محتوى جانبي مرتبط: إعلان، أو روابط ذات صلة، أو معلومات إضافية. |
<footer> | التذييل: الحقوق والتواصل. |
٢صفحة كاملة بالعناصر الدلالية
<header> <h1>مقهى بُنّ</h1> <nav> <a href="#">الرئيسية</a> | <a href="#">القائمة</a> | <a href="#">اتصل بنا</a> </nav></header> <main> <section> <h2>عروض الأسبوع</h2> <p>خصم 20٪ على القهوة الباردة.</p> </section> <article> <h2>كيف نحمّص قهوتنا؟</h2> <p>نحمّص البن كل صباح بكميات صغيرة.</p> </article></main> <aside> <p>ساعات العمل: 7 صباحًا – 11 مساءً</p></aside> <footer> <p>© 2025 مقهى بُنّ</p></footer>
لاحظ أن الشكل لم يتغيّر كثيرًا عن صفحة بلا هذه الوسوم! العناصر الدلالية لا تغيّر الشكل، بل المعنى. أما الشكل فتتولاه CSS لاحقًا.
٣شاهد الهيكل
أضفنا هنا سطر CSS يرسم إطارًا منقّطًا حول كل عنصر دلالي ويكتب اسمه، لترى كيف تحتوي العناصر بعضها:
٤لماذا نهتم بالمعنى؟
| المستفيد | كيف يستفيد؟ |
|---|---|
| قارئات الشاشة | فاقد البصر يقفز مباشرة إلى <main> أو <nav> بدل سماع الصفحة كلها. |
| محركات البحث | تفهم أين المحتوى المهم، فيظهر موقعك أفضل في النتائج. |
| المطوّرون | الكود أوضح للقراءة: <footer> أفهم من <div class="bottom">. |
٥div و span: حاويات بلا معنى
أحيانًا نحتاج حاوية لا معنى خاصًّا لها، فقط لنجمع عناصر ونعطيها شكلًا بـ CSS:
| الوسم | نوعه | مثال |
|---|---|---|
<div> | حاوية كتلية: تبدأ في سطر جديد وتأخذ العرض كله. | مجموعة بطاقات، أو صندوق تنبيه. |
<span> | حاوية سطرية: داخل السطر بحجم محتواها. | كلمة نريد تلوينها داخل فقرة. |
<div>صندوق أول</div><div>صندوق ثانٍ يبدأ في سطر جديد</div><p>السعر <span style="color:green">15 ريالًا</span> فقط.</p>
القاعدة: إن وُجد وسم دلالي مناسب فاستخدمه، وإلا فاستخدم <div> أو <span>.
توقّع وتحقّق
أين نضع روابط القائمة الرئيسية؟
nav للتنقل.خبر مستقل يمكن نشره وحده:
article محتوى مستقل.كم عنصر main في الصفحة؟
حاوية سطرية لتلوين كلمة داخل فقرة:
span سطرية.الخلاصة
headerللترويسة، وnavللتنقل، وmainللمحتوى الرئيسي (واحد فقط)، وfooterللتذييل.sectionقسم بموضوع، وarticleمحتوى مستقل، وasideمحتوى جانبي.- العناصر الدلالية تغيّر المعنى لا الشكل.
divحاوية كتلية وspanسطرية، ونستخدمهما حين لا يوجد وسم دلالي مناسب.
تحدٍّ برمجي: هيكل موقع مركز التدريب
متوسطحوّل مخطط مركز التدريب الذي رسمته في الدرس 6 إلى هيكل HTML بالعناصر الدلالية (بلا تنسيق).
- header فيه h1 باسم المركز، و nav فيه 3 روابط.
- main فيه قسمان section، لكل منهما عنوان h2.
- في أحد القسمين 3 بطاقات article لثلاث دورات، لكل منها h3.
- aside فيه معلومة جانبية.
- footer فيه رمز الحقوق.
👀 اعرض شكل الناتج المطلوب
- header فيه h1 و nav بثلاثة روابط على الأقل.
- main واحد فقط.
- قسمان section داخل main، لكل منهما h2.
- 3 عناصر article، لكل منها h3.
- aside فيه نص.
- footer فيه ©.
💡 تلميح 1
section><h2>دوراتنا</h2> ثم ثلاثة <article>.💡 تلميح 2
حاول بنفسك أولًا؛ للمسألة أكثر من حلّ صحيح.
<header> <h1>مركز المبرمج</h1> <nav> <a href="#">الرئيسية</a> <a href="#">الدورات</a> <a href="#">اتصل بنا</a> </nav></header> <main> <section> <h2>دوراتنا</h2> <article><h3>بايثون للمبتدئين</h3><p>4 أسابيع</p></article> <article><h3>تطوير الويب</h3><p>6 أسابيع</p></article> <article><h3>قواعد البيانات</h3><p>3 أسابيع</p></article> </section> <section> <h2>لماذا نحن؟</h2> <p>مدربون معتمدون وتطبيق عملي.</p> </section></main> <aside> <p>التسجيل مفتوح حتى نهاية الشهر.</p></aside> <footer> <p>© 2025 مركز المبرمج</p></footer>