ماهي العناصر الدلالية في لغة html؟
تعد العناصر النصية الدلالية Semantic Elements من الأدوات الرئيسية في لغة
HTML
حيث تساعد في
تحسين هيكل
المستند وترتيبه، وتحسين تجربة المستخدم وسهولة فهم المحتوى. تعتبر هذه العناصر مهمة للغاية في بناء صفحات
الويب السليمة والمتوافقة مع معايير الويب.
العناصر الدلالية Semantic Elements توفر معلومات حول المحتوى في الصفحة وعلاقته بالصفحة بأكملها. وتتيح هذه العناصر للمطورين إمكانية تحديد أهمية الأجزاء المختلفة في صفحة الويب. ومن أمثلة العناصر الدلالية Semantic Elements الشائعة في
HTML
:
1) عنصر
header
:
هو العنصر الذي يستخدم لتحديد المقطع العلوي من صفحة الويب، وعادةً ما يحتوي على شعار الموقع والقائمة الرئيسية والعنوان الرئيسي للصفحة. يستخدم كود العنصر
header
بالشكل التالي:
HTML
<header>
<h1>عنوان الصفحة</h1>
<nav>
<ul>
<li><a href="#">الصفحة الرئيسية</a></li>
<li><a href="#">من نحن</a></li>
<li><a href="#">اتصل بنا</a></li>
</ul>
</nav>
</header>
2) عنصر
nav
:
يستخدم هذا العنصر لتحديد القائمة الرئيسية في صفحة الويب، ويتم استخدامه داخل العنصر
header
بشكل شائع.
يمكن استخدام عنصر nav
بالشكل التالي:
HTML
<header>
<nav>
<ul>
<li><a href="#">الصفحة الرئيسية</a></li>
<li><a href="#">من نحن</a></li>
<li><a href="#">اتصل بنا</a></li>
</ul>
</nav>
</header>
3) عنصر
section
:
يستخدم عنصر
section
لتقسيم المحتوى إلى أقسام مختلفة، وعادةً ما يتم استخدامه مع العناصر
الداخلية مثل عنصر article
. يمكن استخدام عنصر section
بالشكل التالي:
HTML
<section>
<h2>عنوان المقطع الأول</h2>
<p>نص المقطع الأول</p>
</section>
<section>
<h2>عنوان المقطع الثاني</h2>
<p>نص المقطع الثاني</p>
</section>
<section>
<h2>عنوان المقطع الثالث</h2>
<p>نص المقطع الثالث</p>
</section>
4) عنصر
article
:
يستخدم هذا العنصر لتحديد مقالة مستقلة في صفحة الويب، ويمكن استخدامه لتحديد المحتوى الرئيسي في صفحة الويب
مثل الأخبار والمقالات والمدونات. يمكن استخدام عنصر article
بالشكل التالي:
HTML
<article>
<h2>عنوان المقالة،</h2>
<p>نص المقالة</p>
</article>
5) عنصر
footer
:
هو العنصر الذي يستخدم لتحديد المقطع السفلي من صفحة الويب، وعادةً ما يحتوي على معلومات الاتصال وحقوق
النشر وروابط الشبكات الاجتماعية. يستخدم العنصر footer
بالشكل التالي:
HTML
<footer>
<p>جميع الحقوق محفوظة © 2023</p>
</footer>
وهكذا إنتهينا من هذا الدرس سنضيف المزيد من العناصر الدلالية في المستقبل وهكذا مع جميع الدرورس شكرا لكم و وفقكم الله.
هذه صورة معبرة لكي تفهم أكثر: