HTML – تگ‌های عبارتی (Phrase Tags)

تگ‌های عبارتی در HTML برای تعریف و تمیز کردن بخش‌های مختلف متن استفاده می‌شوند. این تگ‌ها کمک می‌کنند تا محتوای صفحه به صورت منطبق با معنای آن سازماندهی شود و به مرورگر اطلاع داده شود که چگونه باید متن را نمایش دهد. تگ‌های عبارتی مهمترین از جمله <em>, <strong>, <abbr>, <cite>, <code>, <mark>, <sub>, و <sup> هستند که هرکدام وظایف خاصی برای تغییر نحوه نمایش متن دارند. این تگ‌ها به تعریف کلمات یا عبارات مهم و برجسته کمک می‌کنند و در ترکیب با ساختار اصلی HTML، متن را برای مرورگر معناپذیر می‌کنند.

تگ Emphasized Text

تگ <em> در HTML برای تاکید بر روی یک بخش از متن استفاده می‌شود و معمولاً متنی که درون این تگ قرار می‌گیرد، با سبکی متمایز نمایش داده می‌شود. معمولاً مرورگرها متن را که داخل تگ <em> قرار می‌گیرد، با استفاده از خوشه نوشتاری متمایز می‌کنند، مانند ایتالیک یا تغییر رنگ متن.

این تگ معمولاً برای تاکید بر روی کلمات یا عبارات مهم در متن استفاده می‌شود و به مرورگر اطلاع می‌دهد که این بخش از متن نیاز به توجه بیشتر دارد.

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

<p>This is <em>emphasized text</em> within a paragraph.</p>

تگ Marked Text

تگ <mark> در HTML برای نشان دادن یک بخش از متن که باید به عنوان مشخص شده یا مهم تلقی شود، استفاده می‌شود. متنی که درون این تگ قرار می‌گیرد، معمولاً با یک زمینه رنگی نشان داده می‌شود تا آن قسمت از متن برجسته شود.

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

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

<p>This is <mark>marked text</mark> within a paragraph.</p>

تگ Strong Text

تگ <strong> در HTML برای نشان دادن یک بخش از متن که باید به عنوان بسیار مهم یا قوی تر از متن دیگر تلقی شود، استفاده می‌شود. متنی که درون این تگ قرار می‌گیرد، معمولاً با یک وزن دیگر یا رنگ متفاوت نشان داده می‌شود تا آن بخش از متن بیشتر به چشم بیاید.

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

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

<p>This is <strong>strong text</strong> within a paragraph.</p>

تگ Text Abbreviation

تگ <abbr> در HTML برای نشان دادن یک کلمه یا عبارت که به صورت کامل تعریف شده است و مخفف آن در ادامه متن استفاده می‌شود، به کار می‌رود. این تگ به مرورگر مشخص می‌کند که متنی که داخل آن قرار می‌گیرد، یک مخفف است و معانی کامل آن در دیگر قسمت‌های متن یا منبع موجود است.

در این مثال، کلمه “WWW” به عنوان مخفف معنای “World Wide Web” استفاده شده است. وقتی کاربر موس را روی “WWW” نگه می‌دارد، توضیحات “World Wide Web” به عنوان یک tooltip نمایش داده می‌شود.

مثال:

The <abbr title="World Wide Web">WWW</abbr> is an important part of the Internet.

تگ Acronym Element

تگ <acronym> در HTML قراردادهای آخرین کلمات یا حروفی را که مخفف یک عبارت معنایی هستند نشان می‌دهد. این تگ به مرورگر مشخص می‌کند که متن داخل آن یک مخفف است و معانی کامل آن در دیگر قسمت‌های متن یا منبع موجود است. با این حال، این تگ در HTML5 منسوخ شده و به جای آن از تگ <abbr> استفاده می‌شود.

در این مثال، عبارت “HTML” به عنوان مخفف عبارت “HyperText Markup Language” استفاده شده است. وقتی کاربر موس را روی “HTML” نگه می‌دارد، توضیحات “HyperText Markup Language” به عنوان یک tooltip نمایش داده می‌شود.

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>HTML Example</title>
  </head>
  <body>
      <p>
      The 
      <abbr title="HyperText Markup Language">
      HTML
      </abbr>
      is a markup language used for creating web pages.
      </p>
  </body>
  </html>
  

تگ Text Direction

تگ <bdo> در HTML برای تغییر جهت متن مورد استفاده قرار می‌گیرد. این تگ به شما اجازه می‌دهد تا جهت متن را به صورت صریح تعیین کنید، به جای اینکه بسته به جهت متن در داخل خصوصیت dir از HTML استفاده کنید. این تگ معمولاً برای نوشتن متن‌هایی که جهت آنها با محتوای متن اصلی متفاوت است، مورد استفاده قرار می‌گیرد، مانند تاریخ‌های شمسی یا نوشته‌های غیر لاتین.

در این مثال، متن “مثال” با استفاده از تگ <bdo> و با تنظیم جهت به راست به چپ نمایش داده شده است.

The text direction is from right to left: <bdo dir="rtl">مثال</bdo>

تگ Special Terms

تگ <dfn> در HTML برای تعریف یک واژه یا اصطلاح ویژه در متن استفاده می‌شود. این تگ به مرورگر اطلاع می‌دهد که متن داخل آن به عنوان تعریف واژه مورد نظر در نظر گرفته شود.

در این مثال، <bdo> برای تعریف واژه “W3C” به عنوان “World Wide Web Consortium” استفاده شده است. متن داخل تگ <bdo> به عنوان تعریف واژه در نظر گرفته می‌شود و مرورگر ممکن است آن را با استفاده از ابزارهایی مانند ابزار زیر نویس نمایش دهد.

<dfn title="World Wide Web Consortium">
W3C</dfn>
is the main international standards organization for the World Wide Web.

تگ Quoting Text

تگ <q> در HTML برای نقل قول یک متن کوتاه استفاده می‌شود. وقتی این تگ استفاده می‌شود، متن درون آن به عنوان یک نقل قول کوتاه معلوم می‌شود و مرورگر ممکن است آن را با استفاده از سبک‌ها یا تزیینات مخصوصی نمایش دهد.

در این مثال، تگ <q> برای نقل قول جمله “Fortune favors the bold” استفاده شده است. متن درون تگ <q> به عنوان یک نقل قول معلوم شده و مرورگر ممکن است آن را با استفاده از سبک‌ها یا تزیینات مخصوصی نمایش دهد.

<p>The famous saying
<q>Fortune favors the bold</q>
is often attributed to the ancient Roman author Virgil.</p>

تک Short Quotations

تگ <q> در HTML برای نشان دادن نقل قول‌های کوتاه استفاده می‌شود. این تگ به مرورگر اطلاع می‌دهد که متن داخل آن به عنوان یک نقل قول کوتاه در نظر گرفته شود و به طور پیش فرض متن داخل تگ به شکل کوچکتر و با استفاده از نمادهای نقل قول (معمولاً کهنه‌تر ”) نمایش داده می‌شود.

در این مثال، تگ <q> برای نشان دادن نقل قول “I have a dream.” استفاده شده است. مرورگر این متن را به شکل یک نقل قول کوتاه و با استفاده از نمادهای نقل قول (”) نمایش خواهد داد.

<p>In his famous speech, Martin Luther King Jr. said: <q>I have a dream.</q></p>

تگ Text Citations

تگ <cite> در HTML برای نشان دادن منبع یا ارجاع به یک متن، کتاب، مقاله و غیره استفاده می‌شود. این تگ به مرورگر اطلاع می‌دهد که متن داخل آن به عنوان یک متن ارجاع شده در نظر گرفته شود و معمولاً متن داخل تگ به شکل ایتالیک نمایش داده می‌شود.

در این مثال، تگ <cite> برای نشان دادن منبع “de Finibus Bonorum et Malorum” استفاده شده است. مرورگر این متن را به شکل ایتالیک نمایش خواهد داد.

<p>The phrase "Lorem ipsum" is commonly used as a placeholder text in design.
It originates from a work by Cicero, called 
<cite>de Finibus Bonorum et Malorum</cite>.
</p>

تگ Computer Code

تگ <code> در HTML برای نشان دادن قسمت‌های کد کامپیوتری استفاده می‌شود. این تگ به مرورگر اطلاع می‌دهد که متن داخل آن باید به عنوان کد محسوب شود و معمولاً متن داخل این تگ با یک فونت مونواسپیس نمایش داده می‌شود.

در این مثال، تگ <code> برای نمایش کد Python برای چاپ “Hello, world!” استفاده شده است. محتوای این تگ با یک فونت مونواسپیس نمایش داده می‌شود.

<p>To print "Hello, world!" in Python, you can use the following code:</p>
<code>print("Hello, world!")</code>

تگ Keyboard Text

تگ <kbd> در HTML برای نمایش متنی که توسط کاربر از کیبورد وارد می‌شود استفاده می‌شود. این تگ معمولاً برای نمایش کلید‌های کیبورد یا دستورات ورودی از کیبورد استفاده می‌شود.

در این مثال، تگ <kbd> برای نمایش کلید‌های کیبورد برای ذخیره سازی یک سند در بیشتر برنامه‌ها استفاده شده است.

<p>To save a document in most applications, press <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>

تگ Programming Variables

تگ <var> در HTML برای نمایش متغیرها یا نام‌های متغیرها در متن‌های مرتبط با برنامه‌نویسی استفاده می‌شود. این تگ معمولاً برای مشخص کردن نام‌های متغیرها یا مقادیری که به عنوان متغیرها استفاده می‌شوند در متن‌های برنامه‌نویسی استفاده می‌شود.

در این مثال، تگ <var> برای نمایش مقدار متغیر “x” استفاده شده است، که مقدار آن 5 است.

<p>The value of <var>x</var> is 5.</p>

تگ Program Output

تگ <samp> در HTML برای نمایش خروجی‌های برنامه‌ها یا متن‌های مرتبط با خروجی برنامه‌نویسی استفاده می‌شود. این تگ معمولاً برای نشان دادن متن‌هایی که توسط یک برنامه یا دستور خاص ایجاد شده‌اند، مورد استفاده قرار می‌گیرد.

در این مثال، تگ `<samp>` برای نمایش خروجی “Hello, world!” یک برنامه استفاده شده است.

<p>The program output is: <samp>Hello, world!</samp></p>

تگ Address Text

تگ <address> در HTML برای نمایش اطلاعات تماس یا اطلاعات مربوط به نشانی استفاده می‌شود. این تگ معمولاً برای نمایش اطلاعات تماس مربوط به نویسنده یا صاحب سایت، نشانی فیزیکی، یا اطلاعات دیگری که به آدرس مربوط می‌شود، استفاده می‌شود.

در این مثال، تگ <address> برای نمایش اطلاعات تماس و نشانی مربوط به نویسنده استفاده شده است.

<address>
    Written by John Doe.<br>
    Visit us at:<br>
    Example.com<br>
    Box 564, Disneyland<br>
    USA
</address>

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.