بنية المستند والموقع

هناك عناصر تقسّم الصفحة إلى أجزاء ذات معنى: <header> لمنطقة المقدمة أو الشعار و<nav> للتنقل الرئيسي و<main> للمحتوى المركزي (واحد في الصفحة) و<article> لمادة مستقلة و<section> لقسم موضوعي و<aside> لمعلومات جانبية و<footer> للجزء السفلي.

<body>
  <header><h1>My Blog</h1></header>
  <nav><a href="/">Home</a> <a href="/posts">Posts</a></nav>
  <main>
    <article>
      <h2>First post</h2>
      <p>Text of the post…</p>
    </article>
    <aside>Related links</aside>
  </main>
  <footer>© Nibras Code</footer>
</body>

تتنقل قارئات الشاشة بين هذه الأجزاء بسرعة وتفهم محركات البحث بنية الصفحة بشكل أفضل ويصبح الكود أوضح. ولا يُستخدم <div> و<span> العامان إلا إذا لم يوجد عنصر دلالي مناسب واحتجت مجموعة لـ CSS.

• حافظ على تسلسل العناوين داخل الأقسام أيضًا.
• اكتب القوائم كقوائم داخل <nav>.
• اجعل لكل <section> عنوانًا.

<nav aria-label="Main">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

قبل البرمجة ارسم صناديق الصفحة على الورق: الأعلى والتنقل والمحتوى الرئيسي واللوحة الجانبية والأسفل. ثم اختر لكل صندوق العنصر الدلالي المناسب. وحين يتكرر المخطط نفسه في الموقع يشعر الزائر بالألفة.