آموزش کامل تگ های عبارتی در 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
۱ | <p>یادگیری <strong>HTML</strong> بسیار شیرین است.</p> |
استایل پیشفرض CSS برای تگ strong
به صورت پیشفرض، مرورگرهای وب تگ strong را با استایل CSS زیر نمایش میدهند (فونت محتوای داخل تگ strong به صورت bold (پررنگ) نمایش داده میشود) :
۱ ۲ ۳ | strong { font-weight: bold; } |
مقایسه تگ strong و تگ b
شباهت تگهای strong و b در آن است که هر دو آنها Inline میباشند و از دید کاربران نیز استایل یکسانی دارند؛ به عبارتی هر متنی که در این تگها قرار میگیرد، از نظر ظاهری به صورت bold (پررنگ) خواهد بود.
تفاوت تگهای strong و b در آن است که تگ strong معنای پراهمیت بودن میدهد و شما میتوانید به کمک آن اهمیت یک متن را علاوه بر کاربران، به موتورهای جستجو و ابزارهای آنالیز وب نیز نشان دهید. در حالی که تگ b هیچگونه بار معنایی خاصی از نظر موتورهای جستجو و ابزارهای آنالیز وب ندارد.
مرورگرهای سازگار با تگ عبارتی strong
پلتفرم | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
مرورگر | گوگل کروم | مایکروسافت اج | فایرفاکس | اینترنت اکسپلورر | اپرا | سافاری | وب ویو اندروید | گوگل کروم اندروید | فایرفاکس اندروید | اپرا اندروید | سافاری iOS |
سامسونگ اینترنت
![]() |
نسخه | ۱+ | ۱۲+ | ۴+ | ۴+ |
تگ em
تگ em یک تگ عبارت Inline میباشد که از نظر معنایی برای تاکید کردن روی یک عبارت یا بخشی از آن مورد استفاده قرار میگیرد.
تگ em با <em> شروع و با </em> پایان مییابد.
مثال: تگ em
۱ | <p>ما<em>باید</em>پروژه را تا آخر هفته تمام کنیم!</p> |
۱ | <p>من <em>عاشق</em> برنامه نویسی هستم.</p> |
استایل پیشفرض CSS برای تگ em
به صورت پیشفرض، مرورگرهای وب تگ em را با استایل CSS زیر نمایش میدهند (فونت محتوای داخل تگ em به صورت italic (کج) نمایش داده میشود) :
۱ ۲ ۳ | em { font-style: italic; } |
مقایسه تگ em و strong
در حالی که تگ em برای تغییر معنی جمله از نظر تأکید گفتاری (صرفا تاکید استرس) استفاده میگردد، تگ strong برای نشان دادن بخشهایی از جمله که اهمیت بیشتری دارند به کار گرفته میشود.
مرورگرهای سازگار با تگ عبارتی em
پلتفرم | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
مرورگر | گوگل کروم | مایکروسافت اج | فایرفاکس | اینترنت اکسپلورر | اپرا | سافاری | وب ویو اندروید | گوگل کروم اندروید | فایرفاکس اندروید | اپرا اندروید | سافاری iOS |
سامسونگ اینترنت
![]() |
نسخه | ۱+ | ۱۲+ | ۱+ | ۴+ |
تگ address
تگ address گونهای از تگ های عبارت Block-Level میباشد. از تگ address برای تعریف اطلاعات تماس و مکان یک شخص نظیر نویسندهی یک مقاله یا یک کسب و کار ثبت شده و … استفاده میشود؛ بنابراین اطلاعاتی از قبیل آدرس محل سکونت، شماره تلفن، ایمیل، لینک وبسایت شخصی و … را می توان در تگ address تعریف نمود.
مثال: تگ address
۱ ۲ ۳ ۴ ۵ | <address> شعری از <a href="mailto:webmaster@example.com">علی احمدی</a><br> وب سایت: example.com <br> استان البرز، کرج، عظیمیه، میدان مهران </address> |
تگ address و سئو سایت
به کمک تگ address میتوانید یک سیگنال قوی دربارهی اطلاعات تماس دفتر یا محل کسب و کارتان به موتورهای جستجو ارسال کنید که این مسئله تا حد خوبی روی سئوی محلی سایت شما اثرگذار است؛ همچنین میتوانید از تگ address در بخش فوتر سایت خود استفاده نمایید.
استایل پیشفرض CSS برای تگ address
به صورت پیشفرض، مرورگرهای وب تگ address را با استایل CSS زیر نمایش میدهند (فونت محتوای داخل تگ address به صورت italic (کج) نمایش داده میشود) :
۱ ۲ ۳ ۴ | address { display: block; font-style: italic; } |
مرورگرهای سازگار با تگ عبارتی address
پلتفرم | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
مرورگر | گوگل کروم | مایکروسافت اج | فایرفاکس | اینترنت اکسپلورر | اپرا | سافاری | وب ویو اندروید | گوگل کروم اندروید | فایرفاکس اندروید | اپرا اندروید | سافاری iOS |
سامسونگ اینترنت
![]() |
نسخه | ۱۲+ | ۱+ | ۱+ | ۴+ |
تگ blockquote
تگ blockquote یک تگ عبارت Block-Level است. از تگ blockquote برای بیان نقل قول کامل (نقل قولی که اطلاعاتی اضافی از قبیل عکس ها، لیست ها و … دارد) از جانب یک منبع خارجی (مثلاً نقل قول از متن یک وب سایت دیگر) استفاده می شود. به کمک صفت cite در تگ blockquote، بیان نقل قول از جانب یک صفحه اینترنتی به سادگی امکان پذیر است.
مثال: نقل قول از ویکی پدیا به کمک تگ blockquote
۱ ۲ ۳ | <blockquote cite="https://blog.veetechs.com/introduction-to-html/"> اچ تی ام ال (HTML) یک زبان برنامه نویسی (به صورت تخصصی تر : زبان نشانه گذاری) برای طراحی اسکلت بندی ظاهر تمام وب سایت ها و صفحات موجود در وب است که مخفف HyperText Markup Language و به معنای “زبان نشانه گذاری فرامتن” می باشد. </blockquote> |
استایل پیشفرض CSS تگ blockquote
بیشتر مرورگرهای وب به صورت پیشفرض مقداری فضا (Margin) از اطراف به تگ blockquote اضافه میکنند و آن را به صورت زیر نمایش میدهند :
۱ ۲ ۳ ۴ ۵ ۶ ۷ | blockquote { display: block; margin-top: ۱em; margin-bottom: ۱em; margin-left: ۴۰px; margin-right: ۴۰px; } |
مرورگرهای سازگار با تگ عبارتی blockquote و صفت cite
پلتفرم | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
مرورگر | گوگل کروم | مایکروسافت اج | فایرفاکس | اینترنت اکسپلورر | اپرا | سافاری | وب ویو اندروید | گوگل کروم اندروید | فایرفاکس اندروید | اپرا اندروید | سافاری iOS |
سامسونگ اینترنت
![]() |
نسخه | ۱۲+ | ۱+ | ۴+ |
تگ q
تگ q یک تک عبارتی Inline (درون خطی) میباشد. از تگ q جهت ایجاد یک نقل قول کوتاه (نقل قولی که شامل یک یا چند جمله ی کوتاه و کلیدی است) از جانب افراد و شرکتهای گوناگون استفاده میشود. در تگ q مانند تگ blockquote می توانید از صفت cite نیز استفاده نمایید.
مثال: نقل قول کوتاه از بیل گیتس به کمک تگ q (بدون ذکر منبع)
۱ ۲ ۳ ۴ ۵ | <p> من به این سخن بیل گیتس که می گوید : <q>اگر فقیر به دنیا آمدید این اشتباه شما نیست، اما اگر فقیر از دنیا بروید این اشتباه شماست.</q> اعتقاد دارم. </p> |
مثال: نقل قول کوتاه از بیل گیتس به کمک تگ q (همراه ذکر منبع)
۱ | <p> من به این سخن بیل گیتس که می گوید : <q cite="https://www.goalcast.com/2017/12/07/27-bill-gates-quotes/"> اگر فقیر به دنیا آمدید این اشتباه شما نیست، اما اگر فقیر از دنیا بروید این اشتباه شماست. </q> اعتقاد دارم. </p> |
استایل پیشفرض CSS برای تگ q
به صورت پیشفرض، مرورگرهای وب تگ q را با استایل CSS زیر نمایش می دهند :
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ | q { display: inline; } q:before { content: open-quote; } q:after { content: close-quote; } |
مرورگرهای سازگار با تگ عبارتی q
پلتفرم | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
مرورگر | گوگل کروم | مایکروسافت اج | فایرفاکس | اینترنت اکسپلورر | اپرا | سافاری | وب ویو اندروید | گوگل کروم اندروید | فایرفاکس اندروید | اپرا اندروید | سافاری iOS |
سامسونگ اینترنت
![]() |
نسخه | ۱۲+ | ۱+ | ۴+ |
تگ mark
تگ mark یک تگ عبارتی Inline می باشد. از تگ mark برای هایلایت کردن بخش های مهم و قابل توجه یک عبارت استفاده می شود.
مثال: تگ mark
۱ ۲ ۳ | <p> زبان HTML5 <mark>قابل درک و خواندن برای انسان ها</mark> و همچنین <mark>مستقل از دستگاه</mark> است. </p> |
استایل پیشفرض CSS برای تگ mark
به صورت پیشفرض، مرورگرهای وب تگ mark را با استایل CSS زیر نمایش میدهند (محتوای درون متن تگ mark را با رنگ مشکی و پس زمینه زرد نمایش میدهند) :
۱ ۲ ۳ ۴ | mark { background-color: yellow; color: black; } |
مرورگرهای سازگار با تگ عبارتی mark
پلتفرم | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
مرورگر | گوگل کروم | مایکروسافت اج | فایرفاکس | اینترنت اکسپلورر | اپرا | سافاری | وب ویو اندروید | گوگل کروم اندروید | فایرفاکس اندروید | اپرا اندروید | سافاری iOS |
سامسونگ اینترنت
![]() |
نسخه | ۱۲+ | ۴+ | ۹+ | ۱۱.۱+ | ۴+ |
تگ abbr و تگ acronym
تگ abbr و تگ acronym هر دو یک گونه از تگ های عبارتی inline می باشند که برای مخفف سازی یک عبارت کلیدی به کار میروند و تنها تفاوت آنها در این است که تگ abbr در HTML5 پشتیبانی می شود اما تگ acronym نهایتا تا نسخه HTML 4 قابل پشتیبانی است و در HTML5 پشتیبانی نمی شود.
مثال: تگ abbr
۱ ۲ ۳ | <p> با سئو (<abbr title="Search Engine Optimization">SEO</abbr>) اصولی و حرفهای سایت شما در صفحات نتایج موتور جستجو جایگاه و اعتبار مناسبی را کسب میکند. </p> |
مثال: تگ acronym (در HTML5 پشتیبانی نمی شود)
۱ ۲ ۳ | <p> با سئو (<acronym title="Search Engine Optimization">SEO</acronym>) اصولی و حرفهای سایت شما در صفحات نتایج موتور جستجو جایگاه و اعتبار مناسبی را کسب میکند. </p> |
صفت title در تگ abbr و تگ acronym
از صفت title جهت تعریف کامل عبارتی که توسط تگ abbr یا تگ acronym مختصر شده است، استفاده میشود. با رفتن ماوس روی عبارت مختصر شده، عبارتی که توسط صفت title در تگ abbr یا تگ acronym تعریف نمودید، پدیدار میشود.
مرورگرهای سازگار با تگ عبارتی abbr
پلتفرم | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
مرورگر | گوگل کروم | مایکروسافت اج | فایرفاکس | اینترنت اکسپلورر | اپرا | سافاری | وب ویو اندروید | گوگل کروم اندروید | فایرفاکس اندروید | اپرا اندروید | سافاری iOS |
سامسونگ اینترنت
![]() |
نسخه | ۲+ | ۱۲+ | ۴+ | ۷+ | ۴+ |
مرورگرهای سازگار با تگ عبارتی acronym
پلتفرم | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
مرورگر | گوگل کروم | مایکروسافت اج | فایرفاکس | اینترنت اکسپلورر | اپرا | سافاری | وب ویو اندروید | گوگل کروم اندروید | فایرفاکس اندروید | اپرا اندروید | سافاری iOS |
سامسونگ اینترنت
![]() |
نسخه | ۱۲+ |
تگ code
از تگ code برای نمایش مستقیم کد زبانهای برنامه نویسی در سایتها استفاده میشود که ظاهر آن مستقل از متن است.
مثال: تگ code با استایل پیشفرض
۱ | <p>برای تغییر اندازه فونت یک متن در CSS کافیست از <code>font-size</code> استفاده کنید.</p> |
استایل پیشفرض CSS تگ code
کدهای درون تگ code به صورت پیش فرض با فونت monospace نمایش داده می شوند.
۱ ۲ ۳ | code { font-family: monospace; } |
مثال: تگ code با استایل CSS شخصی سازی شده
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ | <html lang='fa-IR' dir='rtl'> <style> .code-example code { font-family: Consolas, "courier new"; background-color: #eee; font-size: ۱۶px; padding: ۲px ۴px; border: ۱px solid #b4b4b4; border-radius: ۵px; color: purple; } </style> <body> <p class='code-example'> برای تغییر اندازه فونت یک متن در CSS کافیست از <code>font-size</code> استفاده کنید. </p> </body> </html> |
مرورگرهای سازگار با تگ عبارتی code
پلتفرم | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
مرورگر | گوگل کروم | مایکروسافت اج | فایرفاکس | اینترنت اکسپلورر | اپرا | سافاری | وب ویو اندروید | گوگل کروم اندروید | فایرفاکس اندروید | اپرا اندروید | سافاری iOS |
سامسونگ اینترنت
![]() |
نسخه | ۱+ | ۱۲+ | ۱+ | ۴+ |
تگ dfn
تگ dfn یک تگ عبارت inline و تعریفی است که برای تعریف عبارات خاص و اصطلاحات کلیدی استفاده میشود. عمدهترین تفاوت تگ dfn با تگهای abbr یا acronym در کاربرد معنایی آن است. همانطور که گفتیم از تگهای abbr یا acronym برای مخفف سازی یک عبارت کلیدی در HTML استفاده میشود. در حالی که تگ dfn معمولاً برای تعریف عبارتی که در ابتدای یک پاراگراف وجود دارد و توضیح آن در ادامه همان متن قرار دارد، به کار گرفته می شود.
کاربرد تگ dfn همراه مثال
به طور کلی کاربردهای تگ dfn را میتوان به حالتهای زیر دستهبندی نمود :
۱- در این نوع تعریف عبارت هدف درون تگ dfn قرار گرفته و تعریف آن در امتداد تگ dfn قرار میگیرد.
۱ | <p><dfn>CSS</dfn> یکی از هسته های اصلی توسعه فرانت اند است که برای نمایش چیدمان و ظاهر صفحات وب به کار می رود.</p> |
۲- اگر قصد تعریف واژه یا عبارت مشخصی را توسط تگ dfn دارید، با استفاده از صفت title میتوانید عنوانی را که این عبارت معرف آن است، مشخص کنید.
۱ | <p><dfn title="Cascading Style Sheets">CSS</dfn> یکی از هسته های اصلی توسعه فرانت اند است که برای نمایش چیدمان و ظاهر صفحات وب به کار می رود.</p> |
۳- اگر در حالت دوم، واژهی شما یک واژهی مخفف شده بود، برای تعریف کامل معادل این واژهی مخفف، بهتر است که از تگ abbr، به عنوان فرزند تگ dfn استفاده کنید و صفت title را از تگ dfn به تگ abbr منتقل کنید تا کد شما مفهوم صحیحی پیدا کند.
۱ | <p><dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> یکی از هسته های اصلی توسعه فرانت اند است که برای نمایش چیدمان و ظاهر صفحات وب به کار می رود.</p> |
۴- اگر یک واژه یا یک عبارت را به کمک dfn تعریف نمودهاید، با افزودن صفت id به تگ dfn، می توانید این تعریف را به یک “تعریف مرجع” تبدیل کنید و در هر بخشی از نوشته که شامل این واژه است، کاربر خود را به “تعریف مرجع” لینک کنید.
۱ ۲ ۳ | <p><dfn id="css-def">CSS</dfn> یکی از هسته های اصلی توسعه فرانت اند است که برای نمایش چیدمان و ظاهر صفحات وب به کار می رود.</p> <p>اکنون <a href="#css-def">CSS</a> را یاد بگیرید.</p> |
استایل پیشفرض CSS برای تگ dfn
به صورت پیشفرض، مرورگرهای وب تگ dfn را با استایل CSS زیر نمایش می دهند :
۱ ۲ ۳ | dfn { font-style: italic; } |
مرورگرهای سازگار با تگ عبارتی dfn
پلتفرم | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
مرورگر | گوگل کروم | مایکروسافت اج | فایرفاکس | اینترنت اکسپلورر | اپرا | سافاری | وب ویو اندروید | گوگل کروم اندروید | فایرفاکس اندروید | اپرا اندروید | سافاری iOS |
سامسونگ اینترنت
![]() |
نسخه | ۱۲+ | ۱+ | ۴+ |
تگ kbd
تگ kbd یک تگ عبارتی inline است که برای نمایش استاندارد ورودی کیبورد در سند HTML استفاده می شود؛ ظاهر تگ kbd مستقل از متن است. کدهای درون تگ kbd به صورت پیش فرض با فونت monospace نمایش داده میشوند.
مثال: تگ kbd با استایل پیشفرض
۱ | <p>برای کپی کردن یک متن کلیدهای <kbd>ctrl</kbd> و <kbd>c</kbd> را فشار دهید.</p> |
استایل پیشفرض CSS تگ kbd
کدهای درون تگ kbd به صورت پیش فرض با فونت monospace نمایش داده می شوند.
۱ ۲ ۳ | code { font-family: monospace; } |
مثال: تگ kbd با استایل CSS شخصی سازی شده
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ | <html lang='fa-IR' dir='rtl'> <style> .kbd-example kbd { font-family: Consolas, "courier new"; background-color: #eee; font-size: ۱۶px; padding: ۲px ۴px; border: ۱px solid #b4b4b4; border-radius: ۵px; color: crimson; font-weight: ۷۰۰; } </style> <body> <p class='kbd-example'> برای کپی کردن یک متن کلیدهای <kbd>ctrl</kbd> و <kbd>c</kbd> را فشار دهید. </p> </body> </html> |
مرورگرهای سازگار با تگ عبارتی kbd
پلتفرم | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
مرورگر | گوگل کروم | مایکروسافت اج | فایرفاکس | اینترنت اکسپلورر | اپرا | سافاری | وب ویو اندروید | گوگل کروم اندروید | فایرفاکس اندروید | اپرا اندروید | سافاری iOS |
سامسونگ اینترنت
![]() |
نسخه | ۱۲+ | +۴ | ۴+ |
امیدواریم از این مقاله نهایت بهره را برده باشید. میتوانید این محتوا را با دوستان خود به اشتراک بگذارید.