هي مجموعة من عناصر HTML ذات دلالة او معنى. هي لا تقوم بتغير شكل الصفحة او اعادة ترتيبها، لكنها تعطي دلالة للعناصر التي بداخلها. كثيرا ما نجد صفحات الويب مقسمة مثل :
كثير من صفحات الويب تحتوي على:
- عنوان الصفحة
<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>