هي مجموعة من عناصر HTML ذات دلالة او معنى. هي لا تقوم بتغير شكل الصفحة او اعادة ترتيبها، لكنها تعطي دلالة للعناصر التي بداخلها. كثيرا ما نجد صفحات الويب مقسمة مثل :
![](https://arabituts.com/wp-content/uploads/2020/07/structure-2-1-2.png)
![](https://arabituts.com/wp-content/uploads/2020/07/structure-2-1.png)
كثير من صفحات الويب تحتوي على:
- عنوان الصفحة
<header>
و يحتوي في الغالب على اسم الموقع و علامتة (logo). - متنقل
<nav>
وهو الجزء الذي يحتوي على قوائم التنقل. - اقسام
<section>
مثلا لعرض المنتجات . - المقال
<article>
وهو المحتوى الرئيس مثل ذلك الدرس. - الجانب
<aside>
وقد يحتوي على بعض الادوات المساعدة. - التفاصيل
<details>
وهي تحتوي على بعض التفاصيل التي قد تظهر وتختفي (اقرا المزيد). - الشكل
<figure>
وهي كل الاقسام التي تحتوى على صور او مخططات او اشكال وغيرها. - الملخص
<summary>
وهو يحتوي على ملخصات للمقالات او للاقسام او لاي محتوى. - التذيل
<footer>
يحتوي على مجموعة من المعلومات الخاصة بالموقع.
تلك العناصر مجرد معنى ووجودها في الصفحة لا يغير من شكل الصفحة*. وقد تحتوي بعض من تلك العناصر على بعضها. فمثلا عادة ما يحتوي المقال على <header>
في بدايته ويكون عنوان المقال. وقد يحتوى المقال على مجموعة من الاقسام <section>
.
* ما يغير في شكل الصفحة ويجعل بعض العناصر على يمين الصفحة او اول الصفحة هو ملفات CSS او صفة <style> للعناصر.
ما اهمية العناصر الدلالية؟
العناصر الدلالية لا تغير من الشكل، اذن ما اهميتها؟ اكثر من يستفاد من تلك العناصرهي المتصفحات و محركات البحث و مطوريين الويب. تستطيع مثلا محركات البحث مثل جوجل فهم اجزاء الصفحات واين تقع المعلومات المهمة و بالتالي تظهر الصفحات في نتائج البحث. كذلك المتصفحات قد تتعامل مع العناصر المختلفة بطرق مختلفة.
مثال:
<html> <head> <style> </style> </head> <body> <header> <h1> ArabiTuts عربي توتس </h1> </header> <article> <h1> مقال </h1> <p> محتوى المقال </p> <p> محتوى المقال </p> <p> محتوى المقال </p> </article> <footer> جميع الحقوق محفوظة </footer> </body> </html>
نستطيع تغير طريقة العرض باستخدام ال CSS كالاتي:
<html> <head> <style> .header { padding: 20px; text-align: center; background: #13aff0; color: white; } .nav{ border:1px solid #ccc; border-width:1px 0; list-style:none; margin:0; padding:0; text-align:center; } .nav li{ display:inline; } .nav a{ display:inline-block; padding:10px; } .article{ text-align: right; } .article h1{ text-align: center; } .footer{padding: 20px; text-align: center; background: #13aff0; position: fixed; left: 0; bottom: 0; width: 100%; } </style> </head> <body> <header class="header"> <h1> ArabiTuts عربي توتس </h1> </header> <nav class="nav"> <ul> <li><a href="#">HTML</a> </li> <li><a href="#">CSS</a> </li> </ul> </nav> <article class="article"> <h1> مقال </h1> <p> محتوى المقال </p> <p> محتوى المقال </p> <p> محتوى المقال </p> </article> <footer class="footer"> جميع الحقوق محفوظة </footer> </body> </html>