فرمتدهی متن در HTML: ظاهر در برابر معنا
در HTML، ما دو دسته تگ برای تغییر شکل متن داریم: یکیها فقط ظاهر متن رو عوض میکنن (مثل ضخیم یا کج کردن)، و اون یکیها هم ظاهر رو عوض میکنن و هم به مرورگر و موتورهای جستجو میگن که این متن اهمیت داره.
بیاییم این دو دسته رو با هم مقایسه کنیم:
۱. تگهای ظاهری (Visual Tags)
این تگها فقط به مرورگر میگن که متن رو چطور نمایش بده. هیچ معنای خاصی پشتشون نیست.
- <b> (Bold): متن رو ضخیم میکنه.
- <i> (Italic): متن رو کج (مورب) میکنه.
- <u> (Underline): زیر متن خط میکشه.
۲. تگهای معنایی (Semantic Tags)
این تگها هم متن رو ضخیم یا کج میکنن، اما پیام مهمتری دارن: «این متن مهمه!»
- <strong>: متن رو ضخیم میکنه و به معنای «اهمیت زیاد» هست.
- <em>: متن رو کج میکنه و به معنای «تأکید کلامی» هست.
💡 چرا این تفاوت مهمه؟
شاید بگی «هر دو که همین شکلی دیده میشن!» اما تفاوتهای ریزی دارن:
-
دسترسیپذیری (Accessibility): نرمافزارهای صفحهخوان (برای نابینایان) وقتی به <strong> یا <em> میرسن، لحن یا سرعت خواندن رو تغییر میدن تا کاربر متوجه اهمیت متن بشه. اما برای <b> یا <i> تغییری ایجاد نمیکنن.
-
سئو (SEO): موتورهای جستجو مثل گوگل به تگهای معنایی مثل <strong> بیشتر توجه میکنن و فکر میکنن اون کلمات کلیدی هستن.
-
استایلدهی پیشرفته: اگر بخواهی با CSS فقط متنهای «مهم» رو هایلایت کنی، میتونی روی <strong> استایل بدی بدون اینکه روی <b> اثر بذاره.
عامرتجارت خلیج فارس
تگ های مربوط به قالب بندی متن
| تگ |
توضیحات |
مثال |
<b> |
متن را به صورت ضخیم یا bold نمایش میدهد. |
این متن ضخیم است. |
<strong> |
متن را به صورت ضخیم یا strong نمایش میدهد. |
این متن ضخیم و مهم است. |
<em> |
متن را به صورت مورب یا emphasized (تأکید شده) نمایش میدهد. |
این متن مورب و تأکید شده است. |
<i> |
متن را به صورت مورب یا italic نمایش میدهد. |
این متن فقط مورب است. |
<small> |
متن را به صورت کوچک نمایش میدهد. |
این متن کوچک است. |
<big> |
متن را به صورت بزرگ نمایش میدهد. |
این متن بزرگ است. |
<sub> |
متن را به صورت زیرنویس (subscripted) نمایش میدهد. |
H2O |
<sup> |
متن را به صورت بالانویس (superscripted) نمایش میدهد. |
X2 + Y2 |
<ins> |
متن را به صورت زیرخطدار (inserted) نمایش میدهد. |
این متن زیرخط دارد. |
<del> |
متن را به صورت خطخورده (deleted) نمایش میدهد. |
این متن خط خورده است. |
تگ های "computer output" در HTML
| تگ |
توضیحات |
مثال |
<b> |
متن را به صورت ضخیم یا bold نمایش میدهد. |
این متن ضخیم است. |
<strong> |
متن را به صورت ضخیم یا strong نمایش میدهد. |
این متن ضخیم و مهم است. |
<em> |
متن را به صورت مورب یا emphasized (تأکید شده) نمایش میدهد. |
این متن مورب و تأکید شده است. |
<i> |
متن را به صورت مورب یا italic نمایش میدهد. |
این متن فقط مورب است. |
<small> |
متن را به صورت کوچک نمایش میدهد. |
این متن کوچک است. |
<big> |
متن را به صورت بزرگ نمایش میدهد. |
این متن بزرگ است. |
<sub> |
متن را به صورت زیرنویس (subscripted) نمایش میدهد. |
H2O |
<sup> |
متن را به صورت بالانویس (superscripted) نمایش میدهد. |
X2 + Y2 |
<ins> |
متن را به صورت زیرخطدار (inserted) نمایش میدهد. |
این متن زیرخط دارد. |
<del> |
متن را به صورت خطخورده (deleted) نمایش میدهد. |
این متن خط خورده است. |
تگ های Citations ،Quotations و Definition در HTML
| تگ |
توضیحات |
مثال |
<code> |
متن را به صورت کد کامپیوتری نمایش میدهد. |
var x = 10; |
<kbd> |
متن را به صورت ورودی کیبورد نمایش میدهد. |
Ctrl + C |
<samp> |
متن را به صورت نمونه خروجی کد نمایش میدهد. |
Error: File not found. |
<tt> |
متن را به صورت فونت تلهتایپ (مونواسپیس) نمایش میدهد. |
این متن فونت تلهتایپ دارد. |
<var> |
متن را به صورت متغیر نمایش میدهد (معمولاً مورب). |
مقدار x برابر است با ۵. |
<pre> |
متن را به صورت پیشفرمتشده نمایش میدهد (فاصلهها و خطوط حفظ میشوند). |
خط اول
خط دوم (با تورفتگی)
خط سوم
|