یه سری تگ کوچیک ولی خیلی بهدردبخور
تا اینجا با تگهای اصلی و پرکاربرد متنی آشنا شدیم. اما HTML5 یه سری تگ متنی دیگه هم داره که هرکدوم برای یه موقعیت خاص طراحی شدن؛ کمتر دیده میشن ولی وقتی بهشون نیاز داشته باشی، جایگزین مناسبی ندارن. تو این درس با mark، small، sub، sup، abbr، code، kbd و del/ins آشنا میشیم.
تگ mark: هایلایتکردن متن
<p>نتیجهی جستجو برای عبارت <mark>آموزش HTML5</mark> پیدا شد.</p>تگ mark برای هایلایتکردن بخشی از متن استفاده میشه که از نظر زمینهای (Context) اهمیت داره؛ مثلاً وقتی میخوای نشون بدی کدوم بخش از متن با عبارت جستجوشده مطابقت داره. مرورگر بهصورت پیشفرض این متن رو با پسزمینهی زرد رنگ نمایش میده، شبیه هایلایتکردن با ماژیک روی کاغذ.
نکتهی مهم اینه که mark با strong فرق داره: strong یعنی «این بخش مهمه»، اما mark یعنی «این بخش تو این زمینهی خاص برجسته شده»، حتی اگه ذاتاً مهمترین بخش متن نباشه.
تگ small: متن حاشیهای و فرعی
<p>قیمت: ۵۰۰,۰۰۰ تومان <small>(شامل مالیات بر ارزش افزوده)</small></p>تگ small برای متنهای حاشیهای، فرعی یا کماهمیتتر استفاده میشه؛ مثل توضیحات ریز، سلب مسئولیتها (Disclaimer) یا اطلاعات کپیرایت. مرورگر این متن رو با فونت کمی کوچیکتر نمایش میده. مثل strong و b، اینجا هم small یه معنای واقعی داره (محتوای فرعی)، نه فقط یه ابزار کوچککردن ظاهری فونت.
تگهای sub و sup: زیرنویس و بالانویس
<p>فرمول شیمیایی آب: H<sub>2</sub>O</p>
<p>نتیجه: ۵<sup>2</sup> = ۲۵</p>تگ sub (Subscript) عدد یا حرف رو کمی پایینتر از خط اصلی و با اندازهی کوچیکتر نمایش میده؛ کاربرد کلاسیکش تو فرمولهای شیمیایی مثل H2O هست. تگ sup (Superscript) برعکس، محتوا رو بالاتر از خط اصلی نشون میده؛ برای مواردی مثل توان ریاضی (۵ به توان ۲) یا ارجاعات پانویسی.
تگ abbr: مخففها و کوتهنوشتهها
<p><abbr title="HyperText Markup Language">HTML</abbr> پایهی ساختار صفحات وب است.</p>تگ abbr برای مشخصکردن یه مخفف یا کوتهنوشته استفاده میشه. ویژگی title معنای کامل اون مخفف رو نگه میداره؛ وقتی کاربر موس رو روی متن نگه داره، مرورگر بهصورت خودکار یه تولتیپ (Tooltip) کوچیک نشون میده که همون معنای کامل رو داره. این تگ هم برای خواننده مفیده، هم برای صفحهخوان که میتونه معنای کامل رو برای کاربر بخونه.
تگ code: نمایش کد برنامهنویسی
<p>برای چاپ متن در جاوااسکریپت از دستور <code>console.log()</code> استفاده میشود.</p>تگ code برای نمایش قطعاتی از کد برنامهنویسی داخل متن استفاده میشه. مرورگر معمولاً این محتوا رو با یه فونت تکفاصله (Monospace) نمایش میده که از فونت معمولی صفحه متفاوته و باعث میشه کد بهوضوح از بقیهی متن جدا دیده بشه.
تگ kbd: نمایش کلیدهای صفحهکلید
<p>برای کپی کردن، کلیدهای <kbd>Ctrl</kbd> + <kbd>C</kbd> را فشار دهید.</p>تگ kbd (Keyboard Input) مخصوص نشوندادن کلیدهای صفحهکلید یا ورودیهای کاربره؛ مثل آموزشهای راهنمای استفاده از یه نرمافزار. مرورگر معمولاً این متن رو هم با فونت تکفاصله نشون میده، شبیه به یه دکمهی کوچیک.
تگهای del و ins: نمایش تغییرات متن
<p>قیمت قبلی: <del>۸۰۰,۰۰۰ تومان</del> <ins>۶۵۰,۰۰۰ تومان</ins></p>تگ del (Deleted) برای نشوندادن محتوایی استفاده میشه که حذف شده؛ مرورگر بهصورت پیشفرض یه خط روی این متن میکشه (Strikethrough). تگ ins (Inserted) هم برعکس، برای محتوای تازهاضافهشده به کار میره و معمولاً با زیرخط نمایش داده میشه. کاربرد رایجشون تو صفحات قیمت (قیمت قبل و بعد از تخفیف) یا نمایش تغییرات یه سند هست.
یه مثال ترکیبی از چند تگ
<p>
<abbr title="Cascading Style Sheets">CSS</abbr> برای استایلدهی استفاده میشود.
برای مثال، دستور <code>color: red;</code> رنگ متن را قرمز میکند.
<small>(نسخههای قدیمی مرورگر ممکن است این ویژگی را پشتیبانی نکنند)</small>
</p>تو این مثال، از abbr برای مخفف CSS، از code برای نمایش دستور، و از small برای یه توضیح فرعی و کماهمیتتر استفاده کردیم؛ هر کدوم دقیقاً همون معنایی رو دارن که برای اون طراحی شدن.
جدول جمعبندی این تگها
| تگ | کاربرد | نمایش پیشفرض |
|---|---|---|
| mark | هایلایتکردن متن مرتبط با زمینه | پسزمینهی زرد |
| small | محتوای فرعی و حاشیهای | فونت کوچیکتر |
| sub | زیرنویس (فرمول شیمیایی) | پایینتر و کوچیکتر از خط |
| sup | بالانویس (توان ریاضی) | بالاتر و کوچیکتر از خط |
| abbr | مخفف همراه با توضیح کامل | خطچین زیر متن + تولتیپ |
| code | نمایش کد برنامهنویسی | فونت تکفاصله |
| kbd | نمایش کلید صفحهکلید | فونت تکفاصله |
| del | محتوای حذفشده | خطخورده |
| ins | محتوای تازهاضافهشده | زیرخطدار |
چند اشتباه رایج
- استفاده از sub یا sup صرفاً برای کوچیککردن ظاهری متن، بدون اینکه واقعاً زیرنویس یا بالانویس ریاضی/شیمیایی باشه.
- فراموشکردن ویژگی title تو تگ abbr، که باعث میشه معنای مخفف نه برای کاربر معمولی نمایش داده بشه، نه برای صفحهخوان قابلخوندن باشه.
- استفاده از del و ins فقط برای افکت بصری خطخوردگی یا زیرخط، بدون اینکه واقعاً محتوایی حذف یا اضافه شده باشه.
- استفاده از mark برای هر متنی که فقط میخوایم توجه بهش جلب بشه، بدون ارتباط واقعی با یه زمینهی جستجو یا برجستهسازی معنادار.
بهترین روشها
- هر تگ رو دقیقاً برای همون معنایی که طراحی شده استفاده کن، نه صرفاً برای ظاهر.
- همیشه تو abbr، ویژگی title رو با معنای کامل مخفف پر کن.
- برای کدهای برنامهنویسی همیشه از code استفاده کن تا هم خواناتر باشه، هم از نظر معنایی درست باشه.
نکتهی سئو
تگ mark میتواند به موتورهای جستجو کمک کند تا بخشهای مرتبط با عبارت جستجوشده را در صفحه بهتر تشخیص دهند، مخصوصاً در صفحات نتایج جستجوی داخلی سایت.
نکتهی دسترسیپذیری
تگ abbr همراه با ویژگی title به کاربران صفحهخوان کمک میکند معنای کامل یک مخفف را بدون نیاز به جستجوی جداگانه بشنوند؛ این موضوع بهخصوص برای مخففهای تخصصی یا کمترشناختهشده اهمیت زیادی دارد.
جمعبندی
HTML5 مجموعهای از تگهای متنی تخصصی مثل mark، small، sub، sup، abbr، code، kbd، del و ins ارائه میدهد که هرکدام برای یک موقعیت معنایی خاص طراحی شدهاند. استفادهی درست از این تگها، هم خوانایی محتوا را برای کاربر عادی بالا میبرد و هم اطلاعات معناداری برای موتورهای جستجو و فناوریهای کمکی فراهم میکند.