اسکلت معنادار صفحه

در این فصل چه می‌سازی#

آخر این فصل یک صفحهٔ کوچک ولی واقعی داری — یک وبلاگ ساده — که هر ناحیه‌اش با اسم خودش صدا زده می‌شود: اینجا سرصفحه است، اینجا منوی اصلی، اینجا محتوای اصلی، اینجا یک مطلبِ مستقل، اینجا حاشیه، اینجا پاصفحه. از بیرون شبیه هر صفحهٔ دیگری است، ولی از تویش، مرورگر و موتور جست‌وجو و screen reader دقیقاً می‌دانند هر تکه چیست.

آخر این فصل می‌توانی:

• یک صفحه را با <header>، <nav>، <main> و <footer> به چهار ناحیهٔ اصلی تقسیم کنی
• فرق <article> و <section> را تشخیص بدهی و درست را انتخاب کنی
• <aside> را برای محتوای کناری به‌کار ببری
• بگویی چرا <div> آخرین انتخاب است، نه اولین

قبل از شروع#

• از فصل ۵: فهرست‌ها (<ul> و <li>) — منوی صفحه را با یک فهرست از لینک‌ها می‌سازیم.
• از فصل ۳: <a href> و #id داخل صفحه — لینک‌های منو به بخش‌های همین صفحه وصل می‌شوند.
• از فصل ۲: heading ها و ترتیب درستشان.

مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.

۱. یک صفحه که همه‌اش <div> است#

تا اینجا هر tag یی که یاد گرفتی یک معنا داشت: <h1> یعنی تیتر، <p> یعنی پاراگراف، <ul> یعنی فهرست. حالا با یک tag آشنا می‌شویم که هیچ معنایی ندارد: <div>. <div> فقط یک جعبهٔ خالی است؛ چیزی را دورِ محتوا می‌کشد بی‌آنکه بگوید آن محتوا چیست.

خیلی‌ها کل صفحه را فقط با <div> می‌سازند. بیا ببینیم چه شکلی می‌شود. در آزمایشگاه این را بنویس:

<div>وبلاگ من</div>
<div><a href="#posts">پست‌ها</a> <a href="#about">دربارهٔ من</a></div>
<div>اولین روزم با HTML</div>
<div>امروز یاد گرفتم هر تکه از صفحه یک اسم دارد.</div>
<div>ساختهٔ من — ۱۴۰۵</div>

نگاهش کن. روی صفحه، بد به‌نظر نمی‌رسد: چند خط متن که زیر هم چیده شده‌اند و دو تا لینک. برای چشمِ تو کار می‌کند. مشکل جای دیگری است.

فرض کن کسی که صفحه را نمی‌بیند از این صفحه استفاده می‌کند — با screen reader ای که متن را برایش می‌خواند. این آدم معمولاً بین ناحیه‌های صفحه می‌پرد: «برو به منوی اصلی»، «برو به محتوای اصلی»، «سرصفحه کجاست؟». حالا این صفحه را برایش تصور کن: هیچ‌کدام از این ناحیه‌ها وجود ندارد. یک <div> هیچ‌چیز به screen reader نمی‌گوید، پس این آدم چیزی برای پریدن ندارد — فقط یک تودهٔ صافِ متن، بدون هیچ نقطهٔ گیر. حتی «وبلاگ من» هم تیتر نیست، چون داخل یک <div> گذاشته‌ایمش نه یک <h1>.

همان درسِ موذیِ HTML که از فصل ۱ می‌شناسی: این صفحه خراب است ولی فریاد نمی‌زند. برای تو درست به‌نظر می‌رسد، در حالی که برای ماشین‌ها هیچ ساختاری ندارد. بیا درستش کنیم.

۲. چهار ناحیهٔ اصلی: <header>، <nav>، <main>، <footer>#

تقریباً هر صفحه‌ای روی وب همین چهار ناحیهٔ بزرگ را دارد. HTML برای هرکدام یک tag دارد که دقیقاً همان را می‌گوید:

• <header> — سرصفحه: چیزی که بالای صفحه می‌آید، معمولاً اسم سایت و منو.
• <nav> — ناوبری: منوی اصلیِ لینک‌ها.
• <main> — محتوای اصلی: قلبِ صفحه، چیزی که کاربر برایش آمده.
• <footer> — پاصفحه: پایین صفحه، معمولاً حق‌نشر و لینک‌های فرعی.

حالا همان صفحهٔ فصل قبل را بردار و <div> های بیرونی را با tag درستشان عوض کن. منو را هم — چون یک فهرست از لینک‌هاست — با <ul> می‌سازیم، همان‌طور که در فصل ۵ یاد گرفتی:

<header>
  <h1>وبلاگ من</h1>
  <nav>
    <ul>
      <li><a href="#posts">پست‌ها</a></li>
      <li><a href="#about">دربارهٔ من</a></li>
    </ul>
  </nav>
</header>

<main>
  <p>اولین روزم با HTML</p>
</main>

<footer>
  <p>ساختهٔ من — ۱۴۰۵</p>
</footer>

هیچ چیزِ ظاهری عوض نشد؛ صفحه تقریباً همان‌طور دیده می‌شود. ولی حالا زیرِ پوست، همه‌چیز فرق دارد: آن آدم با screen reader می‌تواند بگوید «برو به <main>» و مستقیم می‌رسد به محتوای اصلی. این ناحیه‌های بزرگ اسم مخصوصی دارند: به‌شان landmark می‌گویند، یعنی نشانه‌هایی که کاربر می‌تواند بینشان بپرد.

✅ چک کن: روی صفحه هنوز همان متن و لینک‌ها را می‌بینی — و همین درست است. کارِ semantic برای چشم نیست؛ برای معناست. اگر چیزی روی صفحه جابه‌جا شده، احتمالاً یک tag را نبسته‌ای.

💡 نکته: فقط یک <main> در هر صفحه. <header>، <nav> و <footer> می‌توانند بیش از یکی باشند (مثلاً هر مطلب <footer> خودش را دارد)، ولی <main> یعنی «محتوای اصلیِ این صفحه» و صفحه فقط یک محتوای اصلی دارد. دو تا <main> یعنی به کاربر می‌گویی «اصلی‌ترین جا اینجاست... نه، آنجاست».

۳. داخل <main>: <article> یا <section>؟#

<main> ناحیهٔ اصلی است، ولی خودش معمولاً از چند تکه ساخته می‌شود. دو tag برای این تکه‌ها داریم که تازه‌کارها بیشتر از هر چیزی سرشان گیج می‌شوند: <article> و <section>. فرقشان یک سؤال ساده است.

<article> یعنی یک تکهٔ مستقل که به‌تنهایی هم معنا دارد — اگر بِکَنی‌اش و جای دیگری بگذاری، باز کامل است. یک پست وبلاگ، یک خبر، یک کامنت، یک کارت محصول: هرکدام یک <article> است.

<section> یعنی یک بخشِ موضوعیِ یک چیز بزرگ‌تر، که یک تیتر دارد ولی به‌تنهایی یک واحدِ کاملِ مستقل نیست — مثل بخش «دربارهٔ من» یا بخش «تماس» در یک صفحه.

بیا داخل <main> هم یک مطلبِ مستقل بگذاریم (<article>) و هم یک بخشِ معرفی (<section>):

<main>
  <article id="posts">
    <h2>اولین روزم با HTML</h2>
    <p>امروز یاد گرفتم هر تکه از صفحه یک اسم دارد.</p>
  </article>

  <section id="about">
    <h2>چند کلمه دربارهٔ من</h2>
    <p>تازه ساختن سایت را یاد می‌گیرم.</p>
  </section>
</main>

هر دو یک <h2> دارند، چون هر دو یک بخشِ نام‌دارند. فرقشان در معناست: آن پست، خودش یک واحدِ کامل است؛ آن معرفی، بخشی از این صفحهٔ خاص است.

⚠️ مواظب باش: <section> را به‌جای یک جعبهٔ همه‌کاره به‌کار نبر. اگر یک بخش تیتر ندارد و موضوعِ مشخصی را جمع نمی‌کند، تقریباً همیشه یا اصلاً به آن نیازی نیست، یا کارش با یک <div> ساده درست است. <section> بی‌تیتر یک نشانهٔ اشتباه است.

یک لغزشِ رایجِ دیگر هم همین‌جا سرِ تودرتویی پیش می‌آید:

🔧 اگر کار نکرد: بخش «دربارهٔ من» تودرتو رفت داخل مطلب، به‌جای اینکه کنارش بیاید؟ احتمالاً </article> را جا انداخته‌ای؛ <section> قبل از بسته‌شدنِ <article> نوشته شده و افتاده تویش. اول <article> را ببند، بعد <section> را باز کن.

۴. <aside>: چیزی که کنارِ محتواست، نه خودِ محتوا#

بعضی چیزها روی صفحه هستند ولی محتوای اصلی نیستند — یک ستونِ لینک‌های مفید، یک جعبهٔ «مطالب مرتبط»، یک نکتهٔ کناری. برای این‌ها <aside> داریم: چیزی که به محتوا مربوط است ولی خودش محتوای اصلی نیست. اگر برش داری، محتوای اصلی هنوز کامل است.

بیا کنارِ صفحه یک <aside> با چند لینک مفید بگذاریم:

<aside>
  <h2>لینک‌های مفید</h2>
  <ul>
    <li><a href="#">راهنمای HTML</a></li>
    <li><a href="#">تمرین‌های بیشتر</a></li>
  </ul>
</aside>

✅ چک کن: یک تیتر «لینک‌های مفید» و دو لینک زیرش می‌بینی. روی صفحه فرقی با یک فهرست عادی ندارد — ولی به ماشین‌ها گفته‌ای «این‌ها حاشیه‌اند، نه اصلِ مطلب».

۵. صفحهٔ کامل و چرا <div> آخرین انتخاب است#

حالا همهٔ تکه‌ها را سرِ هم می‌کنیم. این صفحهٔ کاملِ semantic است — همان صفحهٔ div-ای فصل قبل، ولی این‌بار هر ناحیه اسم خودش را دارد:

<!-- index.html -->
<!DOCTYPE html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <title>وبلاگ من</title>
  </head>
  <body>
    <header>
      <h1>وبلاگ من</h1>
      <nav>
        <ul>
          <li><a href="#posts">پست‌ها</a></li>
          <li><a href="#about">دربارهٔ من</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <article id="posts">
        <h2>اولین روزم با HTML</h2>
        <p>امروز یاد گرفتم هر تکه از صفحه یک اسم دارد.</p>
        <p>دیگر لازم نیست همه‌چیز را داخل یک جعبهٔ بی‌اسم بگذارم.</p>
      </article>

      <section id="about">
        <h2>چند کلمه دربارهٔ من</h2>
        <p>تازه ساختن سایت را یاد می‌گیرم و هر چه یاد بگیرم همین‌جا می‌نویسم.</p>
      </section>
    </main>

    <aside>
      <h2>لینک‌های مفید</h2>
      <ul>
        <li><a href="#">راهنمای HTML</a></li>
        <li><a href="#">تمرین‌های بیشتر</a></li>
      </ul>
    </aside>

    <footer>
      <p>ساختهٔ من — ۱۴۰۵</p>
    </footer>
  </body>
</html>

✅ چک کن: روی صفحه یک وبلاگِ ساده می‌بینی — تیتر، منو، یک مطلب، یک بخش معرفی، ستون لینک‌ها، و پاصفحه. حالا به تعداد <div> ها نگاه کن: صفر. هر تکه اسمِ درستِ خودش را دارد.

پس <div> کِی به‌کار می‌آید؟ آخرین انتخاب. وقتی هیچ tag معناداری برای کارت نمی‌خورد و فقط برای دسته‌بندی یا استایل‌دادن (که در ترم ۲ یاد می‌گیری) به یک جعبه نیاز داری. قانون این است: اول دنبال یک tag معنادار بگرد؛ اگر هیچ‌کدام نمی‌خورد، تازه <div>. نه برعکس. <div> بی‌معنایی‌اش عیب نیست — کارش دقیقاً «هیچ معنایی نده» است؛ فقط جایی استفاده‌اش کن که واقعاً همان را می‌خواهی.

۶. همیار AI: کمکِ درست، اشتباهِ رایج#

اینجا اولین فصلی است که کاملاً به AI می‌پردازیم، چون semantic دقیقاً همان‌جایی است که AI هم بیشترین کمک و هم بیشترین اشتباه را دارد. سه قانونِ ثابتِ کار با AI در کل این خودآموز اینهاست:

🤖 با AI: سه قانون را عیناً به خاطر بسپار: «اول خودت، بعد AI» — اول با معیارهای خودت تصمیم بگیر، بعد نظر AI را به‌عنوان نظرِ دوم بشنو، نه جوابِ نهایی. «خط به خط» — هر چیزی که AI می‌دهد را خط‌به‌خط بخوان و بفهم، هیچ‌وقت یک‌جا کپی نکن. «AI هم اشتباه می‌کند» — و همین الان یک نمونه‌اش را با هم می‌بینیم.

کاربردِ خوب. بعد از اینکه خودت صفحه را semantic کردی، AI یک جفت‌چشم دومِ عالی است:

🤖 با AI: صفحهٔ semantic خودت را به دستیار AI ات بده و بپرس: «هر ناحیهٔ این صفحه را کدام tag باید بپوشاند؟ جایی مانده که هنوز <div> است ولی tag معنادارتری برایش هست؟». جوابش را با چیزی که خودت می‌فهمی بسنج — برای هر پیشنهاد از AI بپرس «چرا؟» و ببین دلیلش با معیارِ ما (این تکه مستقل است یا نه؟ تیتر و موضوع دارد یا نه؟) جور درمی‌آید.

کاربردِ اشتباه. حالا نمونه‌ای که AI با اعتمادبه‌نفس اشتباه می‌گوید. بارها اگر بگویی «semantic صفحه‌ام را بهتر کن»، AI زیادی مشتاق می‌شود: همه‌چیز را داخل <section> می‌پیچد و برای هر ناحیه یک role هم اضافه می‌کند. مثلاً چیزی شبیه این تحویلت می‌دهد:

<section role="banner">
  <h1>وبلاگ من</h1>
  <nav role="navigation">
    <ul>
      <li><a href="#posts">پست‌ها</a></li>
    </ul>
  </nav>
</section>

دو چیز اینجا غلط است، و با همان چیزی که در این فصل فهمیدی می‌توانی ردشان کنی. اول: این ناحیه سرصفحه است، پس <header> درست است نه <section>؛ AI یک بخشِ بی‌تیتر و بی‌موضوع را داخل <section> پیچیده — دقیقاً همان اشتباهی که در بخش ۳ ⚠️ زدیم. دوم: آن role="navigation" یک attribute اضافه است که فقط همان چیزی را تکرار می‌کند که <nav> از قبل می‌گوید. مثل این است که روی یک در، تابلوی «در» بزنی. <nav> خودش به ماشین‌ها می‌گوید «این ناوبری است»؛ نوشتن role="navigation" رویش فقط شلوغی است، و role="banner" روی چیزی که اصلاً باید <header> باشد دوبار غلط است.

درستش همان چیزی است که خودت نوشتی: <header> و <nav>، بی‌هیچ role. این بهترین درسِ «AI هم اشتباه می‌کند» است — AI جمله‌ای می‌سازد که درست به‌نظر می‌رسد، ولی وقتی خط‌به‌خط با فهمِ خودت بسنجی‌اش، می‌بینی دارد پیچیدگیِ بی‌فایده اضافه می‌کند. اول خودت، بعد AI.

واژه‌های تازهٔ این فصل#

کلمه	تلفظ به حروف فارسی	یعنی چه
semantic	سِمَنتیک	معنادار؛ tag یی که می‌گوید محتوا چیست، نه چه شکلی است
landmark	لَندمارک	ناحیهٔ بزرگِ صفحه که کاربر می‌تواند بینشان بپرد (مثل <main>)
header	هِدِر	سرصفحه؛ بالای صفحه، معمولاً اسم سایت و منو
nav	نَو	ناوبری؛ ناحیهٔ منوی اصلیِ لینک‌ها (<nav>)
main	مِین	محتوای اصلیِ صفحه؛ فقط یکی در هر صفحه
article	آرتیکِل	یک تکهٔ مستقل که به‌تنهایی کامل است
section	سِکشِن	یک بخشِ موضوعیِ نام‌دار از یک چیز بزرگ‌تر
aside	اَساید	محتوای کناری که مربوط است ولی اصلِ مطلب نیست
footer	فوتِر	پاصفحه؛ پایین صفحه
div	دیو	جعبهٔ بی‌معنا؛ آخرین انتخاب، وقتی هیچ tag معناداری نمی‌خورد

در فصل بعد#

الان می‌توانی به هر صفحه یک اسکلتِ معنادار بدهی. فصل بعد سراغ یک tag می‌رویم که تازه‌کارها اغلب برای کارِ اشتباه استفاده‌اش می‌کنند: <table>. یاد می‌گیری جدول فقط برای داده‌های جدولی است — نه هیچ‌وقت برای چیدنِ صفحه — و چطور یک جدولِ درست و قابل‌خواندن برای screen reader بسازی.