اچ تی ام ال (HTML)برنامه نویسیطراحی سایتفرانت اند (Front-end)

آموزش کامل تگ های عبارتی در HTML و بررسی کاربرد آن ها

تگ های عبارتی (Phrase tags) در زبان HTML

در زبان برنامه نویسی HTML، عده‌ای از تگ‌ها تحت عنوان “تگ های عبارتی” یا Phrase tags شناخته می شوند. این تگ‌ها اهداف خاصی را دنبال نموده و جهت معنی بخشیدن به یک متن یا قسمتی از آن به کار می‌روند. در این پست از بلاگ ویتکس به معرفی تگ های عبارت در برنامه نویسی HTML خواهیم پرداخت. پس بار دیگر با بلاگ ویتکس همراه شوید …

انواع تگ‌های عبارتی در زبان HTML عبارت ‌اند از :

  • تگ strong
  • تگ em
  • تگ address
  • تگ blockquote
  • تگ q
  • تگ mark
  • تگ abbr
  • تگ acronym (در HTML5 پشتیبانی نمی شود)
  • تگ code
  • تگ dfn
  • تگ kbd

 

تگ strong

تگ strong گونه‌ای از تگ های عبارتی Inline می‌باشد که برای پررنگ کردن یک متن یا بخشی از آن استفاده می‌شود و بدین ترتیب می‌توان قسمت‌های مهم یک متن را به کاربر و ربات هایی که صفحه HTML را بررسی می‌کنند، معرفی نمود.

تگ strong با <strong> شروع و با </strong> خاتمه می‌یابد.

 

مثال: تگ strong

نمایش خروجی!

استایل پیشفرض CSS برای تگ strong

به صورت پیشفرض، مرورگرهای وب تگ strong را با استایل CSS زیر نمایش می‌دهند (فونت محتوای داخل تگ strong به صورت bold (پررنگ) نمایش داده می‌شود) :

 

مقایسه تگ strong و تگ b

شباهت تگ‌های strong و b در آن است که هر دو آن‌ها Inline می‌باشند و از دید کاربران نیز استایل یکسانی دارند؛ به عبارتی هر متنی که در این تگ‌ها قرار می‌گیرد، از نظر ظاهری به صورت bold (پررنگ) خواهد بود.

تفاوت تگ‌های strong و b در آن است که تگ strong معنای پراهمیت بودن می‌دهد و شما می‌توانید به کمک آن اهمیت یک متن را علاوه بر کاربران، به موتورهای جستجو و ابزارهای آنالیز وب نیز نشان دهید. در حالی که تگ b هیچگونه بار معنایی خاصی از نظر موتورهای جستجو و ابزارهای آنالیز وب ندارد.

 

مرورگرهای سازگار با تگ عبارتی strong

پلتفرم
مرورگر گوگل کروم مایکروسافت اج فایرفاکس اینترنت اکسپلورر اپرا سافاری وب ویو اندروید گوگل کروم اندروید فایرفاکس اندروید اپرا اندروید سافاری iOS سامسونگ اینترنت سامسونگ اینترنت
نسخه ۱+ ۱۲+ ۴+ ۴+

 

تگ em

تگ em یک تگ عبارت Inline می‌باشد که از نظر معنایی برای تاکید کردن روی یک عبارت یا بخشی از آن مورد استفاده قرار می‌گیرد.

تگ em با <em> شروع و با </em> پایان می‌یابد.

 

مثال: تگ em

نمایش خروجی!

 

استایل پیشفرض CSS برای تگ em

به صورت پیشفرض، مرورگرهای وب تگ em را با استایل CSS زیر نمایش می‌دهند (فونت محتوای داخل تگ em به صورت italic (کج) نمایش داده می‌شود) :

 

مقایسه تگ em و strong

در حالی که تگ em برای تغییر معنی جمله از نظر تأکید گفتاری (صرفا تاکید استرس) استفاده می‌گردد، تگ strong برای نشان دادن بخش‌هایی از جمله که اهمیت بیشتری دارند به کار گرفته می‌شود.

 

مرورگرهای سازگار با تگ عبارتی em

پلتفرم
مرورگر گوگل کروم مایکروسافت اج فایرفاکس اینترنت اکسپلورر اپرا سافاری وب ویو اندروید گوگل کروم اندروید فایرفاکس اندروید اپرا اندروید سافاری iOS سامسونگ اینترنت سامسونگ اینترنت
نسخه ۱+ ۱۲+ ۱+ ۴+

 

تگ address

تگ address گونه‌ای از تگ های عبارت Block-Level می‌باشد. از تگ address برای تعریف اطلاعات تماس و مکان یک شخص نظیر نویسنده‌ی یک مقاله یا یک کسب و کار ثبت شده و … استفاده می‌شود؛ بنابراین اطلاعاتی از قبیل آدرس محل سکونت، شماره تلفن، ایمیل، لینک وب‌سایت شخصی و … را می توان در تگ address تعریف نمود.

 

مثال: تگ address

نمایش خروجی!

 

تگ address و سئو سایت

به کمک تگ address می‌توانید یک سیگنال قوی درباره‌ی اطلاعات تماس دفتر یا محل کسب و کارتان به موتورهای جستجو ارسال کنید که این مسئله تا حد خوبی روی سئوی محلی سایت شما اثرگذار است؛ همچنین می‌توانید از تگ address در بخش فوتر سایت خود استفاده نمایید.

پیشنهاد ویژه ویتکس
همه آنچه باید درباره سئو و بهینه ‌سازی سایت بدانید را در مقالهسئو چیست؟” مطالعه کنید.

 

استایل پیشفرض CSS برای تگ address

به صورت پیشفرض، مرورگرهای وب تگ address را با استایل CSS زیر نمایش می‌دهند (فونت محتوای داخل تگ address به صورت italic (کج) نمایش داده می‌شود) :

 

مرورگرهای سازگار با تگ عبارتی address

پلتفرم
مرورگر گوگل کروم مایکروسافت اج فایرفاکس اینترنت اکسپلورر اپرا سافاری وب ویو اندروید گوگل کروم اندروید فایرفاکس اندروید اپرا اندروید سافاری iOS سامسونگ اینترنت سامسونگ اینترنت
نسخه ۱۲+ ۱+ ۱+ ۴+

 

تگ blockquote

تگ blockquote یک تگ عبارت Block-Level است. از تگ blockquote برای بیان نقل قول کامل (نقل قولی که اطلاعاتی اضافی از قبیل عکس ها،  لیست ها و … دارد) از جانب یک منبع خارجی (مثلاً نقل قول از متن یک وب سایت دیگر) استفاده می شود. به کمک صفت cite در تگ blockquote، بیان نقل قول از جانب یک صفحه اینترنتی به سادگی امکان پذیر است.

 

مثال: نقل قول از ویکی پدیا به کمک تگ blockquote

نمایش خروجی!

 

استایل پیشفرض CSS تگ blockquote

بیشتر مرورگرهای وب به صورت پیشفرض مقداری فضا (Margin) از اطراف به تگ blockquote اضافه می‌کنند و آن را به صورت زیر نمایش می‌دهند :

 

مرورگرهای سازگار با تگ عبارتی blockquote و صفت cite

پلتفرم
مرورگر گوگل کروم مایکروسافت اج فایرفاکس اینترنت اکسپلورر اپرا سافاری وب ویو اندروید گوگل کروم اندروید فایرفاکس اندروید اپرا اندروید سافاری iOS سامسونگ اینترنت سامسونگ اینترنت
نسخه ۱۲+ ۱+ ۴+

 

تگ q

تگ q یک تک عبارتی Inline (درون خطی) می‌باشد. از تگ q جهت ایجاد یک نقل قول کوتاه (نقل قولی که شامل یک یا چند جمله ی کوتاه و کلیدی است) از جانب افراد و شرکت‌های گوناگون استفاده می‌شود. در تگ q مانند تگ blockquote می توانید از صفت cite نیز استفاده نمایید.

 

مثال: نقل قول کوتاه از بیل گیتس به کمک تگ q (بدون ذکر منبع)

 

مثال: نقل قول کوتاه از بیل گیتس به کمک تگ q (همراه ذکر منبع)

نمایش خروجی!

 

استایل پیشفرض CSS برای تگ q

به صورت پیشفرض، مرورگرهای وب تگ q را با استایل CSS زیر نمایش می دهند :

 

مرورگرهای سازگار با تگ عبارتی q

پلتفرم
مرورگر گوگل کروم مایکروسافت اج فایرفاکس اینترنت اکسپلورر اپرا سافاری وب ویو اندروید گوگل کروم اندروید فایرفاکس اندروید اپرا اندروید سافاری iOS سامسونگ اینترنت سامسونگ اینترنت
نسخه ۱۲+ ۱+ ۴+

 

تگ mark

تگ mark یک تگ عبارتی Inline می باشد. از تگ mark برای هایلایت کردن بخش های مهم و قابل توجه یک عبارت استفاده می شود.

 

مثال: تگ mark

نمایش خروجی!

 

استایل پیشفرض CSS برای تگ mark

به صورت پیشفرض، مرورگرهای وب تگ mark را با استایل CSS زیر نمایش می‌دهند (محتوای درون متن تگ mark را با رنگ مشکی و پس زمینه زرد نمایش می‌دهند) :

 

مرورگرهای سازگار با تگ عبارتی mark

پلتفرم
مرورگر گوگل کروم مایکروسافت اج فایرفاکس اینترنت اکسپلورر اپرا سافاری وب ویو اندروید گوگل کروم اندروید فایرفاکس اندروید اپرا اندروید سافاری iOS سامسونگ اینترنت سامسونگ اینترنت
نسخه ۱۲+ ۴+ ۹+ ۱۱.۱+ ۴+

 

تگ abbr و تگ acronym

تگ abbr و تگ acronym هر دو یک گونه از تگ های عبارتی inline می باشند که برای مخفف سازی یک عبارت کلیدی به کار می‌روند و تنها تفاوت آن‌ها در این است که تگ abbr در HTML5 پشتیبانی می شود اما تگ acronym نهایتا تا نسخه HTML 4 قابل پشتیبانی است و در HTML5 پشتیبانی نمی شود.

 

مثال: تگ abbr

 

مثال: تگ acronym (در HTML5 پشتیبانی نمی شود)

نمایش خروجی!

 

صفت title در تگ abbr و تگ acronym

از صفت title جهت تعریف کامل عبارتی که توسط تگ abbr یا تگ acronym مختصر شده است، استفاده می‌شود. با رفتن ماوس روی عبارت مختصر شده، عبارتی که توسط صفت title در تگ abbr یا تگ acronym تعریف نمودید، پدیدار می‌شود.

 

مرورگرهای سازگار با تگ عبارتی abbr

پلتفرم
مرورگر گوگل کروم مایکروسافت اج فایرفاکس اینترنت اکسپلورر اپرا سافاری وب ویو اندروید گوگل کروم اندروید فایرفاکس اندروید اپرا اندروید سافاری iOS سامسونگ اینترنت سامسونگ اینترنت
نسخه ۲+ ۱۲+ ۴+ ۷+ ۴+

 

مرورگرهای سازگار با تگ عبارتی acronym

پلتفرم
مرورگر گوگل کروم مایکروسافت اج فایرفاکس اینترنت اکسپلورر اپرا سافاری وب ویو اندروید گوگل کروم اندروید فایرفاکس اندروید اپرا اندروید سافاری iOS سامسونگ اینترنت سامسونگ اینترنت
نسخه ۱۲+

 

تگ code

از تگ code برای نمایش مستقیم کد زبان‌های برنامه نویسی در سایت‌ها استفاده می‌شود که ظاهر آن مستقل از متن است.

 

مثال: تگ code با استایل پیشفرض

نمایش خروجی!

 

استایل پیشفرض CSS تگ code

کدهای درون تگ code به صورت پیش فرض با فونت monospace نمایش داده می شوند.

همان طور که گفتیم تگ code ظاهری مستقل از متن دارد اما این ظاهر بسیار ساده است؛ بنابراین می توانید با استفاده از استایل‌های CSS، خلاقیت خود را در نمایش کدهای برنامه نویسی در HTML امتحان کنید.

 

مثال: تگ code با استایل CSS شخصی سازی شده

نمایش خروجی!

 

مرورگرهای سازگار با تگ عبارتی code

پلتفرم
مرورگر گوگل کروم مایکروسافت اج فایرفاکس اینترنت اکسپلورر اپرا سافاری وب ویو اندروید گوگل کروم اندروید فایرفاکس اندروید اپرا اندروید سافاری iOS سامسونگ اینترنت سامسونگ اینترنت
نسخه ۱+ ۱۲+ ۱+ ۴+

 

تگ dfn

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

 

کاربرد تگ dfn همراه مثال

به طور کلی کاربردهای تگ dfn را می‌توان به حالت‌های زیر دسته‌بندی نمود :

۱- در این نوع تعریف عبارت هدف درون تگ dfn قرار گرفته و تعریف آن در امتداد تگ dfn قرار می‌گیرد.

۲- اگر قصد تعریف واژه یا عبارت مشخصی را توسط تگ dfn دارید، با استفاده از صفت title می‌توانید عنوانی را که این عبارت معرف آن است، مشخص کنید.

۳- اگر در حالت دوم، واژه‌ی شما یک واژه‌ی مخفف شده بود، برای تعریف کامل معادل این واژه‌ی مخفف، بهتر است که از تگ abbr، به عنوان فرزند تگ dfn استفاده کنید و صفت title را از تگ dfn به تگ abbr منتقل کنید تا کد شما مفهوم صحیحی پیدا کند.

۴- اگر یک واژه یا یک عبارت را به کمک dfn تعریف نموده‌اید، با افزودن صفت id به تگ dfn، می توانید این تعریف را به یک “تعریف مرجع” تبدیل کنید و در هر بخشی از نوشته که شامل این واژه است، کاربر خود را به “تعریف مرجع” لینک کنید.

نمایش خروجی!

استایل پیشفرض CSS برای تگ dfn

به صورت پیشفرض، مرورگرهای وب تگ dfn را با استایل CSS زیر نمایش می دهند :

 

مرورگرهای سازگار با تگ عبارتی dfn

پلتفرم
مرورگر گوگل کروم مایکروسافت اج فایرفاکس اینترنت اکسپلورر اپرا سافاری وب ویو اندروید گوگل کروم اندروید فایرفاکس اندروید اپرا اندروید سافاری iOS سامسونگ اینترنت سامسونگ اینترنت
نسخه ۱۲+ ۱+ ۴+

 

تگ kbd

تگ kbd یک تگ عبارتی inline است که برای نمایش استاندارد ورودی کیبورد در سند HTML استفاده می شود؛ ظاهر تگ kbd مستقل از متن است. کدهای درون تگ kbd به صورت پیش فرض با فونت monospace نمایش داده می‌شوند.

 

مثال: تگ kbd با استایل پیشفرض

نمایش خروجی!

 

استایل پیشفرض CSS تگ kbd

کدهای درون تگ kbd به صورت پیش فرض با فونت monospace نمایش داده می شوند.

همان طور که گفتیم تگ kbd ظاهری مستقل از متن دارد اما این ظاهر بسیار ساده است؛ بنابراین می توانید با استفاده از استایل‌های CSS به تگ kbd ظاهری جذاب ببخشید.

 

مثال: تگ kbd با استایل CSS شخصی سازی شده

نمایش خروجی!

 

مرورگرهای سازگار با تگ عبارتی kbd

پلتفرم
مرورگر گوگل کروم مایکروسافت اج فایرفاکس اینترنت اکسپلورر اپرا سافاری وب ویو اندروید گوگل کروم اندروید فایرفاکس اندروید اپرا اندروید سافاری iOS سامسونگ اینترنت سامسونگ اینترنت
نسخه ۱۲+ ۴+

امیدواریم از این مقاله نهایت بهره را برده باشید. می‌توانید این محتوا را با دوستان خود به اشتراک بگذارید.

درباره نویسنده

محمد جاودانی

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

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا