تنظيم الصفحة بالمعنى

01نظّم أجزاء الصفحة

header كيعرف ببداية الصفحة ولا القسم، وnav فيه التنقّل، وmain فيه المحتوى الرئيسي، وfooter كيسدّ الصفحة. حاول يكون غير main واحد باين فالصفحة.

<header><a href="index.html">Studio</a></header>
<nav aria-label="Main">...</nav>
<main>
  <h1>Our work</h1>
</main>
<footer>Contact and credits</footer>

02Section ولا Article ولا Div؟

استعمل section لمجموعة ديال المحتوى على نفس الموضوع، غالباً بعنوان. واستعمل article لمحتوى مستقل، وdiv إلا بغيتي غير تجمع عناصر بلا معنى خاص.

<section aria-labelledby="services-title">
  <h2 id="services-title">Services</h2>
  <article>
    <h3>Kitchen design</h3>
    <p>A complete design service.</p>
  </article>
</section>

03رتّب المحتوى بشكل منطقي

ترتيب العناصر فالكود خاصو يبقى مفهوم حتى بلا CSS. ما تخليش Sidebar مبدّلة فالشكل تخلّط التنقّل بالكلافي. فضل HTML الأصلي قبل ما تزيد ARIA.

04جرّب براسك

زيد section فيه عنوان وجوج فقرات داخل article.

مثال تقدر تبدلو

<header><p>Workshop journal</p></header>
<main><article><h1>A better workspace</h1><p>Start with the way people use the room.</p></article></main>
<footer><small>Written by the workshop team.</small></footer>

غير HTML و CSS. تشغيل السكريبتات وإرسال الفورمات معطّل.

باش تزيد تفهم

تقدر ترجع لـ شروحات MDN و معيار HTML Living Standard باش تفهم أكثر وتشوف التوصيات الجديدة.