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

قالب متنی

در جلسه ی قبل در مورد attribute ای به نام style صحبت کردیم و با هم دیدیم که می توان با آن شکل ظاهری عناصر را در HTML تغییر داد اما وقتی صحبت از متون عادی می شود، HTML موارد خاصی را برای تغییر چهره شان دارد!

  • <b> متون را bold (پررنگ) می کند.
  • <strong> نشان دهنده ی یک متن مهم است.
  • <i> متون را italic (مورب) می کند.
  • <em> بر متن تاکید می کند.
  • <mark> متن را علامت گذاری می کند.
  • <small> متن را کوچک می کند.
  • <del> نشان دهنده ی متن حذف شده است.
  • <ins> نشان دهنده ی متن اضافه شده است.
  • <sub> نشان دهنده ی متن زیروند است.
  • <sup> نشان دهنده ی متن بالاوند است.

سوال: برخی از این تگ ها متن را به یک شکل نمایش می دهند. چرا برای یک شکل چند تگ مختلف داریم؟

پاسخ: استفاده ی صحیح از این تگ ها بسیار مهم است! اگر بنا بر تغییر ظاهر متن بود، می توانستیم از همان style و زبان CSS استفاده کنیم اما اینجا بحث بر سر برنامه نویسی semantic (معنایی) است. هر کدام از این تگ ها علاوه بر نمایش دادن متن به شکل متفاوت، معنی متفاوتی برای موتورهای جستجو دارند. در ادامه ی این دوره بیشتر در مورد آن ها صحبت می کنیم.

تگ های <b> و <strong>

حتما متوجه شده اید که هر دوی این تگ ها متن را bold و پررنگ می کنند و در ذهنتان سوال می کنید که فرقشان چیست؟ باید بگویم که <b> تنها متن را پررنگ می کند و هیچ معنایی فراتر از آن ندارد:

مشاهده ی خروجی در JSBin

اما تگ <strong> علاوه بر پررنگ کردن متن یا کلمه، معنی strong (قوی یا مهم) را به آن متن اضافه می کند. شما در عمل و در کدهایتان هیچ تفاوتی را متوجه نمی شوید اما موتورهای جستجو بین این تگ ها و معانی فرق قائل می شوند. مثالی از تگ strong:

مشاهده ی خروجی در JSBin

تگ های <i> و <em>

دقیقا مانند تفاوت تگ های قبلی، تگ <i> در زبان HTML متن مورد نظرتان را مورب می کند و هیچ اهمیت خاص یا معنی دیگری به آن اضافه نمی کند: