هدینگ‌ها، پاراگراف‌ها و متن در HTML

HTML شش سطح هدینگ دارد: <h1> تا <h6>. <h1> مهم‌ترین و کلی‌ترین عنوان است و <h6> جزئی‌ترین. هر صفحه معمولاً باید دقیقاً یک <h1> داشته باشد که موضوع اصلی آن صفحه را نشان می‌دهد.

<h1>آموزش HTML</h1>
<h2>هدینگ‌ها</h2>
<h3>سطوح مختلف هدینگ</h3>

سطح هدینگ باید بر اساس جایگاه محتوا در ساختار صفحه انتخاب شود، نه بر اساس اینکه چقدر بزرگ یا کوچک باید به نظر برسد. یک اشتباه رایج این است که چون <h4> اندازه فونت دلخواه را دارد، از آن به‌جای <h2> استفاده می‌شود — این کار سلسله‌مراتب معنایی صفحه را خراب می‌کند.

اگر اندازه یک هدینگ را دوست ندارید، اندازه‌اش را با CSS تغییر دهید، نه اینکه سطح آن را عوض کنید. ترتیب درست معمولاً به این شکل است: یک <h1>، سپس چند <h2> برای بخش‌های اصلی، و <h3> برای زیربخش‌های هر <h2> — بدون پریدن از <h2> مستقیم به <h4>.

این ترتیب برای صفحه‌خوان‌ها هم مهم است؛ کاربرانی که با صفحه‌خوان کار می‌کنند، اغلب بین هدینگ‌ها پرش می‌کنند تا ساختار صفحه را بفهمند، و سلسله‌مراتب نامرتب این پیمایش را گیج‌کننده می‌کند.

عنصر <p> یک بند متنی مستقل را نشان می‌دهد. مرورگر به‌طور پیش‌فرض قبل و بعد از هر <p> فاصله می‌گذارد تا پاراگراف‌ها از هم جدا دیده شوند.

<p>HTML زبان نشانه‌گذاری صفحات وب است.</p>
<p>هر پاراگراف باید یک ایده مستقل را بیان کند.</p>

نکته مهم: <p> نمی‌تواند شامل عناصر بلاک دیگری مثل <div> یا <h2> باشد؛ فقط محتوای متنی و عناصر درون‌خطی (inline) مثل <strong> یا <a> می‌توانند داخل آن قرار بگیرند.

HTML برای متن هم، درست مثل بخش‌های بزرگ‌تر صفحه، بین معنا و ظاهر تفاوت قائل می‌شود. برای مثال <b> فقط متن را ضخیم نشان می‌دهد، بدون هیچ معنای خاصی؛ اما <strong> می‌گوید «این متن از نظر معنایی اهمیت بیشتری دارد» — و معمولاً هم ضخیم نمایش داده می‌شود. همین رابطه بین <i> (فقط کج) و <em> (تأکید معنایی) برقرار است.

وقتی از عنصر معنادار استفاده می‌کنید، صفحه‌خوان‌ها می‌توانند آن معنا را هم منتقل کنند (مثلاً با تغییر لحن صدا روی <em>)، در حالی که <b> و <i> فقط یک جلوه بصری‌اند که هیچ اطلاعات اضافه‌ای منتقل نمی‌کنند.

<strong> برای متنی استفاده می‌شود که از نظر اهمیت برجسته است — مثل یک هشدار یا یک کلمه کلیدی. <em> برای تأکید گفتاری استفاده می‌شود، جایی که اگر جمله را بلند بخوانید، آن کلمه را با لحن متفاوتی می‌گفتید.

<p><strong>توجه:</strong> این عملیات غیرقابل بازگشت است.</p>
<p>من <em>واقعاً</em> این موضوع را گفتم.</p>

می‌توانید هر دو را با هم هم ترکیب کنید، اما از استفاده بیش‌ازحد آن‌ها در یک پاراگراف خودداری کنید؛ وقتی همه‌چیز تأکید شده باشد، عملاً هیچ‌چیز تأکید نشده است.

<br> یک شکست خط تک ایجاد می‌کند، بدون شروع یک پاراگراف جدید. کاربرد درست آن جایی است که شکست خط بخشی از خودِ محتواست، مثل یک آدرس پستی یا یک بیت شعر:

<p>
  تهران، خیابان آزادی<br>
  پلاک ۱۲
</p>

اشتباه رایج این است که از چند <br> پشت سر هم برای ایجاد فاصله بین بخش‌ها استفاده شود. فاصله بین بخش‌ها کار CSS است (مثل margin)، نه <br>. اگر می‌خواهید یک بخش جدید شروع کنید، از یک <p> جدید استفاده کنید.

ترکیب همه این عناصر در یک بخش کوچک واقعی:

<h1>قهوه کوچینو</h1>
<h2>درباره ما</h2>
<p>
  کوچینو از سال ۱۳۹۸ فعالیت می‌کند.
  <strong>همه دانه‌های ما تازه برشته می‌شوند.</strong>
</p>
<p>قهوه را <em>همیشه</em> تازه تحویل می‌دهیم.</p>

در این مثال، <h1> عنوان اصلی صفحه است، <h2> یک زیربخش را معرفی می‌کند، و <strong>/<em> فقط برای بخش‌هایی به کار رفته‌اند که واقعاً اهمیت یا تأکید معنایی دارند.

انتخاب سطح هدینگ بر اساس اندازه فونت دلخواه. اندازه ظاهری را با CSS تغییر دهید، نه با تعویض سطح هدینگ.

پریدن از h2 مستقیم به h4. این کار سلسله‌مراتب معنایی صفحه را برای صفحه‌خوان‌ها و موتورهای جست‌وجو مخدوش می‌کند.

استفاده از چند br برای فاصله‌گذاری بین بخش‌ها. این کار وظیفه CSS است؛ <br> فقط برای شکست خط داخل یک پاراگراف مناسب است.

استفاده از b و i به‌جای strong و em. اگر متن واقعاً از نظر معنایی مهم یا تأکیدی است، از عنصر معنادار استفاده کنید تا این معنا هم به صفحه‌خوان‌ها و هم به موتورهای جست‌وجو منتقل شود.