قسمت ۶ – تگ‌های متنی و قالب‌بندی متن در HTML

تگ های متنی html المان‌هایی اینلاین مثل <strong>، <em>، <mark> و <bdi> هستند که به بخشی از متن «معنا» اضافه می‌کنند؛ مثلاً می‌گویند این عبارت مهم است، این کلمه تأکید دارد یا این نام کاربری باید از نظر جهت جدا شود. ظاهر این تگ‌ها (پررنگ، کج، هایلایت) فقط پیش‌فرض مرورگر است و هدف اصلی آن‌ها معنای درست متن است.

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

در این قسمت تفاوت دقیق strong و b، تفاوت em و i، کاربرد mark، small، s، sub و sup، نقل‌قول با blockquote و q، و مهم‌تر از همه برای سایت‌های فارسی، تگ <bdi> و <bdo> برای متن‌های ترکیبی فارسی و انگلیسی را با مثال یاد می‌گیرید. این قسمت ادامه مستقیم قسمت ۵: تیترها و پاراگراف؛ تگ h1 تا h6 و p است.

تگ های متنی html چیست و چرا مهم است؟

تگ های متنی html المان‌های سطح متن (Text-level Semantics) هستند که داخل پاراگراف یا تیتر قرار می‌گیرند و نقش بخشی از جمله را مشخص می‌کنند. این تگ‌ها اینلاین هستند؛ یعنی خط جدید نمی‌سازند و در جریان متن باقی می‌مانند.

اهمیت این تگ‌ها در معناست. صفحه‌خوان‌ها، موتورهای جستجو، ابزارهای ترجمه و حتی حالت «خواندن» مرورگر از معنای تگ استفاده می‌کنند، نه از ظاهر آن. اگر فقط ظاهر مهم بود، همه این کارها را با CSS انجام می‌دادیم. قاعده کلی که از قسمت ۴ (تگ، المان و اتریبیوت) به یاد دارید اینجا هم برقرار است: HTML برای معنا، CSS برای ظاهر.

تفاوت تگ strong و b چیست؟

تگ <strong> یعنی محتوا «اهمیت، جدیت یا فوریت» دارد، اما تگ <b> فقط توجه خواننده را جلب می‌کند بدون اینکه اهمیت بیشتری به متن بدهد. هر دو به‌صورت پیش‌فرض پررنگ نمایش داده می‌شوند، ولی معنای متفاوتی دارند.

از strong برای هشدارها، شرط‌های مهم و نکاتی استفاده کنید که اگر خواننده نبیند ضرر می‌کند. از b برای مواردی مثل کلمات کلیدی یک خلاصه، نام محصول در یک بررسی یا مواد اصلی یک دستور پخت استفاده می‌شود؛ یعنی جاهایی که می‌خواهید چشم روی آن کلمه بایستد، اما آن کلمه از بقیه جمله مهم‌تر نیست.

<p>
  پیش از پرداخت، <strong>شماره سفارش را یادداشت کنید</strong>؛
  بدون آن پیگیری ممکن نیست.
</p>
<p>
  من <em>امروز</em> قهوه سفارش دادم، نه دیروز.
</p>

<!-- b: جلب توجه بدون اهمیت بیشتر -->
<p>در این دستور پخت از <b>شکر قهوه‌ای</b> و <b>کره</b> استفاده می‌کنیم.</p>

<!-- i: صدای دیگر، اصطلاح خارجی، نام علمی -->
<p>به این سبک طراحی <i lang="en">Flat Design</i> می‌گویند.</p>
<p>نام علمی گل محمدی <i lang="la">Rosa damascena</i> است.</p>

آیا strong برای سئو بهتر از b است؟

خیر، هیچ سند رسمی از گوگل نمی‌گوید پررنگ کردن کلمه کلیدی با strong رتبه را بالا می‌برد. انتخاب بین strong و b باید بر اساس معنای جمله باشد. پررنگ کردن بی‌رویه کلمه کلیدی در کل متن خوانایی را پایین می‌آورد؛ اگر به چک‌لیست بهینه‌سازی محتوا علاقه دارید، مقاله سئو داخلی و چک‌لیست On-Page را ببینید.

تفاوت تگ em و i چیست؟

تگ <em> تأکید آوایی روی یک کلمه است که معنای جمله را عوض می‌کند، اما تگ <i> متنی را نشان می‌دهد که «صدای دیگری» دارد؛ مثل اصطلاح خارجی، نام علمی، فکر درونی شخصیت داستان یا نام یک کشتی. هر دو به‌صورت پیش‌فرض کج (ایتالیک) نمایش داده می‌شوند.

در جمله «من امروز قهوه سفارش دادم»، تأکید روی «امروز» می‌گوید زمان سفارش محل بحث است. اگر تأکید را روی «قهوه» بگذارید، معنای جمله عوض می‌شود. اما در «به این سبک Flat Design می‌گویند» هیچ تأکیدی وجود ندارد؛ فقط یک اصطلاح خارجی داریم. اضافه کردن lang="en" به i کمک می‌کند صفحه‌خوان کلمه را با تلفظ انگلیسی بخواند.

نکته: حروف فارسی ایتالیک واقعی ندارند و بسیاری از فونت‌های فارسی حالت کج را به‌صورت مصنوعی و ناخوانا نمایش می‌دهند. در سایت فارسی معنای em و i را حفظ کنید، اما ظاهرشان را با CSS عوض کنید؛ مثلاً font-style: normal به همراه رنگ یا وزن متفاوت.

تگ mark، small، s و sub و sup چه کاربردی دارند؟

تگ mark متن را به دلیل ارتباط با فعالیت فعلی کاربر هایلایت می‌کند؛ مثل کلمه جستجو‌شده در نتایج. تگ small برای متن‌های فرعی مثل توضیحات حقوقی و قید «شامل مالیات» است. تگ s متنی را نشان می‌دهد که دیگر درست یا مرتبط نیست، مثل قیمت قدیمی. sub و sup هم زیرنویس و بالانویس می‌سازند.

<p>
  نتیجه جستجو برای «قهوه»:
  طرز تهیه <mark>قهوه</mark> ترک در خانه
</p>
<p><small>قیمت‌ها شامل مالیات بر ارزش افزوده است.</small></p>
<p>قیمت: <s>۴۵۰ هزار تومان</s> ۳۸۰ هزار تومان</p>
<p>فرمول آب: H<sub>2</sub>O و مساحت: ۲۵ متر<sup>2</sup></p>

دقت کنید که small به معنی «متن کوچک‌تر» برای زیبایی نیست؛ برای کوچک کردن متن از CSS استفاده می‌شود. همین‌طور sup را فقط برای مواردی مثل توان ریاضی یا علامت‌های اختصاری استاندارد به کار ببرید، نه برای بالا بردن ظاهری یک کلمه.

تفاوت s با del و ins

تگ s یعنی «دیگر مرتبط نیست» و تگ <del> یعنی «از سند حذف شده است». del معمولاً همراه <ins> برای نمایش ویرایش‌ها (مثل تغییرات یک قرارداد یا تغییرات نسخه) استفاده می‌شود. برای قیمت قدیمی در فروشگاه، s انتخاب معنایی دقیق‌تری است.

<p>جلسه بعدی <time datetime="2026-11-20T18:00">۲۹ آبان ساعت ۱۸</time> برگزار می‌شود.</p>
<p>قیمت جدید: <del>۵۰۰ هزار</del> <ins>۴۲۰ هزار تومان</ins></p>
<p>خروجی برنامه: <samp>فایل با موفقیت ذخیره شد</samp></p>
<p>مساحت دایره برابر است با <var>π</var> × <var>r</var><sup>2</sup></p>

تگ bdi و bdo در متن فارسی چه مشکلی را حل می‌کنند؟

تگ bdi متنی با جهت نامعلوم (مثل نام کاربری انگلیسی وسط متن فارسی) را از الگوریتم دوجهته (Bidi) متن اطرافش جدا می‌کند تا ترتیب کلمات و علامت‌ها به هم نریزد. تگ bdo برعکس، جهت متن داخلش را به‌زور با اتریبیوت dir تعیین می‌کند.

مشکل واقعی این است: وقتی نام کاربری لاتین مثل Sara_92 کنار دونقطه و عدد در یک جمله فارسی قرار می‌گیرد، مرورگر ممکن است دونقطه یا عدد را به سمت اشتباه ببرد و جمله نامرتب نمایش داده شود. این مشکل در کامنت‌ها، لیست کاربران، نام محصول‌های انگلیسی و جدول امتیازها زیاد دیده می‌شود. bdi بدون اینکه جهت را حدس بزنید، متن را ایزوله می‌کند:

<ul>
  <li>کاربر <bdi>Sara_92</bdi>: ۳ دیدگاه</li>
  <li>کاربر <bdi>علی</bdi>: ۵ دیدگاه</li>
  <li>کاربر <bdi>محمد-2024</bdi>: ۱ دیدگاه</li>
</ul>

<!-- bdo: جهت را به زور برعکس می‌کند -->
<p><bdo dir="ltr">سلام دنیا</bdo></p>

طبق مستندات MDN درباره bdi، این المان به‌طور پیش‌فرض مانند dir="auto" رفتار می‌کند و جهت متن داخل خود را از اولین حرف جهت‌دار آن تشخیص می‌دهد. اگر محتوای پویا (مثل نام کاربر از دیتابیس) دارید و تگ دیگری مثل span لازم است، می‌توانید dir="auto" را روی همان span بگذارید که نتیجه مشابهی دارد.

چه زمانی از bdo استفاده کنیم؟

bdo کاربرد کمی دارد و بیشتر برای نمایش آموزشی یا موارد خاص استفاده می‌شود که باید ترتیب نویسه‌ها را دقیقاً برعکس کنید. در کار روزمره سایت فارسی، تقریباً همیشه bdi یا dir="auto" انتخاب درست است و bdo را فقط وقتی به کار ببرید که می‌دانید دقیقاً چه می‌کنید.

روش	کار	جهت	بهترین کاربرد
<bdi>	ایزوله کردن متن از جهت اطراف	خودکار از روی اولین حرف	نام کاربری و داده پویا در متن فارسی
dir="auto"	تشخیص خودکار جهت روی هر المان	خودکار	span، input یا td با محتوای نامعلوم
<bdo dir="ltr">	تعیین اجباری جهت نویسه‌ها	دقیقاً همان مقدار dir	موارد خاص و نمایش آموزشی
dir="ltr" روی المان	تعیین جهت یک بلوک کامل	چپ به راست	بلاک کد یا پاراگراف کاملاً انگلیسی

نقل‌قول در HTML؛ blockquote، q و cite

تگ blockquote برای نقل‌قول‌های طولانی و بلاکی است که از منبعی دیگر آمده‌اند، تگ q برای نقل‌قول کوتاه داخل یک جمله است و تگ cite عنوان یک اثر (کتاب، مقاله، فیلم) را مشخص می‌کند. مرورگر برای q به‌طور خودکار علامت نقل‌قول متناسب با زبان صفحه اضافه می‌کند.

<blockquote cite="https://developer.mozilla.org/">
  <p>
    HTML زبان نشانه‌گذاری پایه وب است که معنا و
    ساختار محتوای صفحه را تعریف می‌کند.
  </p>
</blockquote>
<p>— برگرفته از <cite>مستندات MDN</cite></p>

<p>استاد گفت: <q>تمرین هر روزه از همه چیز مهم‌تر است.</q></p>

اتریبیوت cite روی blockquote آدرس منبع را نگه می‌دارد، اما در صفحه نمایش داده نمی‌شود؛ به همین دلیل نام منبع را برای خواننده جداگانه بنویسید. یک اشتباه رایج دیگر استفاده از blockquote فقط برای تورفتگی متن است؛ اگر متن نقل‌قول نیست، از blockquote استفاده نکنید.

تگ‌های فنی متن؛ code، kbd، pre، abbr و time

این گروه تگ‌ها برای محتوای فنی و داده‌ای استفاده می‌شوند: code برای کد، kbd برای کلید یا ورودی صفحه‌کلید، samp برای خروجی برنامه، var برای متغیر، abbr برای مخفف، time برای تاریخ و زمان قابل‌خواندن توسط ماشین و pre برای متنی که فاصله‌ها و خطوطش باید حفظ شود.

<p>
  برای ذخیره فایل کلیدهای <kbd>Ctrl</kbd> + <kbd>S</kbd> را بزنید.
</p>
<p>تگ <code>&lt;p&gt;</code> پاراگراف می‌سازد.</p>
<p>
  <abbr title="HyperText Markup Language">HTML</abbr>
  در سال <time datetime="1993">۱۹۹۳</time> معرفی شد.
</p>
<pre>
  این متن
     فاصله‌ها و
        خط‌هایش را حفظ می‌کند.
</pre>

اتریبیوت datetime در تگ time باید فرمت استاندارد ماشینی داشته باشد (مثل 2026-11-20T18:00)، حتی اگر متن قابل‌مشاهده تاریخ شمسی باشد. این کار به موتورهای جستجو و ابزارهای تقویم کمک می‌کند زمان را درست بفهمند. در دوره کدپرس برای نمایش کد در وبلاگ از ترکیب <pre><code> استفاده می‌کنیم و چون کد انگلیسی است، بلاک کد را چپ‌چین (dir="ltr") نمایش می‌دهیم.

تگ	معنا	نمایش پیش‌فرض	نمونه کاربرد
<strong>	اهمیت، جدیت یا فوریت	پررنگ	هشدار، شرط مهم
<b>	جلب توجه بدون اهمیت بیشتر	پررنگ	نام محصول در بررسی
<em>	تأکید آوایی	کج	کلمه‌ای که معنا را عوض می‌کند
<i>	صدای دیگر، اصطلاح	کج	اصطلاح خارجی، نام علمی
<mark>	هایلایت به دلیل ارتباط	پس‌زمینه زرد	کلمه جستجوشده
<small>	متن فرعی و حاشیه‌ای	کوچک‌تر	توضیح حقوقی
<s>	دیگر درست یا مرتبط نیست	خط‌خورده	قیمت قدیمی
<del> / <ins>	حذف و اضافه در سند	خط‌خورده / زیرخط	نمایش ویرایش
<sub> / <sup>	زیرنویس / بالانویس	پایین / بالا	فرمول شیمی، توان
<bdi>	ایزوله کردن جهت متن	بدون تغییر	نام کاربری لاتین در متن فارسی
<bdo>	تعیین اجباری جهت	جهت برعکس	موارد خاص و آموزشی
<q> / <blockquote>	نقل‌قول کوتاه / بلند	گیومه / تورفتگی	نقل از منبع
<cite>	عنوان یک اثر	کج	نام کتاب یا مقاله
<code> / <kbd>	کد / ورودی صفحه‌کلید	فونت ثابت	نام تگ، کلید میانبر
<abbr>	مخفف	گاهی زیرخط نقطه‌چین	HTML، CSS
<time>	تاریخ یا زمان ماشینی	بدون تغییر	تاریخ رویداد

از تجربه تیم siloow: متن ترکیبی فارسی و انگلیسی

در وب‌اپلیکیشن‌های مدیریتی که تیم siloow برای مدیریت پروژه و تیم (وردپرس + React) و انبارداری ساخته است، بخش زیادی از داده‌ها ترکیبی‌اند: نام کاربری لاتین، کد کالا با خط تیره، شماره سفارش و توضیح فارسی، همه در یک ردیف. اولین نسخه‌ها مشکل آشنایی داشتند؛ کد کالایی مثل SKU-1024 کنار متن فارسی به‌صورت 1024-SKU دیده می‌شد یا علامت دونقطه به ابتدای جمله می‌پرید. راه‌حل ما این بود که هر داده پویا با جهت نامعلوم را داخل <bdi> یا المانی با dir="auto" بگذاریم. از آن به بعد این کار را در همه قالب‌ها به‌صورت پیش‌فرض انجام می‌دهیم، چون هزینه‌اش تقریباً صفر است و جلوی یک دسته کامل از باگ‌های نمایشی را می‌گیرد.

اشتباهات رایج در استفاده از تگ های متنی

• استفاده از strong یا b برای پررنگ کردن تمام یک پاراگراف یا تیتر تزئینی.
• پررنگ کردن کلمه کلیدی در همه جای متن به امید بهبود سئو.
• استفاده از i برای آیکون (مثلاً <i class="icon">)؛ برای آیکون بهتر است از span یا svg با متن جایگزین مناسب استفاده شود.
• استفاده از blockquote فقط برای ایجاد تورفتگی.
• استفاده از small یا sup برای تغییر ظاهری اندازه متن.
• نمایش داده‌های لاتین پویا در متن فارسی بدون bdi یا dir="auto".
• استفاده از تگ‌های منسوخ مثل <font>، <center> و <big> که در HTML امروزی جایی ندارند.

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

وقتی هدف فقط ظاهر است، تگ متنی انتخاب درستی نیست. اگر می‌خواهید تمام متن‌های یک کارت آبی و پررنگ باشند، یک کلاس CSS کافی است و نیازی به strong نیست. تگ‌های متنی را وقتی بگذارید که اگر استایل‌ها حذف شوند، باز هم معنای آن‌ها برای خواننده یا صفحه‌خوان مفید باشد.

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

1. یک پاراگراف قوانین ارسال بنویسید که یک هشدار با strong و یک توضیح فرعی با small داشته باشد.
2. جمله «من این کتاب را خواندم» را سه بار بنویسید و هر بار em را روی کلمه‌ای متفاوت بگذارید؛ تفاوت معنا را توضیح دهید.
3. یک لیست امتیاز کاربران با نام‌های فارسی و لاتین (مثل Reza_77) بسازید؛ یک بار بدون bdi و یک بار با bdi نتیجه را مقایسه کنید.
4. یک کارت محصول با قیمت قدیمی (s) و قیمت جدید بنویسید.
5. یک نقل‌قول از یک کتاب فارسی را با blockquote و نام کتاب را با cite نمایش دهید.

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

• تگ های متنی html برای معنا هستند و ظاهر آن‌ها با CSS قابل تغییر است.
• strong یعنی اهمیت، b یعنی جلب توجه؛ em یعنی تأکید، i یعنی صدای دیگر.
• mark برای هایلایت مرتبط، s برای قیمت قدیمی و small برای توضیح فرعی است.
• در سایت فارسی، داده لاتین پویا را با bdi یا dir="auto" ایزوله کنید.
• blockquote و q فقط برای نقل‌قول واقعی هستند.

همه قسمت‌های قبلی و بعدی دوره در صفحه کدپرس؛ آموزش رایگان HTML و CSS فارسی فهرست شده‌اند و اگر به قالب یا وب‌اپلیکیشن راست‌چین حرفه‌ای نیاز دارید، خدمات طراحی سایت siloow را ببینید. در قسمت بعد، «قسمت ۷ – لینک‌سازی با تگ a در HTML»، یاد می‌گیرید چطور صفحه‌ها را به هم وصل کنید.

منابع

• MDN: The Bidirectional Isolate element (bdi)
• MDN: The Strong Importance element (strong)
• WHATWG HTML Living Standard: Text-level semantics
• W3C Internationalization: Inline markup and bidirectional text

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