متن: عنوان و پاراگراف — ترم ۱ آیرو

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

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

صفحهٔ نهنگ آبی با یک تیتر اصلی، دو عنوانِ بخش و چند پاراگراف، باز شده در مرورگر

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

شش سطح عنوان (<h1> تا <h6>) را بشناسی و بگویی چرا سطحشان مهم است نه اندازه‌شان
متن را با <p> به پاراگراف‌های درست تقسیم کنی
توضیح بدهی چرا چند فاصله یا چند خطِ خالیِ پشت‌سرهم در HTML به یک فاصله تبدیل می‌شود
یک کلمه را «مهم» (<strong>) یا «تأکیدشده» (<em>) کنی — بر اساس معنا، نه شکل

قبل از شروع#

از فصل ۱: اسکلت کامل یک صفحه (<!DOCTYPE html>، <html>، <head>، <body>، <title>) و اینکه هر element از یک tag باز، محتوا و یک tag بسته ساخته می‌شود.
مثل همیشه فقط یک مرورگر لازم داری — یا همان آزمایشگاه این فصل. چیزی برای نصب نیست.

۱. عنوان‌ها: شش سطح، نه شش اندازه#

در فصل قبل <h1> را دیدی: «مهم‌ترین تیترِ صفحه». ولی عنوان فقط یکی نیست. HTML شش سطح عنوان دارد، از <h1> تا <h6>.

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

<h1> = نامِ روی جلد. تیتر اصلیِ کل صفحه.
<h2> = عنوانِ یک فصل. یک بخش بزرگ از صفحه.
<h3> = عنوانِ یک بخشِ کوچک‌ترِ داخلِ همان فصل.

و همین‌طور تا <h6> که کم‌ترین استفاده را دارد. راستش بیشترِ صفحه‌های واقعی فقط تا <h3> یا <h4> جلو می‌روند؛ اگر به <h5> و <h6> رسیدی، معمولاً یعنی متنت خیلی تودرتو شده و بهتر است بخش‌هایش را ساده‌تر کنی. ولی هر شش‌تا وجود دارند تا وقتی لازم شد، جای درست را داشته باشی.

بیا اولین دوتا را بسازیم. در آزمایشگاه، داخل <body> این را بنویس:

<h1>نهنگ آبی</h1>
<h2>چقدر بزرگ است؟</h2>

✅ چک کن: باید دو خط ببینی که خطِ اول (<h1>) بزرگ‌تر و ضخیم‌تر از خطِ دوم (<h2>) است.

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

۲. چرا ترتیب مهم است، نه اندازه#

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

نمودار outline: یک میلهٔ بلند بالا برای h1، زیرش میله‌های کوتاه‌ترِ کمی تورفته برای h2، و زیرِ آن‌ها میله‌های تورفته‌ترِ h3

پس یک قانون ساده هست: از یک سطح به سطحِ بعدی برو، از رویشان نپر. بعد از <h1> سراغ <h2> می‌روی، نه یک‌راست <h4>. یک صفحه که از <h1> می‌پرد به <h4>، مثل کتابی است که از «فصل ۱» می‌پرد به «بخش ۱ـ۱ـ۱ـ۱» — انگار دو سطحِ میانی گم شده‌اند. کسی که با چشم نگاه می‌کند شاید متوجه نشود، ولی outline خراب است.

و نتیجهٔ همهٔ این‌ها یک عادتِ کلیدی است: عنوان را بر اساس جایش در outline انتخاب کن، نه بر اساس اینکه چقدر بزرگ دیده می‌شود. اگر متنی از نظرِ معنا یک بخشِ اصلی است، <h2> است — حتی اگر دلت بخواهد کوچک‌تر دیده شود. اگر بخشی کوچک‌تر است، <h3> است — حتی اگر دلت بخواهد درشت‌تر باشد.

⚠️ مواظب باش: هیچ‌وقت یک سطحِ عنوان را برای اندازه‌اش انتخاب نکن («این را <h4> می‌کنم چون کوچک‌تر است»). این پرکاربردترین اشتباهِ عنوان‌هاست. اندازه کارِ CSS است که در ترم ۲ شروع می‌شود؛ آن‌جا می‌توانی هر عنوانی را هر اندازه‌ای کنی، بدون اینکه به معنایش دست بزنی.

فهمیدنِ اینکه outline صفحه‌ات سالم است یا نه، همیشه با چشم آسان نیست — و اینجا دقیقاً یک جایی است که AI می‌تواند یک جفت‌چشمِ دوم باشد.

🤖 با AI: عنوان‌های صفحه‌ات را (فقط خودِ خط‌های <h1> تا <h6>) کپی کن و از دستیار AI ات بپرس: «آیا ترتیب این heading ها برای accessibility درست است، یا جایی از یک سطح پریده‌ام؟». جوابش را با چیزی که خودت می‌بینی چک کن: صفحه‌ات را مثل فهرستِ یک کتاب از بالا به پایین بخوان و ببین آیا واقعاً همان جایی که AI می‌گوید پرش هست. AI هم اشتباه می‌کند — به‌خصوص وقتی متنِ صفحه را ندارد و فقط دارد حدس می‌زند.

چالش: کدام heading؟

اول خودت فکر کن یا امتحان کن — بعد اینجا را باز کن.

۳. پاراگراف، و فضای خالی که جمع می‌شود#

عنوان‌ها اسکلتِ متن‌اند؛ گوشتِ آن پاراگراف‌هاست. <p> یعنی «این یک پاراگراف است» — یک تکهٔ متن که با هم یک واحد معنایی می‌سازد. زیرِ عنوان اولت یک پاراگراف اضافه کن:

<h2>چقدر بزرگ است؟</h2>
<p>یک نهنگ آبی بالغ می‌تواند تا سی متر دراز شود. فقط زبانش به‌اندازهٔ یک فیل وزن دارد.</p>

✅ چک کن: حالا زیرِ عنوان یک پاراگرافِ معمولی می‌بینی.

خب، تازه‌کارها اینجا یک عادتِ طبیعی دارند: برای اینکه دو تکه متن را از هم جدا کنند، چند بار Enter می‌زنند یا چند فاصلهٔ اضافه می‌گذارند. بیا ببینیم مرورگر با این کار چه می‌کند. این را دقیقاً با همین فاصله‌ها و خطهای خالی بنویس:

<p>نهنگ آبی          بزرگ‌ترین جانور است.


و از هر دایناسوری هم بزرگ‌تر است.</p>

نتیجه را نگاه کن. آن فاصلهٔ بزرگ و آن خطهای خالی که گذاشتی غیب شده‌اند. مرورگر همه را در یک خط، با فقط یک فاصله بین کلمه‌ها، نشان می‌دهد:

نهنگ آبی بزرگ‌ترین جانور است. و از هر دایناسوری هم بزرگ‌تر است.

این یک قانونِ همیشگیِ HTML است: هر تعداد فاصله، tab یا خطِ خالیِ پشت‌سرهم، به یک فاصلهٔ ساده تبدیل می‌شود. به این «جمع‌شدنِ فضای خالی» می‌گویند. یعنی نمی‌توانی با زدنِ Enter یا Space پاراگراف بسازی؛ باید صریح بگویی «اینجا یک پاراگراف تمام شد و پاراگراف بعدی شروع شد». و راهش همان <p> است. درستش این است:

<p>نهنگ آبی بزرگ‌ترین جانور است.</p>
<p>و از هر دایناسوری هم بزرگ‌تر است.</p>

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

💡 نکته: حالا که می‌دانی مرورگر فضای خالی را جمع می‌کند، یک خبرِ خوب هم دارد: تورفتگی و خطهای خالیِ داخلِ کدت برای خودت آزادند و هیچ ضرری ندارند، چون مرورگر جمعشان می‌کند. پس کدت را مرتب و خوانا بنویس؛ روی خروجی اثری نمی‌گذارد.

با این حال، همین جمع‌شدنِ فضای خالی گاهی باعث یک اشتباهِ رایج می‌شود:

🔧 اگر کار نکرد: دو پاراگراف چسبیده به هم‌اند و فاصله ندارند؟ یا هر دو جمله را داخلِ یک <p> گذاشته‌ای، یا </p> اولی را جا انداخته‌ای. هر پاراگراف باید <p> و </p> مالِ خودش را داشته باشد.

۴. مهم و تأکید: `<strong>` و `<em>`#

وقتی حرف می‌زنی، همهٔ کلمه‌ها را یک‌جور نمی‌گویی؛ روی بعضی‌ها تأکید می‌کنی. HTML هم دو راه برای همین دارد، و هر دو دربارهٔ معنا هستند، نه شکل.

<strong> یعنی «این تکه مهم است» — جدی، فوری، یا حیاتی. <em> (کوتاه‌شدهٔ emphasis) یعنی «این را با تأکید بخوان» — و همین می‌تواند معنیِ جمله را عوض کند. ببین این دو جمله چطور با یک <em> معنیشان فرق می‌کند:

<p>من <em>این</em> را نگفتم.</p>
<p>من این را <em>نگفتم</em>.</p>

اولی یعنی «چیزِ دیگری گفتم، این را نه». دومی یعنی «اصلاً چنین چیزی نگفتم». همان کلمه‌ها، ولی <em> جای تأکید را عوض کرده و معنا با آن عوض شده. یک screen reader هم دقیقاً همین را می‌فهمد: لحنش را روی کلمهٔ داخلِ <em> عوض می‌کند.

حالا در صفحهٔ نهنگ، مهم‌ترین ادعای تیترت را <strong> کن و در بخشِ غذا یک تأکیدِ کوچک با <em> بگذار:

<h1>نهنگ آبی</h1>
<p>نهنگ آبی <strong>بزرگ‌ترین جانوری است که تا امروز روی زمین زندگی کرده</strong> — حتی بزرگ‌تر از هر دایناسوری.</p>

<h2>چه می‌خورد؟</h2>
<p>با آن جثهٔ عظیم، غذایش <em>موجودهای بسیار ریزی</em> است، نه ماهی‌های بزرگ.</p>

✅ چک کن: جملهٔ داخلِ <strong> را ضخیم می‌بینی و عبارتِ داخلِ <em> را کج. ولی این فقط ظاهرِ پیش‌فرضِ مرورگر است؛ کاری که واقعاً کردی این بود که به ماشین‌ها گفتی «این تکه مهم است» و «این را با تأکید بخوان».

💡 نکته: شاید جای دیگری <b> و <i> را دیده باشی که همان ضخیم و کج را می‌دهند. فرقشان این است که <b> و <i> هیچ معنایی ندارند — فقط ظاهر. ما <strong> و <em> را انتخاب می‌کنیم چون هم همان شکل را می‌دهند و هم معنا دارند. اگر روزی فقط ظاهر بخواهی و نه معنا، جوابش باز هم CSS است، نه <b>.

۵. حالا عمداً خرابش کن#

بهترین راهِ فهمیدنِ اینکه <strong> دربارهٔ معناست نه ظاهر، این است که از آن سوءاستفاده کنی و نتیجه را ببینی. در آزمایشگاه، یک پاراگرافِ کامل را داخلِ <strong> بگذار:

<p><strong>یک نهنگ آبی بالغ می‌تواند تا سی متر دراز شود. فقط زبانش به‌اندازهٔ یک فیل وزن دارد.</strong></p>

نتیجه را نگاه کن: کلِ پاراگراف ضخیم شد. در نگاهِ اول شاید بد به‌نظر نرسد، ولی معنایی که ساختی خراب است. <strong> یعنی «این تکه از بقیه مهم‌تر است». وقتی همه‌چیز مهم باشد، دیگر هیچ‌چیز مهم نیست — درست مثل کسی که کلِ حرفش را داد می‌زند؛ بعد از چند ثانیه دیگر هیچ کلمه‌ای برجسته نیست. یک screen reader هم حالا کلِ پاراگراف را با تأکید می‌خواند، که یعنی عملاً هیچ‌چیز تأکید نشده.

درستش این است که <strong> را فقط دورِ همان تکه‌ای بگذاری که واقعاً مهم است، و بقیهٔ پاراگراف را رها کنی:

<p>یک نهنگ آبی بالغ می‌تواند تا سی متر دراز شود. فقط زبانش به‌اندازهٔ یک فیل وزن دارد.</p>

✅ چک کن: پاراگراف به حالتِ معمولی برگشت. این پاراگراف اصلاً به <strong> نیاز نداشت، و همین درست است — <strong> یک ادویه است، نه غذای اصلی.

حالا همه‌چیز را کنار هم بگذار. اسکلتِ کاملِ فصل قبل را بردار و بدنه‌اش را با چیزی که ساختیم پر کن. صفحهٔ نهاییِ این فصل این است:

<!-- index.html -->
<!DOCTYPE html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <title>نهنگ آبی</title>
  </head>
  <body>
    <h1>نهنگ آبی</h1>
    <p>نهنگ آبی <strong>بزرگ‌ترین جانوری است که تا امروز روی زمین زندگی کرده</strong> — حتی بزرگ‌تر از هر دایناسوری.</p>

    <h2>چقدر بزرگ است؟</h2>
    <p>یک نهنگ آبی بالغ می‌تواند تا سی متر دراز شود. فقط زبانش به‌اندازهٔ یک فیل وزن دارد.</p>

    <h2>چه می‌خورد؟</h2>
    <p>با آن جثهٔ عظیم، غذایش <em>موجودهای بسیار ریزی</em> است، نه ماهی‌های بزرگ.</p>

    <h3>کریل چیست؟</h3>
    <p>کریل جانور کوچکی شبیه میگو است. یک نهنگ آبی روزانه نزدیک به چهار تن از آن می‌خورد.</p>
  </body>
</html>

✅ چک کن: یک صفحهٔ کامل داری با یک <h1>، دو <h2>، یک <h3> زیرِ بخشِ غذا، چهار پاراگراف، و یک <strong> و یک <em> که هرکدام واقعاً معنایشان به‌جاست. عنوان‌ها را از بالا به پایین بخوان: h1 بعد h2 بعد h2 بعد h3 — هیچ سطحی پریده نشده. این یک outlineِ سالم است.

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

کلمه	تلفظ به حروف فارسی	یعنی چه
heading	هِدینگ	عنوان؛ شش سطح از `<h1>` تا `<h6>` که روی‌هم outline صفحه را می‌سازند
paragraph	پاراگراف	یک تکه متن که با `<p>` مشخص می‌شود
outline	اوت‌لاین	فهرستِ سطح‌بندی‌شدهٔ عنوان‌های صفحه، مثل فهرستِ مطالبِ یک کتاب
`<strong>`	استرانگ	معنایش «این تکه مهم است»؛ مرورگر پیش‌فرض ضخیمش می‌کند
`<em>`	اِم	معنایش «این را با تأکید بخوان»؛ مرورگر پیش‌فرض کجش می‌کند
whitespace	وایت‌اِسپیس	فاصله‌ها و خطهای خالی؛ HTML چندتای پشت‌سرهم را یکی می‌کند

تمرین‌ها