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

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

محمد جاودانی۱۴۰۰-۰۵-۱۲

۰ 115 زمان تقریبی مطالعه 6 دقیقه

فهرست مطالب

تگ های عبارتی (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

۱	<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

۱	<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>

وب سایت: example.com

استان البرز، کرج، عظیمیه، میدان مهران

</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

اچ تی ام ال (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 (بدون ذکر منبع)

من به این سخن بیل گیتس که می گوید :

<q>اگر فقیر به دنیا آمدید این اشتباه شما نیست، اما اگر فقیر از دنیا بروید این اشتباه شماست.</q>

اعتقاد دارم.

مثال: نقل قول کوتاه از بیل گیتس به کمک تگ 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

زبان HTML5 قابل درک و خواندن برای انسان ها و همچنین مستقل از دستگاه است.

نمایش خروجی!

استایل پیشفرض 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

با سئو (<abbr title="Search Engine Optimization">SEO</abbr>) اصولی و حرفه‌ای سایت شما در صفحات نتایج موتور جستجو جایگاه و اعتبار مناسبی را کسب می‌کند.

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

با سئو (<acronym title="Search Engine Optimization">SEO</acronym>) اصولی و حرفه‌ای سایت شما در صفحات نتایج موتور جستجو جایگاه و اعتبار مناسبی را کسب می‌کند.

نمایش خروجی!

صفت 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 امتحان کنید.

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

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

<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>

برای تغییر اندازه فونت یک متن در CSS کافیست از <code>font-size</code> استفاده کنید.

</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، می توانید این تعریف را به یک “تعریف مرجع” تبدیل کنید و در هر بخشی از نوشته که شامل این واژه است، کاربر خود را به “تعریف مرجع” لینک کنید.

<dfn id="css-def">CSS</dfn> یکی از هسته های اصلی توسعه فرانت اند است که برای نمایش چیدمان و ظاهر صفحات وب به کار می رود.

اکنون <a href="#css-def">CSS</a> را یاد بگیرید.

نمایش خروجی!

استایل پیشفرض 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 به تگ kbd ظاهری جذاب ببخشید.

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

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

<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>

برای کپی کردن یک متن کلیدهای <kbd>ctrl</kbd> و <kbd>c</kbd> را فشار دهید.

</body>

</html>

نمایش خروجی!

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

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