۴ بازدید

آخرین به‌روزرسانی: ۲۳ دی ۱۴۰۲

زمان مطالعه: ۵ دقیقه

«HTML» به عنوان نوعی زبان نشانه‌گذاری فرامتن حاوی تگ‌های مختلفی است که هرکدام یک از این تگ‌ها دارای کاربردهای خاص خود هستند. تگ i

یکی از مهم‌ترین و کاربردی‌ترین تگ‌های HTML است که در نسخه‌های قبلی HTML، از این تگ برای نمایش متن به صورت مورب یا ایتالیک استفاده می‌شد اما با ظهور «HTML5»، رسالت این تگ عوض شده است. در این مطلب از «مجله فرادرس» به صورت کامل به بررسی تگ i در HTML خواهیم پرداخت و در کنار آن روش‌های جایگزین این تگ مانند استفاده از استایل‌های CSS را بررسی خواهیم کرد. همچنین در این مطلب تمایز بین تگ‌های i

و em

بحث خواهد شد.

تگ i در HTML چیست؟

تگ i

که مخفف «عنصر متن اصطلاحی» (Idiomatic Text Element) یا همان حالت ایتالیک است، گستره خاصی از متن را نشان می‌دهد که نشان دهنده تغییر در حالت یا کیفیت متن بوده و به صورت بصری به صورت مورب ارائه می‌شود. به طور سنتی و در حالی معمولی برای ایتالیک کردن متن از تگ i

استفاده می‌شود ولی در توسعه وب مدرن، اغلب توصیه می‌شود از تگ em

برای تأکید معنایی به جای تگ i

استفاده شود. در ادامه چندین سناریو بررسی خواهند شد که در آن استفاده از تگ i

می‌تواند سودمند باشد.

 استفاده از تگ i در اچ تی ام ال برای نشان دادن عبارت زبان های دیگر

کاربران می‌توانند از تگ i

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

1<p>Hello friends. Welcome to this educational article from <i>Faradars Magazine</i>.</p>

در کد بالا بخشی از متن یعنی Faradars Magazine

 از بخشهای دیگر جمله در شیوه نمایش متمایز بوده که خروجی آن به صورت زیر است:

همچنین یکی دیگر از سناریوهای محتمل برای استفاده از تگ i در ‌HTML زمانی است که کاربر بخواهد نشان دهد که کلمه یا کلماتی خاص از متن به زبان دیگری هستند که در این رابطه از تگ i

همراه با ویژگی مانند ویژگی  lang

استفاده می‌شود و مثال زیر برای بیان این هدف است:

1<p>The first phrase that Matt learned in Italian is <i lang="it">Vorrei un caffè</i>, which translates to "I'd like a coffee".</p>

در مثال فوق عبارت Vorrei una birra

نوعی عبارت ایتالیایی محسوب می‌شود که با تگ i

، از مابقی متن انگلیسی متفاوت به نظر می‌رسد و خروجی آن در مرورگر به صورت زیر است:

استفاده از تگ i برای نشان دادن افکار دیگران

می توان از تگ i

برای تأکید بر افکار خصوصی افراد استفاده کرد که مثال زیر برای بیان این هدف است:

1<p>After Ben met his girlfriend's parents he thought to himself, <i>I really hope they liked me</i>.</p>

خروجی مثال فوق به صورت زیر است:

در مثال فوق جمله I really hope they liked me

از سایر بخش‌های متن متمایز است.

استفاده از تگ i برای نام بردن کشتی

ممکن است این سناریو کمی عجیب به نظر برسد اما واقعا برای نام بردن كشتی‌ها و ناوها از تگ i در HTML استفاده می‌شود. مثال زیر نحوه استفاده از این تگ برای نام بردن کشتی‌ها را نشان می‌دهد:

1<p>The <i>USS Arizona</i> was a United States Navy battleship built in the 1910's.</p>

در مثال فوق USS Arizona

نام کشتی خاصی است که با استفاده از تگ i

نمایش داده شده و خروجی آن را در ادامه این مطلب از مجله فرادرس آورده‌ایم.

استفاده از تگ i برای نشان دادن اصطلاحات طبقه بندی شده

می‌توان از تگ i

برای برجسته کردن اصطلاحات در زمینه طبقه‌بندی استفاده کرد. برای مثال، طبق کنوانسیون تنوع زیستی، «تاکسونومی» (Taxonomy) علم نام‌گذاری، توصیف و طبقه‌بندی موجودات است که تمامی گیاهان، جانوران و میکروارگانیسم‌ها را در سطح جهانی شامل می‌شود. در اینجا مثالی از استفاده از تگ i

برای عبارت Felis catus

به معنای نام دیگر گربه خانگی آورده شده است:

1<p>Another term for the domestic cat would be <i>Felis catus</i>.</p>

خروجی مثال فوق به صورت زیر است:

در خروجی فوق عبارت Felis catus

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

و تگ i در HTML خواهیم پرداخت.

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

کاربران ممکن است گمان کنند که تگ‌های «i» و «em» معنی یکسانی دارند زیرا به طور مشابه در مرورگر ظاهر می‌شوند. با این حال، این تگ‌ها دارای معانی متمایزی هستند. تگ «em» که نشان‌دهنده تأکید است، زمانی استفاده می‌شود که کاربر بخواهد کلمه یا قسمتی از متن را برجسته کرده و روی آن تأکید کند و این در حالی است که در تگ «i» هیچ تأکید اضافه‌ای برای متن محصور شده در نظر گرفته نمی‌شود.

در اینجا مثالی با استفاده از تگ em

آورده شده است:

1 <p>Quit being a baby and just <em>do</em> it already!</p>

خروجی مثال بالا به صورت زیر است:

در مثال فوق نوعی تاکید اضافی بر کلمه do

اعمال شده که این در حالی است تگ i

این تاکید اضافی را ندارد.

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

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

1<p class="demo-para">Hi welcome to Faradras Mag.</p>

همچنین نحوه انجام کار بالا در CSS به صورت زیر است که توصیه می‌شود کاربران از این روش بهره ببرند:

1.demo-para {
2  font-style: italic;
3}

خروجی مثال فوق به صورت زیر خواهد بود:

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

آیا باید از تگ i یا span برای آیکون ها استفاده کرد؟

بحث‌های مفصلی در مورد اینکه آیا استفاده از تگ‌های «i» یا «span» هنگام ترکیب آیکون‌ها در وب‌سایت‌ها صحیح است یا خیر، وجود دارد. برخی استدلال می‌کنند که استفاده از تگ i در HTML برای این هدف رایج و قابل قبول است، در حالی که برخی دیگر معتقدند این کار استفاده نادرستی از این تگ بوده و به‌جای آن استفاده از تگ‌های «span» را توصیه می‌کنند. «Font Awesome»، به عنوان یکی از کتابخانه آیکون محبوب، این بحث را تأیید می‌کند و می‌گوید که بیشتر کاربران ترجیح می‌دهند از تگ «i» به دلیل مختصر بودن آن استفاده کنند و از طرفی دیگر از تگ «em» برای تأکید یا کج کردن متن با رویکرد معناشناسی استفاده می‌شود. با این حال، اگر این رویکرد با اولویت‌های کاربر مطابقت نداشته باشد، استفاده از تگ «span» از نظر معنایی صحیح‌تر است.

سخن پایانی

تگ i در HTML بیانگر گستره‌ای از متن بوده که نشان‌دهنده تغییر در حالت یا کیفیت متن است ولی با این حال برای تأکید بر متن، تگ مناسب‌تری برای این کار وجود دارد که آن هم تگ em

است. بیشتر افراد حرفه‌ای و کار بلد توصیه می‌کنند که نباید از تگ i

برای استایل‌دهی به ظاهر متن استفاده کرد. در عوض، آن‌ها استفاده از ویژگی CSS font-style

 برای ایتالیک کردن متن را توصیه می‌کنند.

در مطلب فوق از «مجله فرادرس» در کنار بیان رسالت تگ i در اچ تی ام ال، سناریوهای استفاده از این تگ، فرق این تگ با تگ em

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