استبدل عناصر div المجهولة بوسوم تمنح المعنى لبنيتك.
افتح هذا الدرس في Kodokonالصفحة المبنية بالكامل من عناصر div تعمل، لكنها لا تقول شيئًا: لا لقارئات الشاشة، ولا لمحركات البحث، ولا للزميل الذي سيتابع كودك بعد ستة أشهر. الوسوم الدلالية تصف دور كل منطقة: header و nav و main و article و section و footer.
<body>
<header>
<nav aria-label="Main navigation">
<a href="/">Home</a>
<a href="/articles">Articles</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<h1>The blog for curious devs</h1>
</main>
<footer>
<p>© 2026 Kodokon. All rights reserved.</p>
</footer>
</body>يجمّع header ترويسة الصفحة (الشعار، التنقل)، و footer معلومات الختام (الإشعارات القانونية، الروابط الثانوية). يحمل main المحتوى الرئيسي ويجب أن يكون فريدًا في الصفحة. يمثّل nav منطقة تنقّل: التنقل الرئيسي، أو مسار تنقّل، أو جدول محتويات.
أدق تمييز: article مقابل section. القاعدة العملية: إذا كان الكتلة تحمل معنى خارج سياقها (مقال مدونة، تعليق، بطاقة منتج)، فهو article. أما إذا كان تجميعًا موضوعيًا داخل محتوى، وله عنوانه الخاص، فهو section.
<main>
<article>
<h1>Understanding semantic HTML</h1>
<section>
<h2>Accessibility</h2>
<p>Screen readers rely on the
structure to navigate.</p>
</section>
<section>
<h2>SEO</h2>
<p>Search engines understand the page better.</p>
</section>
</article>
</main>تمرين ذهني: في صفحة منتج على متجر إلكتروني، كيف كنت ستُنشئ ترميز قائمة تقييمات العملاء؟ كل تقييم له مؤلف وتاريخ ومحتوى قائم بذاته: إذن كل تقييم هو article، وكتلة "تقييمات العملاء" التي تجمعها، مع عنوانها، هي section.