فرمت‌بندی و تأکید متن در HTML؛ تفاوت strong، em، b و i

در درس قبل با عنوان‌ها و پاراگراف‌ها در HTML آشنا شدیم و یاد گرفتیم چگونه با تگ‌های h1 تا h6 و p یک متن را منظم و خوانا کنیم.

حالا می‌خواهیم یک قدم جلوتر برویم و ببینیم وقتی بخشی از متن مهم‌تر است، نیاز به تأکید دارد یا فقط می‌خواهیم توجه کاربر را به آن جلب کنیم، از چه عناصر HTML باید استفاده کنیم.

در این درس با فرمت‌بندی و تأکید متن در HTML آشنا می‌شویم و تفاوت عناصر strong، em، b و i را بررسی می‌کنیم.

این عناصر ممکن است در ظاهر شبیه هم دیده شوند، اما معنی یکسانی ندارند. اگر فقط بر اساس ظاهر انتخابشان کنیم، بخش مهمی از مفهوم HTML را از دست می‌دهیم.

فرمت‌بندی و تأکید متن در HTML یعنی چه؟

در HTML بعضی عناصر برای مشخص کردن معنی و اهمیت متن استفاده می‌شوند و بعضی دیگر برای جلب توجه یا مشخص کردن بخشی از متن با نقش خاص به کار می‌روند.

برای مثال:

<p>
    لطفاً قبل از ادامه
    <strong>قوانین سایت را مطالعه کنید</strong>.
</p>

در این مثال عبارت داخل strong صرفاً قرار نیست ضخیم‌تر دیده شود؛ بلکه اهمیت بیشتری نسبت به متن اطراف دارد.

نمونه دیگر:

<p>
    من گفتم <em>امروز</em> این کار را انجام بده.
</p>

در اینجا روی کلمه «امروز» تأکید شده است و این تأکید می‌تواند روی معنی جمله اثر بگذارد.

تگ strong در HTML چیست؟

عنصر strong برای محتوایی استفاده می‌شود که دارای اهمیت زیاد، جدیت یا فوریت است.

<p>
    <strong>هشدار:</strong>
    قبل از حذف حساب، از اطلاعات خود نسخه پشتیبان تهیه کنید.
</p>

در بیشتر مرورگرها محتوای strong به‌صورت پیش‌فرض با ضخامت بیشتر نمایش داده می‌شود، اما دلیل استفاده از strong ظاهر آن نیست؛ معنی و اهمیت محتوا است.

تگ b در HTML چیست؟

عنصر b برای جلب توجه به بخشی از متن استفاده می‌شود، بدون اینکه لزوماً آن متن از نظر معنایی مهم‌تر، فوری‌تر یا دارای تأکید خاص باشد.

<p>
    محصول <b>Vitrin Pro</b> برای طراحی فروشگاه آماده شده است.
</p>

تفاوت strong و b در HTML چیست؟

strong زمانی استفاده می‌شود که متن واقعاً دارای اهمیت، جدیت یا فوریت بیشتری باشد.

b زمانی مناسب است که می‌خواهیم توجه کاربر به بخشی از متن جلب شود، اما نمی‌خواهیم اهمیت معنایی بیشتری به آن بدهیم.

آیا برای Bold کردن متن باید از strong یا b استفاده کنیم؟

اگر هدف شما فقط این است که متن از نظر ظاهری ضخیم شود، بهتر است این کار را با CSS انجام دهید.

.important-text {
    font-weight: 700;
}

• اگر متن مهم یا فوری است، strong مناسب است.
• اگر فقط می‌خواهیم توجه به آن جلب شود، b می‌تواند مناسب باشد.
• اگر فقط ظاهر ضخیم می‌خواهیم، CSS انتخاب بهتری است.

تگ em در HTML چیست؟

عنصر em برای تأکید گفتاری یا معنایی روی بخشی از متن استفاده می‌شود.

<p>
    من گفتم <em>امروز</em> پروژه را تمام کن.
</p>

اگر محل em را تغییر دهیم، ممکن است برداشت جمله هم تغییر کند.

تگ i در HTML چیست؟

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

<p>
    اصطلاح <i>responsive design</i>
    در طراحی وب بسیار پرکاربرد است.
</p>

تفاوت em و i در HTML چیست؟

em برای تأکید روی بخشی از جمله استفاده می‌شود.

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

آیا برای Italic کردن متن باید از em یا i استفاده کنیم؟

اگر تنها هدف شما تغییر ظاهر متن و ایتالیک کردن آن است، بهتر است از CSS استفاده کنید.

.italic-text {
    font-style: italic;
}

مقایسه strong، b، em و i

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

ظاهر پیش‌فرض فقط رفتار رایج مرورگرها را نشان می‌دهد و نباید برای انتخاب عنصر فقط به ظاهر تکیه کنیم.

آیا می‌توان strong و em را داخل هم قرار داد؟

بله، اگر معنی محتوا چنین ساختاری را توجیه کند، عناصر متنی می‌توانند داخل یکدیگر قرار بگیرند.

<p>
    <strong>
        این فایل را
        <em>قبل از ادامه</em>
        ذخیره کنید.
    </strong>
</p>

چرا معنی عناصر مهم‌تر از ظاهر آنها است؟

HTML یک زبان نشانه‌گذاری معنایی است. یعنی تا جای ممکن باید مشخص کنیم هر بخش از محتوا چه نقشی دارد.

اگر فقط به ظاهر فکر کنیم، ممکن است یک عنصر معنایی را فقط برای ضخیم یا ایتالیک شدن متن انتخاب کنیم؛ در حالی که این کار بهتر است با CSS انجام شود.

تأثیر strong و em بر دسترس‌پذیری

استفاده از عنصر مناسب می‌تواند به فناوری‌های کمکی کمک کند معنی محتوا را بهتر تشخیص دهند.

با این حال متن باید حتی بدون استایل یا شیوه خاص خواندن نیز واضح و قابل‌فهم باشد.

آیا strong و em برای SEO مفید هستند؟

بهتر است از strong و em برای معنی واقعی خودشان استفاده کنیم، نه با هدف دستکاری رتبه در موتور جستجو.

پررنگ یا ایتالیک کردن تعداد زیادی کلمه کلیدی، یک روش اصولی برای SEO نیست و می‌تواند خوانایی محتوا را کاهش دهد.

آیا b و i هنوز در HTML امروزی قابل استفاده هستند؟

بله. عناصر b و i منسوخ نشده‌اند و همچنان در HTML کاربرد معنایی مشخصی دارند.

اما نباید آنها را صرفاً نسخه قدیمی strong و em بدانیم.

تگ u در HTML چیست؟

عنصر u فقط برای زیرخط‌دار کردن هر متن دلخواه ساخته نشده است. اگر فقط ظاهر زیرخط می‌خواهید، معمولاً CSS انتخاب بهتری است.

.underlined {
    text-decoration: underline;
}

تگ mark در HTML چیست؟

اگر هدف شما مشخص کردن یا Highlight کردن بخشی از متن به دلیل ارتباط آن با زمینه فعلی است، عنصر mark می‌تواند مناسب باشد.

<p>
    نتیجه جستجو برای
    <mark>HTML</mark>
    پیدا شد.
</p>

تگ small در HTML چیست؟

عنصر small برای بعضی توضیحات جانبی، نوشته‌های حقوقی یا متن‌های کم‌اهمیت‌تر از متن اصلی استفاده می‌شود.

اشتباهات رایج در فرمت‌بندی متن HTML

استفاده از strong فقط برای ضخیم کردن

اگر هدف فقط ظاهر است، از CSS استفاده کنید.

استفاده از em فقط برای Italic کردن

اگر متن تأکید معنایی ندارد و فقط ظاهر ایتالیک می‌خواهید، CSS انتخاب مناسب‌تری است.

در نظر گرفتن b و strong به‌عنوان یک عنصر

ممکن است خروجی ظاهری این دو شبیه باشد، اما معنی آنها یکسان نیست.

در نظر گرفتن i و em به‌عنوان یک عنصر

em تأکید را مشخص می‌کند، در حالی که i برای متن با ماهیت یا لحن متفاوت استفاده می‌شود.

پررنگ کردن بیش از حد متن

اگر تقریباً تمام پاراگراف را پررنگ کنیم، دیگر هیچ بخش خاصی توجه کاربر را جلب نمی‌کند.

یک مثال کامل از فرمت‌بندی متن

<p>
    <strong>نکته مهم:</strong>
    برای یادگیری HTML بهتر است مثال‌ها را
    <em>خودتان</em>
    تایپ کنید.
</p>

<p>
    اصطلاح
    <i>semantic HTML</i>
    به استفاده از عناصر HTML براساس معنی آنها اشاره دارد.
</p>

<p>
    در این درس عناصر
    <b>strong، em، b و i</b>
    را بررسی کردیم.
</p>

تمرین اول: عنصر مناسب را انتخاب کنید

• یک هشدار امنیتی بسیار مهم
• تأکید روی یک کلمه در جمله
• یک اصطلاح انگلیسی در متن فارسی
• نام یک محصول که می‌خواهیم توجه کاربر را به آن جلب کنیم

تمرین دوم: معنی جمله را با em تغییر دهید

جمله زیر را در HTML بنویسید:

من امروز این فایل را ارسال می‌کنم.

یک بار روی کلمه «من»، یک بار روی «امروز» و یک بار روی «این فایل» با em تأکید کنید و تفاوت برداشت جمله را بررسی کنید.

تمرین سوم: صفحه را با DevTools بررسی کنید

یک صفحه وب را باز کنید و با Inspect چند متن ضخیم یا ایتالیک را بررسی کنید و ببینید از strong، b، em، i یا CSS استفاده شده است.

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

در این درس با فرمت‌بندی و تأکید متن در HTML آشنا شدیم و یاد گرفتیم:

• strong برای اهمیت، جدیت یا فوریت محتوا استفاده می‌شود.
• b برای جلب توجه بدون افزایش اهمیت معنایی است.
• em برای تأکید معنایی یا گفتاری استفاده می‌شود.
• i برای متن با نقش، لحن یا ماهیت متفاوت کاربرد دارد.
• ظاهر مشابه عناصر به معنی یکسان بودن کاربرد آنها نیست.
• برای تغییر صرفاً ظاهری بهتر است از CSS استفاده کنیم.
• mark برای برجسته‌سازی محتوای مرتبط با زمینه کاربرد دارد.
• small برای بعضی متن‌های جانبی یا کم‌اهمیت‌تر مناسب است.

جمع‌بندی

در HTML بهتر است عناصر را براساس معنی محتوا انتخاب کنیم، نه فقط بر اساس ظاهر پیش‌فرض آنها در مرورگر.

strong و b ممکن است هر دو ضخیم دیده شوند، اما اولی نشان‌دهنده اهمیت است و دومی بیشتر برای جلب توجه به متن استفاده می‌شود.

به همین شکل، em و i ممکن است هر دو ایتالیک نمایش داده شوند، اما em بیانگر تأکید است و i برای متنی با نقش یا حالت متفاوت کاربرد دارد.

اگر فقط می‌خواهیم ظاهر متن را تغییر دهیم، CSS ابزار مناسب‌تری است. HTML باید تا حد امکان نقش و معنای محتوا را مشخص کند.