ما هي الوسوم الهيكلية؟
هي وسوم جديدة في HTML5 تساعد في تنظيم الصفحة بطريقة أكثر وضوحًا ودلالة لمحركات البحث والمتصفحات.
بدلاً من استخدام <div> في كل شيء، نستخدم وسوم تدل على نوع المحتوى مثل: <header>, <footer>...
لماذا نستخدم الوسوم الهيكلية؟
- لتحسين تنظيم الكود.
- لتسهيل قراءة الصفحة على محركات البحث (SEO).
- لتحسين الوصولية (Accessibility).
أهم الوسوم الهيكلية:
مثال عملي:
<!DOCTYPE html>
<html>
<head>
<title>صفحة منظمة</title>
</head>
<body>
<header>
<h1>مدونة تقنية</h1>
</header>
<nav>
<ul>
<li><a href="#">الرئيسية</a></li>
<li><a href="#">المقالات</a></li>
<li><a href="#">اتصل بنا</a></li>
</ul>
</nav>
<main>
<section>
<h2>آخر المقالات</h2>
<article>
<h3>ما هي HTML؟</h3>
<p>مقال يشرح أساسيات لغة HTML.</p>
</article>
<article>
<h3>CSS للمبتدئين</h3>
<p>دليل مختصر لتعلم تنسيق الصفحات باستخدام CSS.</p>
</article>
</section>
<aside>
<h3>إعلانات</h3>
<p>إعلان مميز هنا.</p>
</aside>
</main>
<footer>
<p>© 2025 جميع الحقوق محفوظة</p>
</footer>
</body>
</html>
ملاحظات:
- هذه الوسوم لا تؤثر على الشكل مباشرة، بل يجب تنسيقها بـ CSS.
- يمكن استخدام
<section>داخل<main>أو داخل<article>حسب الحاجة.
الواجب العملي:
- أنشئ صفحة تحتوي على:
<header>بعنوان الموقع<nav>بقائمة روابط<main>يحتوي على<section>وداخله مقالتان باستخدام<article><footer>فيه عبارة حقوق النشر
ماذا سنتعلّم في الدرس الأخير؟
في الدرس العاشر والأخير من سلسلة HTML، سنتعرف على:
- إدراج الوسائط: الصور، الصوت، الفيديو
- وسم
<img>,<audio>,<video> - وطريقة التحكم بها في الصفحة.