در این درس میخوایم یاد بگیریم چطور بخشی از متن رو مهم یا تأکیدشده نشون بدیم.
یا به زبان سادهتر، چطور متن رو به صورت Bold یا Italic نمایش بدیم.
👀 یه نکته اول درس:
ممکنه این درس برای موضوع سادهای مثل bold و italic، کمی وسواسی بهنظر برسه.
اگه فقط دنبال جواب سریع هستی، اینه:
- برای bold کردن متن، از تگ
<strong>استفاده کن - برای italic کردن متن، از تگ
<em>استفاده کن
ولی اگه میخوای بدونی چرا بهتره از این تگها استفاده کنیم و پشتش چه دلایلی وجود داره، پس تا انتهای این ویدیو همراه باش.
🔸 بخش اول: تگ <strong> — نشون دادن اهمیت زیاد
توی ادیتور یه جمله داریم:
When eating, it is imperative that you chew.
ما واژهی imperative رو داخل تگ <strong> قرار دادیم:
<p>When eating, it is <strong>imperative</strong> that you chew.</p>در مرورگر میبینیم که کلمهی “imperative” به صورت بولد نمایش داده میشه.
اما حالا یه نکته جالب:
در HTML، یه تگ دیگه هم به نام <b> وجود داره — که مخفف bold هست.
اگه همون کلمه رو داخل <b> بذاریم، نتیجه توی مرورگر دقیقاً همونه — یعنی کلمه بولد میشه:
<p>When eating, it is <b>imperative</b> that you chew.</p>اما با وجود اینکه این تگ کار میکنه، توصیه اکید من اینه که از <b> استفاده نکنی.
برگردیم به استفاده از <strong> و ببینیم چرا بهتره این کار رو بکنیم.
📌 چرا از <strong> استفاده کنیم؟
تگ <strong> یعنی این قسمت از متن از لحاظ معنایی مهمه.
درسته که مرورگرها به طور پیشفرض این تگ رو بولد نشون میدن، ولی نکته اینجاست:
تگ <strong> ذاتاً ربطی به “بولد” بودن نداره — فقط داره میگه این متن مهمه.
مثال:
فرض کن یه سال دیگه تصمیم میگیری بهجای اینکه واژههای bold رو بولد نشون بدی، فقط رنگشون رو قرمز کنی.
اگه از تگ <strong> استفاده کرده باشی، خیلی راحت با CSS میتونی به همه تگهای strong یه استایل بدی.
ولی اگه از <b> استفاده کرده باشی، اون تگ فقط داره میگه “این متن باید بولد باشه” — نه اینکه مهمه.
🧠 نتیجه: تگ <b> فقط ظاهر رو تعریف میکنه، ولی <strong> معنای محتوا رو هم حفظ میکنه.
برای همین همیشه از <strong> استفاده کن.
🔸 بخش دوم: تگ <em> — تأکید و ایتالیک
بیایید حالا یه جمله دیگه رو بررسی کنیم:
The cat did not like the dog.
اینجا میخوایم روی واژهی not تأکید کنیم.
برای این کار از تگ <em> استفاده میکنیم:
<p>The cat did <em>not</em> like the dog.</p>توی مرورگر، این باعث میشه “not” به صورت italic نمایش داده بشه.
اما دقت کن: تگ <em> فقط ظاهر ایتالیک نداره — داره تأکید رو نشون میده.
برای مثال، یه صفحهخوان (Screen Reader) ممکنه این جمله رو اینطوری بخونه:
The cat did NOT like the dog.
یعنی تأکید رو موقع خوندن اجرا میکنه.
🔸 تفاوت با <i> — تگ ایتالیک ساده
حالا یه جمله دیگه:
The word tree is typically used as a noun.
اینجا میخوایم کلمهی tree به صورت ایتالیک باشه،
اما نمیخوایم روش تأکید کنیم — فقط داریم از اون بهعنوان یه “واژه” صحبت میکنیم.
پس چیکار کنیم؟
راه ساده استفاده از تگ <i> هست:
<p>The word <i>tree</i> is typically used as a noun.</p>توی مرورگر هم درست کار میکنه — tree ایتالیک میشه.
اما مثل قبل، پیشنهاد من اینه که از <i> استفاده نکنید، مگر در موارد خاص.
📌 جایگزین پیشنهادی برای <i>: تگ <dfn>
برای این مثال خاص، بهتره از تگ <dfn> استفاده کنیم — مخفف definition.
<p>The word <dfn>tree</dfn> is typically used as a noun.</p>این تگ هم ظاهر ایتالیک داره، ولی معنای محتوایی رو هم منتقل میکنه:
یعنی داریم “تعریف” یه واژه رو میگیم.
✴️ وقتی هیچ تگ دقیقی وجود نداره…
گاهی اوقات هیچ تگ HTML دقیقی برای کار خاصت وجود نداره.
توی این موارد، میتونی از <i> استفاده کنی، اما حتماً بهش یه کلاس اختصاصی بده:
<i class="term">example</i>بعدش میتونی با CSS استایل بده یا در ترجمههای چندزبانه، راحتتر اونو مدیریت کنی.
مثلاً بعضی زبانها ممکنه اصلاً از ایتالیک استفاده نکنن.
🧾 جمعبندی نهایی:
- برای نشان دادن اهمیت → از
<strong>استفاده کن - برای تأکید کلامی → از
<em>استفاده کن - برای اشاره به واژهها یا اصطلاحات → از
<dfn>استفاده کن (و نه<i>) - از تگهای
<b>و<i>فقط در موارد خاص استفاده کن، اون هم با کلاس مخصوص
❌ نکتهی خیلی مهم قبل از پایان:
فرض کن یه صفحه داری با چند پاراگراف متن، و از لحاظ طراحی دوست داری همه متنها بولد باشن.
لطفاً این کار رو با استفاده از <strong> انجام نده!
چرا؟ چون strong یعنی اون متن مهمه — نه اینکه فقط طراحیاش اینجوری باشه.
همینطور، اگه دلت خواست همه متنها ایتالیک باشن، از <em> استفاده نکن!
طراحی مربوط به CSS هست — نه HTML.
📌 HTML وظیفهاش توصیف محتواست، نه ظاهر.
برای ظاهر باید از CSS استفاده کنی، که توی درسهای بعدی یاد میگیریم.
🎯 تا درس بعدی، تمرین کن، تجربه کن، و با دقت کدنویسی کن!