HTML - Semantic elements العناصر الجديدة
HTML - عناصر HTML5 الجديدة
قدّمت HTML5 مجموعة من العناصر الجديدة التي تُستخدم لتحسين تنظيم وبنية الصفحات الإلكترونية بطريقة أكثر دلالة (semantic). تساعد هذه العناصر محركات البحث، ومساعدات الوصول (Accessibility Tools)، والمطورين على فهم أفضل لمحتوى الصفحة.
🔸 أهم العناصر الجديدة في HTML5
<header>— يُستخدم لتحديد رأس (مقدمة) الصفحة أو القسم.<footer>— يُستخدم لتحديد تذييل الصفحة أو القسم.<nav>— يُستخدم لتحديد روابط التنقل داخل الموقع.<section>— يُستخدم لتقسيم المحتوى إلى أقسام منطقية.<article>— يُستخدم لعرض محتوى مستقل مثل التدوينات أو الأخبار.<aside>— يُستخدم للمحتوى الجانبي أو الإعلانات أو الملاحظات الجانبية.<main>— يُحدد المحتوى الأساسي في الصفحة.<figure>و<figcaption>— تُستخدم لعرض الصور مع تعليق توضيحي.<mark>— لتحديد النص المميز.<time>— لتحديد الوقت أو التاريخ.
🧪 مثال توضيحي على استخدام هذه العناصر
<!DOCTYPE html>
<html>
<head>
<title>موقع HTML5 تجريبي</title>
</head>
<body>
<header>
<h1>مرحبا بك في موقعي</h1>
<nav>
<a href="#home">الرئيسية</a> |
<a href="#about">من نحن</a>
</nav>
</header>
<main>
<section>
<h2>مقال مميز</h2>
<article>
<h3>عنوان المقال</h3>
<p>هذا مقال مكتوب باستخدام عنصر <article> في HTML5.</p>
</article>
</section>
<aside>
<p>إعلان جانبي أو ملاحظة مفيدة.</p>
</aside>
</main>
<footer>
<p>جميع الحقوق محفوظة © 2025</p>
</footer>
</body>
</html>
📌 ملاحظات
- استخدام العناصر الدلالية يُحسن تجربة المستخدم ويُعزز الوصول (Accessibility).
- أغلب هذه العناصر مدعومة في جميع المتصفحات الحديثة.
- من الأفضل استخدام هذه العناصر بدلًا من
<div>العام لتحقيق بنية أكثر وضوحًا.
تعليقات
إرسال تعليق