تصف محتواها بوضوح للمتصفح والمطور.
عكس <div> الغامض، توضح عناصر مثل <article> و <table> نوع المحتوى.
استخدم <nav> للتنقل، <header> للرأسة، و <footer> للتذييل بدلًا من <div>.
يصبح موقعك أكثر وضوحًا وقابلية للقراءة ومحركات البحث تفهمه أفضل
العديد من مواقع الويب تحتوي على أكواد HTML
وذلك للإشارة إلى التنقل والرأسة والتذييل.
ولكن، يوفر HTML عناصر دلالية مخصصة لتحديد أجزاء مختلفة من الصفحة:
<article>– مقالة<aside>– مقال جانبي<details>– تفاصيل قابلة للتوسيع<figcaption>– تعليق توضيحي على صورة<figure>– صورة مع تعليق توضيحي (مجوعة)<footer>– تذييل الصفحة<header>– رأسة الصفحة<main>– محتوى الصفحة الرئيسي<mark>– جزء مهم ملفت للانتباه<nav>– قائمة تنقل<section>– قسم (موضوع فرعي)<summary>– ملخص (لعنصر<details>)<time>– تاريخ أو وقت
استخدام العناصر الدلالية يجعل موقعك أكثر وضوحًا وقابلية للقراءة، ويساعد محركات البحث على فهم محتواه وضبط نتائج البحث بشكل أكثر دقة.
عنصر <section> في HTML:
يعرّف عنصر <section> قسماً أو جزءاً مميزاً ضمن مستند HTML. وبحسب وثائق W3C: “القسم هو تجميع موضوعي للمحتوى، عادةً مع عنوان.”
أمثلة على استخدامات عنصر <section>:
- فصول
- مقدمة
- عناصر إخبارية
- معلومات الاتصال
فعلى سبيل المثال، يمكن تقسيم صفحة ويب عادةً إلى أقسام للمقدمة والمحتوى ومعلومات الاتصال.
نموذج:
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>
عنصر <article> في HTML:
يحدد عنصر <article> محتوى مستقلاً بذاته. بمعنى آخر، يجب أن يكون المحتوى داخل هذا العنصر مفهومًا لوحده، وقابلًا للتوزيع بشكل مستقل عن بقية موقع الويب.
أمثلة على استخدامات عنصر <article>:
- تعليقات المنتديات
- تدوينات المدونات
- تعليقات المستخدمين
- بطاقات المنتجات
- مقالات الصحف
مثال:
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
مثال 2: استخدام CSS لتنسيق عنصر <article>:
<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}
.all-browsers > h1, .browser {
margin: 10px;
padding: 5px;
}
.browser {
background: white;
}
.browser > h2, p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
<h1>Most Popular Browsers</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</article>
</body>
</html>
تداخل عناصر <article> و <section> في HTML
هل يمكن تحديد ترتيب التداخل بين <article> و <section> استنادًا إلى معانيهما؟
لا، ليس بالضرورة!
بالرغم من أن عنصر <article> يمثل محتوى مستقلًا بذاته، و <section> يحدد قسمًا عامًا في المستند، فإن ترتيب التداخل بينهما مرن وليس مقيدًا بقواعد صارمة.
إذن، ستجد صفحات HTML تحتوي على:
- عناصر
<section>تتضمن عناصر<article>: قد تمثل الأقسام موضوعات رئيسية تشتمل على عدة مقالات مستقلة. - عناصر
<article>تتضمن عناصر<section>: قد يمثل <article> محتوى طويلاً يحتوي على أقسام فرعية مميزة.
الحكم: يعتمد ترتيب التداخل على طبيعة المحتوى وتنظيمه الفعال.
استخدم <section> لتمييز أقسام موضوعية كبيرة يمكن تقسيمها إلى وحدات أصغر، واستخدم <article> لمحتوى مستقل بذاته داخل تلك الأقسام أو بشكل منفصل.
أمثلة:
- موقع إخباري: قسم “التكنولوجيا” قد يحتوي على عدة مقالات مستقلة باستخدام
<article>، بينما قد يحتوي قسم “شرحات تقنية” على مقال طويل مع أقسام فرعية باستخدام<section>. - مدونة شخصية: تدوينة طويلة عن السفر قد تحتوي على أقسام منفصلة عن “التمهيد للسفر” و”الوجهات السياحية” و”التجارب”، ويمكن استخدام
<section>لتمييز هذه الأقسام داخل التدوينة.
استمع لصوتك الداخلي! أهم قاعدة هي اعتماد المنطق الذي يوضح هيكلة وتسلسل المحتوى بشكل واضح للجميع.
عنصر <header> في HTML
يعمل عنصر <header> في HTML كحاوية للمحتوى التمهيدي أو مجموعة من روابط التنقل.
غالبًا ما يحتوي عنصر <header> على:
- عنوان رئيسي أو أكثر (من
<h1>إلى<h6>) - شعار أو أيقونة
- معلومات التأليف (مثل اسم المؤلف أو تاريخ النشر)
ملحوظة: يمكنك إضافة عدة عناصر <header> في مستند HTML واحد. ومع ذلك، لا يمكن وضع <header> داخل <footer> أو <address> أو داخل عنصر <header> آخر.
مثال:
إصدار header لمقال <article>:
<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>
عنصر <footer> في HTML
يعرّف عنصر <footer> تذيلاً لمستند أو قسم في صفحة ويب. غالبًا ما يحتوي على:
- معلومات المؤلف أو الناشر
- حقوق الملكية الفكرية (العلامة التجارية)
- معلومات الاتصال
- خريطة الموقع
- روابط “العودة إلى الأعلى”
- مستندات ذات صلة
إذًا، يمكنك تضمين عدة عناصر <footer> ضمن وثيقة واحدة.
مثال:
تذييل لمستند:
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>
عنصر <nav> في HTML
يعرّف عنصر <nav> مجموعة من روابط التنقل الرئيسية في صفحة الويب.
احرص! ليس كل الروابط في الصفحة يجب أن تكون داخل <nav>. الغرض من هذا العنصر هو تجميع روابط التنقل الرئيسية فقط، وليس أي رابط عشوائي.
يستخدم المتصفحات، مثل برامج قراءة الشاشة للمستخدمين ذوي الإعاقة، هذا العنصر لتحديد ما إذا كان سيتم تأجيل عرض هذا المحتوى في البداية أم لا.
مثال:
مجموعة روابط تنقل رئيسية:
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
عنصر <aside> في HTML
يمثل عنصر <aside> محتوىً جانبيًا، يشبه حائطًا جانبيًا أو شريطًا جانبيًا، ضمن الصفحة. يجب أن يكون هذا المحتوى ذا صلة غير مباشرة بالمحتوى الذي يحيط به.
أمثلة على استخدامات <aside>:
- قائمة تنقل منفصلة عن المحتوى الرئيسي
- مربع “عن المؤلف” في مقالة
- إعلانات مصممة لتبدو وكأنها جزء من الصفحة وليس المحتوى الرئيسي
- مجموعة من روابط ذات صلة بالمحتوى المحيط ولكنها ليست ضرورية لفهمه
مثال:
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>
مثال 2: استخدام CSS لتنسيق عنصر <aside>:
<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<aside>
<p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
</body>
</html>
عناصر <figure> و <figcaption> في HTML
- عنصر
<figure>: يمثل هذا العنصر حاوية لمحتوى مستقل بذاته، مثل الصور والرسوميات والرموز البرمجية المقتطفة والمخططات وغيرها. - عنصر
<figcaption>: يحدد هذا العنصر تعليقًا توضيحيًا لمحتوى عنصر<figure>، ويمكن وضعه أولًا أو أخيرًا داخل محتوى العنصر. - عنصر
<img>: يستخدم هذا العنصر لتحديد الصورة أو الرسم التوضيحي الفعلي داخل عنصر<figure>.
مثال:
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
لماذا العناصر الدلالية في HTML مهمة؟
يؤكد W3C: “يسمح الويب الدلالي بتبادل البيانات وإعادة استخدامها عبر التطبيقات والمؤسسات والمجتمعات.”
إذن، ما المقصود بالويب الدلالي؟
الويب الدلالي هو الويب الذي يفهم معنى محتواه، وليس مجرد شكله. وهذا يعتمد بشكل أساسي على استخدام العناصر الدلالية في HTML.
العناصر الدلالية في HTML – ملخص سريع
العناصر الدلالية توضح معنى المحتوى الذي تحتويه، على عكس العناصر العامة كالـ <div> أو <span>.
إليك قائمة مختصرة ببعض العناصر الدلالية الشائعة ووصفها:
<article>: محتوى مستقل بذاته (مقال، تدوينة)<aside>: محتوى جانبي منفصل عن المحتوى الرئيسي (قائمة تنقل، شريط جانبي)<details>: تفاصيل إضافية يمكن إظهارها أو إخفاؤها<figcaption>: شرح توضيحي لصورة أو رسم (داخل عنصر<figure>)<figure>: محتوى بصري مستقل (صورة، رسم، مخطط)<footer>: تذييل الصفحة أو القسم<header>: رأس الصفحة أو القسم<main>: المحتوى الرئيسي للصفحة<mark>: نص مميز/ملفت للانتباه<nav>: روابط التنقل الرئيسية<section>: قسم داخل الصفحة<summary>: عنوان مرئي لعرض/إخفاء تفاصيل عنصر<details><time>: تاريخ/وقت (تاريخ نشر مقال، وقت حدث)
