قسمت ۵ – تیترها و پاراگراف؛ تگ h۱ تا h۶ و p

تگ h در html به شش المان <h1> تا <h6> گفته می‌شود که تیترهای صفحه را از مهم‌ترین (h1) تا کم‌اهمیت‌ترین (h6) مشخص می‌کنند، و تگ <p> هم یک پاراگراف متنی را می‌سازد. این دو گروه ستون فقرات هر صفحه وب هستند: تیترها ساختار و نقشه محتوا را می‌سازند و پاراگراف‌ها متن اصلی را نگه می‌دارند.

نویسنده: تیم siloow (سیلو سولوشن) — آخرین به‌روزرسانی: آبان ۱۴۰۵

در این قسمت از دوره کدپرس یاد می‌گیرید سلسله مراتب تیترها چطور ساخته می‌شود، چرا نباید برای بزرگ‌کردن متن از تیتر استفاده کرد، تگ <br> و <hr> دقیقاً چه کاری می‌کنند و چه اشتباه‌هایی در صفحه‌های فارسی زیاد دیده می‌شود. اگر قسمت قبل را نخوانده‌اید، اول قسمت ۴: تگ، المان و اتریبیوت در HTML را ببینید؛ چون اینجا فرض می‌کنیم تفاوت تگ و المان را می‌دانید.

تگ h در html چیست و چه کاری انجام می‌دهد؟

تگ h در html یک تیتر (Heading) می‌سازد و عدد کنار حرف h سطح آن تیتر را نشان می‌دهد؛ h1 بالاترین سطح و h6 پایین‌ترین سطح است. تیترها فقط ظاهر درشت‌تر ندارند؛ معنای ساختاری دارند و به مرورگر، موتور جستجو و صفحه‌خوان (Screen Reader) می‌گویند هر بخش از صفحه درباره چیست.

مرورگر به‌صورت پیش‌فرض تیترها را پررنگ و با اندازه‌های متفاوت نمایش می‌دهد، اما این ظاهر را بعداً با CSS کاملاً تغییر می‌دهیم. چیزی که ثابت می‌ماند «سطح» تیتر است. به همین دلیل انتخاب h2 یا h3 باید بر اساس جایگاه آن بخش در ساختار محتوا باشد، نه اندازه‌ای که دوست دارید ببینید.

مثال زیر یک صفحه کامل با ساختار درست تیترها و پاراگراف‌ها را نشان می‌دهد. ساختار پایه صفحه را در قسمت ۳: ساختار صفحه HTML و راست‌چین کردن توضیح داده‌ایم:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <title>آموزش قهوه دمی در خانه</title>
</head>
<body>
  <h1>آموزش قهوه دمی در خانه</h1>
  <p>قهوه دمی با چند ابزار ساده آماده می‌شود.</p>

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

  <h3>انتخاب آسیاب مناسب</h3>
  <p>برای دمی، آسیاب متوسط مناسب است.</p>

  <h2>مراحل دم کردن</h2>
  <p>آب را تا حدود ۹۳ درجه گرم کنید.</p>
</body>
</html>

اگر این فایل را در مرورگر باز کنید، چون dir="rtl" روی المان <html> قرار دارد، همه تیترها و پاراگراف‌ها از راست چیده می‌شوند و نیازی به تنظیم جداگانه ندارند.

سلسله مراتب تیترها چطور باید رعایت شود؟

سلسله مراتب تیترها یعنی هر تیتر زیرمجموعه تیتر سطح بالاتر قبلی خودش باشد: h1 عنوان کل صفحه، h2 بخش‌های اصلی و h3 زیربخش‌های هر h2. این ساختار شبیه فهرست مطالب یک کتاب است و نباید در آن سطحی جا بیفتد.

قاعده یک h1 در هر صفحه

استاندارد HTML از نظر فنی بیش از یک h1 را ممنوع نمی‌کند، اما مستندات MDN درباره المان‌های تیتر توصیه می‌کند هر صفحه معمولاً یک h1 داشته باشد که موضوع کل صفحه را توصیف کند، شبیه کاری که تگ <title> انجام می‌دهد. در وردپرس معمولاً عنوان نوشته خودش h1 است؛ پس داخل محتوای نوشته دوباره h1 نگذارید و از h2 شروع کنید.

از سطح‌ها پرش نکنید

پریدن از h1 به h4، یا از h2 به h5، کاربر صفحه‌خوان را سردرگم می‌کند؛ چون او با فهرست تیترها در صفحه حرکت می‌کند و فکر می‌کند بخشی جا افتاده است. البته وقتی یک زیربخش تمام می‌شود و به بخش اصلی بعدی برمی‌گردید (مثلاً از h3 به h2)، این «برگشت» کاملاً طبیعی است.

<!-- اشتباه: پرش از h1 به h4 فقط برای کوچک‌تر شدن متن -->
<h1>فروشگاه کتاب</h1>
<h4>پرفروش‌ترین‌های این ماه</h4>

<!-- درست: سطح منطقی + اندازه با CSS -->
<h1>فروشگاه کتاب</h1>
<h2 class="small-title">پرفروش‌ترین‌های این ماه</h2>

الگوریتم outline دیگر وجود ندارد

در مقاله‌های قدیمی می‌خوانید که داخل هر <section> می‌شود دوباره h1 گذاشت و مرورگر خودش سطح آن را حساب می‌کند. این «الگوریتم outline» هیچ‌وقت در مرورگرها پیاده‌سازی نشد و از استاندارد HTML حذف شده است؛ پس سطح تیترها را همیشه خودتان و به‌صورت صریح تعیین کنید.

تگ	نقش	نمونه کاربرد	نکته
<h1>	عنوان اصلی صفحه	عنوان مقاله یا نام محصول	معمولاً فقط یک بار در صفحه
<h2>	بخش‌های اصلی	«چه ابزارهایی لازم است؟»	بیشترین تیتر در یک مقاله
<h3>	زیربخش یک h2	«انتخاب آسیاب مناسب»	فقط داخل یک بخش h2
<h4> تا <h6>	زیربخش‌های عمیق‌تر	مستندات فنی طولانی	در مقاله‌های معمولی کم استفاده می‌شوند
<p>	پاراگراف	متن توضیحی هر بخش	تگ پایانی دارد
<br>	شکستن خط داخل یک متن	آدرس پستی، شعر	المان خالی (void)، تگ پایانی ندارد
<hr>	جداکننده موضوعی بین پاراگراف‌ها	تغییر صحنه در داستان	المان خالی؛ معنای «تغییر موضوع» دارد
<hgroup>	گروه تیتر و زیرعنوان	نام سایت و شعار آن	یک تیتر و یک یا چند <p>

تگ h1 چه تأثیری روی سئو دارد؟

تگ h1 به گوگل و کاربر کمک می‌کند موضوع اصلی صفحه را سریع بفهمند، اما یک «جادوی رتبه» نیست. گوگل در راهنمای شروع سئو Google Search Central توصیه می‌کند از تیترها برای سازمان‌دهی محتوا و راحتی خواندن استفاده کنید؛ یعنی ارزش تیترها در وضوح ساختار است، نه در تکرار کلمه کلیدی.

پس تیتر خوب یعنی تیتری که دقیقاً بگوید آن بخش درباره چیست. پر کردن h2ها با یک کلمه کلیدی تکراری هم خواندن را سخت می‌کند و هم ظاهر اسپم پیدا می‌کند. اگر با مبانی سئو آشنا نیستید، مقاله سئو چیست؟ راهنمای کامل سئو سایت نقطه شروع خوبی است.

نکته: یک راه ساده برای امتحان ساختار تیترها این است که فقط تیترهای صفحه را پشت سر هم بخوانید. اگر بدون خواندن پاراگراف‌ها، فهرست مطالب منطقی و قابل‌فهمی دیدید، سلسله مراتب تیترها درست است.

تگ p در html چطور کار می‌کند؟

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

نکته مهمی که مبتدی‌ها را غافلگیر می‌کند این است که HTML فاصله‌های اضافه و Enterهای داخل کد را نادیده می‌گیرد. چند فاصله پشت سر هم یا رفتن به خط بعدی در فایل، در مرورگر فقط به یک فاصله ساده تبدیل می‌شود:

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

<p>پاراگراف دوم همیشه از خط جدید شروع می‌شود.</p>

این رفتار «فشرده‌سازی فاصله‌ها» (Whitespace Collapsing) نام دارد و دلیلش این است که ظاهر متن باید با CSS کنترل شود، نه با تایپ کردن فاصله در کد. اگر واقعاً لازم دارید فاصله‌ها و خط‌ها دقیقاً حفظ شوند (مثل نمایش کد)، از تگ <pre> استفاده می‌شود که در قسمت بعد با آن آشنا می‌شوید.

آیا p را می‌شود بدون تگ پایانی نوشت؟

از نظر استاندارد HTML، تگ پایانی </p> در برخی موقعیت‌ها اختیاری است و مرورگر خودش پاراگراف را می‌بندد. اما این کار باعث خطاهای گیج‌کننده می‌شود؛ مثلاً اگر یک <div> داخل p بگذارید، مرورگر p را زودتر می‌بندد. همیشه </p> را بنویسید و هیچ المان بلاکی (مثل div، ul یا تیتر) داخل p قرار ندهید.

تگ br و hr چه تفاوتی دارند و کجا استفاده می‌شوند؟

تگ br فقط خط را داخل یک متن می‌شکند و متن را به خط بعد می‌برد، اما تگ hr یک «تغییر موضوع» بین دو پاراگراف را نشان می‌دهد و مرورگر آن را به‌صورت یک خط افقی نمایش می‌دهد. هر دو المان خالی (Void Element) هستند و تگ پایانی ندارند.

<p>
  سیلو سولوشن<br>
  تهران، خیابان نمونه، پلاک ۱۰<br>
  تلفن: ۰۲۱-۰۰۰۰۰۰۰۰
</p>

<p>بخش اول داستان در اینجا تمام می‌شود.</p>
<hr>
<p>چند سال بعد، همه‌چیز تغییر کرده بود.</p>

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

br برای فاصله‌گذاری ممنوع

بزرگ‌ترین سوءاستفاده از br، گذاشتن چند br پشت سر هم برای ایجاد فاصله عمودی است. این کار ساختار را خراب می‌کند و در موبایل نتیجه غیرقابل پیش‌بینی می‌دهد. فاصله بین بلوک‌ها کار CSS است؛ در مثال زیر از خاصیت منطقی margin-block-end استفاده کرده‌ایم که در صفحه‌های راست‌چین و چپ‌چین یکسان کار می‌کند:

<!-- اشتباه: استفاده از br برای فاصله‌گذاری -->
<p>متن اول</p>
<br><br><br>
<p>متن دوم</p>

<!-- درست: فاصله را CSS تعیین می‌کند -->
<p class="intro">متن اول</p>
<p>متن دوم</p>
<style>
  .intro { margin-block-end: 2rem; }
</style>

ویژگی	<br>	<hr>
معنا	شکستن خط داخل یک متن	تغییر موضوع بین پاراگراف‌ها
نوع المان	اینلاین، خالی	بلاکی، خالی
نمایش پیش‌فرض	متن از خط بعد ادامه می‌یابد	یک خط افقی
کاربرد درست	آدرس، شعر	تغییر صحنه، جداکردن دو بخش موضوعی
کاربرد نادرست	ایجاد فاصله عمودی	خط تزئینی صرف (بهتر است با CSS ساخته شود)

تگ hgroup برای تیتر و زیرعنوان چطور استفاده می‌شود؟

تگ <hgroup> یک تیتر را با یک یا چند پاراگراف زیرعنوان (مثل شعار سایت) گروه‌بندی می‌کند تا معلوم باشد زیرعنوان جزء تیتر است، نه یک بخش مستقل. در نسخه فعلی استاندارد زنده HTML، داخل hgroup دقیقاً یک تیتر h1 تا h6 و تعدادی <p> قرار می‌گیرد.

<hgroup>
  <h1>کدپرس</h1>
  <p>آموزش رایگان HTML و CSS به زبان فارسی</p>
</hgroup>

اشتباه رایج قدیمی این بود که زیرعنوان را با h2 بنویسند؛ این کار یک بخش جدید و خالی در ساختار تیترها می‌سازد. برای زیرعنوان از p داخل hgroup استفاده کنید.

از تجربه تیم siloow: تیترها در قالب‌های وردپرسی

در قالب‌های اختصاصی وردپرس و ووکامرس که تیم siloow می‌سازد، یکی از اولین چیزهایی که بررسی می‌کنیم ساختار تیترهاست. در بازبینی سایت‌های قدیمی بارها دیده‌ایم که لوگو داخل h1 قرار گرفته، عنوان ابزارک‌های سایدبار h2 یا h3 هستند و طراح برای بزرگ‌کردن یک جمله تبلیغاتی از h1 دوم استفاده کرده است. نتیجه این است که فهرست تیترهای صفحه پر از عنوان‌های بی‌ربط می‌شود. درسی که گرفتیم ساده است: در قالب، عنوان صفحه تنها h1 است، عنوان ابزارک‌ها با المان‌های غیرتیتر یا سطح مناسب ساخته می‌شوند و اندازه ظاهری همیشه از کلاس‌های CSS می‌آید. همین قاعده را در صفحه‌سازهایی مثل المنتور هم با تنظیم «HTML Tag» هر ویجت رعایت می‌کنیم.

اشتباهات رایج در استفاده از تگ h و p

• انتخاب سطح تیتر بر اساس اندازه ظاهری؛ اندازه را با CSS تغییر دهید، نه با عوض کردن h2 به h4.
• گذاشتن چند h1 در محتوای یک نوشته وردپرسی که عنوانش خودش h1 است.
• پرش از سطح‌ها، مثلاً h2 و بلافاصله h5.
• استفاده از تیتر برای متن‌هایی که تیتر نیستند، مثل شماره تلفن یا متن دکمه.
• زدن چند <br> پشت سر هم برای ایجاد فاصله.
• قرار دادن المان بلاکی مثل <div> یا <ul> داخل <p>.
• تیتر خالی یا تیتری که فقط یک آیکون دارد و متنی برای صفحه‌خوان ندارد.

چه زمانی نباید از تگ تیتر استفاده کرد؟

هر متنی که درشت و پررنگ است لزوماً تیتر نیست. اگر متن فقط برای تأکید بصری است (مثل «ارسال رایگان» در یک بنر) یا بخشی از متن یک کارت کوچک است که بخش مستقلی از محتوا نمی‌سازد، تیتر کردن آن ساختار صفحه را شلوغ می‌کند. در این موارد از پاراگراف با کلاس CSS یا تگ‌های متنی مثل <strong> استفاده کنید که در قسمت بعد آموزش می‌دهیم.

تمرین این قسمت

1. یک صفحه با عنوان «دستور پخت کیک شکلاتی» بسازید که یک h1، سه h2 («مواد لازم»، «مراحل پخت»، «نکات سرو») و زیر «مراحل پخت» دو h3 داشته باشد.
2. زیر هر تیتر حداقل یک پاراگراف بنویسید و مطمئن شوید هیچ متنی بیرون از p رها نشده است.
3. آدرس یک کافه فرضی را در یک پاراگراف با <br> در سه خط بنویسید.
4. بین بخش «مراحل پخت» و «نکات سرو» یک <hr> بگذارید و بررسی کنید آیا واقعاً تغییر موضوع است یا نه.
5. فقط تیترهای صفحه را پشت سر هم بخوانید و ببینید آیا فهرست مطالب منطقی است.

جمع‌بندی و خلاصه

• تگ h در html شش سطح دارد؛ h1 عنوان اصلی صفحه است و معمولاً فقط یک بار می‌آید.
• سطح تیتر بر اساس ساختار محتوا انتخاب می‌شود، نه اندازه ظاهری.
• تگ p در html هر پاراگراف را جدا می‌کند و فاصله‌های اضافه داخل کد نادیده گرفته می‌شوند.
• <br> فقط برای شکستن خط داخل متن است و <hr> تغییر موضوع را نشان می‌دهد.
• فاصله‌گذاری و اندازه متن کار CSS است.

همه قسمت‌های دوره را در صفحه کدپرس، آموزش رایگان HTML و CSS پیدا می‌کنید. اگر هم مسیر یادگیری را از ابتدا شروع کرده‌اید، مرور قسمت ۱: HTML چیست؟ و راهنمای کامل طراحی سایت تصویر بزرگ‌تری از جایگاه HTML در یک پروژه واقعی به شما می‌دهد. در قسمت بعد، «قسمت ۶ – تگ‌های متنی و قالب‌بندی متن در HTML»، سراغ strong، em، mark و bdi می‌رویم.

منابع

• MDN: The HTML Section Heading elements
• WHATWG HTML Living Standard: Headings and outlines
• MDN: The Line Break element (br)
• Google Search Central: SEO Starter Guide

سوالات متداول درباره تگ h در html