آموزش HTML - تگ های عبارت

تگ‌های عبارت (Phrase Tags) در HTML برای اهداف خاصی طراحی شده‌اند، اگرچه روش نمایش آن‌ها مشابه سایر تگ‌های پایه مانند <b>، <i>، <pre> و <tt> است. در این جا شما را با تمام تگ‌های عبارت مهم آشنا می‌کنیم؛ پس بیایید بررسی تک‌تک آن‌ها را آغاز کنیم. در ادامه فهرستی از تگ‌های عبارت آمده است که برخی از آن‌ها در مباحث قالب‌بندی و نقل‌قول‌ها در HTML نیز بررسی شده‌اند.

فهرست تگ‌های عبارت HTML

• متن تأکیدشده - تگ em در HTML
• متن علامت‌گذاری‌شده - تگ mark در HTML
• متن مهم (برجسته) - تگ strong در HTML
• متن مخفف - تگ abbr در HTML
• متن مخفف اختصاری - تگ acronym در HTML
• متن جهت‌دار - تگ bdo در HTML
• اصطلاحات خاص - تگ dfn در HTML
• متن نقل‌قول کوتاه - تگ q در HTML
• متن نقل‌قول طولانی - تگ blockquote در HTML
• متن ارجاع و منبع - تگ cite در HTML
• متن کد کامپیوتر - تگ code در HTML
• متن ورودی کیبورد - تگ kbd در HTML
• متغیرهای برنامه‌نویسی - تگ pre در HTML
• خروجی برنامه - تگ samp در HTML
• متن آدرس - تگ address در HTML

در ادامه از هر یک از تگ‌های عبارت استفاده کرده‌ایم. هر تگ استایل پیش‌فرضی دارد و تعداد کمی از آن‌ها ویژگی‌هایی (attributes) را نیز می‌پذیرند.

متن تأکیدشده (Emphasized Text)

محتوایی که در عنصر <em>...</em> قرار می‌گیرد، به صورت متن تأکیدشده نمایش داده می‌شود. عنصر <em> معمولاً متن را به صورت مورب (Italics) رندر می‌کند که نشان‌دهنده تأکید است.

مثال

<!DOCTYPE html>
<body>
   <p>The following word uses a <em>emphasized</em> typeface.</p>
</body>
</html>

خروجی

The following word uses a emphasized typeface.

متن علامت‌گذاری‌شده (Marked Text)

هر چیزی که درون عنصر <mark>...</mark> قرار گیرد، به صورت هایلایت و علامت‌گذاری‌شده با رنگ زرد نمایش داده می‌شود.

مثال

<!DOCTYPE html>
<html>
<body>
   <p>The following word has been <mark>marked</mark> with yellow.</p>
</body>
</html>

خروجی

The following word has been marked with yellow.

متن مهم و پررنگ (Strong Text)

محتوایی که در عنصر <strong>...</strong> قرار می‌گیرد، به عنوان متن مهم نمایش داده می‌شود. عنصر <strong> متن را با فونت پررنگ (Bold) نمایش می‌دهد که نشان‌دهنده اهمیت بالا است.

مثال

<!DOCTYPE html>
<html>
<body>
   <p>The following word uses a <strong>strong</strong> typeface. </p>
</body>
</html>

خروجی

The following word uses a strong typeface.

متن مخفف (Abbreviation Text)

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

مثال

<!DOCTYPE html>
<html>
<body>
   <p>My best friend's name is <abbr title="Abhishek">Abhy</abbr>. </p>
</body>
</html>

خروجی

My best friend's name is Abhy.

متن مخفف اختصاری (Acronym Text)

عنصر <acronym> به شما امکان می‌دهد مشخص کنید متن بین تگ‌های <acronym> و </acronym> یک مخفف اختصاری (آکرونیم) است.

در حال حاضر، مرورگرهای اصلی ظاهر محتوای عنصر <acronym> را تغییر نمی‌دهند.

عنصر <acronym> در HTML5 منسوخ شده است. در عوض، باید از عنصر <abbr> برای تعریف مخفف‌ها استفاده کنید و می‌توانید با استفاده از ویژگی "title" توضیحات کامل را مشخص کنید.

مثال

<!DOCTYPE html>
<html>
<body>
   <p>This chapter covers marking up text in <acronym>XHTML</acronym>. </p>
</body>
</html>

خروجی

This chapter covers marking up text in XHTML.

متن جهت‌دار (Directed Text)

عنصر <bdo>...</bdo> مخفف Bi-Directional Override است و برای تغییر و جایگزینی جهت فعلی متن استفاده می‌شود.

مثال

<!DOCTYPE html>
<html>
<body>
   <p>This text will go left to right.</p>
   <p>
      <bdo dir="rtl">This text will go right to left.</bdo>
   </p>
</body>
</html>

خروجی

This text will go right to left.

اصطلاحات خاص (Special Terms)

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

معمولاً، اولین باری که یک اصطلاح کلیدی را معرفی می‌کنید از عنصر <dfn> استفاده می‌کنید. اکثر مرورگرهای جدید محتوای عنصر <dfn> را با فونت مورب رندر می‌کنند.

مثال

<!DOCTYPE html>
<html>
<body>
   <p>The following word is a <dfn>special</dfn> term. </p>
</body>
</html>

خروجی

The following word is a special term.

متن نقل‌قول (Quoting Text)

وقتی می‌خواهید بخشی را از منبع دیگری نقل‌قول کنید، باید آن را بین تگ‌های <blockquote>...</blockquote> قرار دهید.

متن داخل عنصر <blockquote> معمولاً از حاشیه‌های چپ و راست متن اطراف خود تورفتگی پیدا می‌کند و گاهی از فونت مورب استفاده می‌کند.

مثال

<!DOCTYPE html>
<html>
<body>
   <p>The following description of XHTML is taken from the W3C Web site:</p>
   <blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML, following on from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
</body>
</html>

خروجی

The following description of XHTML is taken from the W3C Web site:

XHTML 1.0 is the W3C's first Recommendation for XHTML, following on from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.

نقل‌قول‌های کوتاه (Short Quotations)

عنصر <q>...</q> زمانی استفاده می‌شود که می‌خواهید یک نقل‌قول دوتایی (گیومه) را داخل یک جمله اضافه کنید. با استفاده از <q>...</q>، مطمئن می‌شوید که متن محصورشده به عنوان یک نقل‌قول مستقیم ارائه می‌شود، که باعث بهبود خوانایی و حفظ نقطه‌گذاری صحیح در سند HTML شما می‌گردد.

مثال

<!DOCTYPE html>
<html>
<body>
   <p>Amit is in Spain, <q>I think I am wrong</q>. </p>
</body>
</html>

خروجی

Amit is in Spain, I think I am wrong.

ارجاعات متنی (Text Citations)

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

همان‌طور که در یک نشریه چاپی انتظار می‌رود، محتوای عنصر <cite> به طور پیش‌فرض به صورت متن مورب رندر می‌شود.

مثال

<!DOCTYPE html>
<html>
<body>
   <p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>. </p>
</body>
</html>

خروجی

This HTML tutorial is derived from W3 Standard for HTML.

کد کامپیوتر (Computer Code)

هر کد برنامه‌نویسی که قرار است در یک صفحه وب ظاهر شود باید داخل تگ‌های <code>...</code> قرار گیرد. معمولاً محتوای عنصر <code> با فونت تک‌فاصله (Monospaced) نمایش داده می‌شود، درست مانند کدها در اکثر کتاب‌های برنامه‌نویسی.

مثال

<!DOCTYPE html>
<html>
<body>
   <p>Regular text. <code>This is code.</code> Regular text. </p>
</body>
</html>

خروجی

Regular text. This is code. Regular text.

متن کیبورد (Keyboard Text)

هنگام صحبت درباره کامپیوترها، اگر می‌خواهید به خواننده بگویید متنی را وارد کند، می‌توانید از عنصر <kbd>...</kbd> برای مشخص کردن آنچه باید تایپ شود استفاده کنید، همان‌طور که در این مثال آمده است.

مثال

<!DOCTYPE html>
<html>
<body>
   <p>Regular text. <kbd>This is inside kbd element</kbd> Regular text. </p>
</body>
</html>

خروجی

Regular text. This is inside kbd element Regular text.

متغیرهای برنامه‌نویسی (Programming Variables)

عنصر <var> معمولاً همراه با عناصر <pre> و <code> استفاده می‌شود تا نشان دهد محتوای آن عنصر یک متغیر است.

مثال

<!DOCTYPE html>
<html>
<body>
   <p>
      <code>document.write(" <var>user-name</var>") </code>
   </p>
</body>
</html>

خروجی

document.write(" user-name") 

خروجی برنامه (Program Output)

عنصر <samp>...</samp> نشان‌دهنده خروجی نمونه از یک برنامه، اسکریپت و غیره است. باز هم، این عنصر عمدتاً هنگام مستندسازی مفاهیم برنامه‌نویسی یا کدنویسی استفاده می‌شود.

مثال

<!DOCTYPE html>
<html>
<body>
   <p>Result produced by the program is <samp>Hello World!</samp>
   </p>
</body>
</html>

خروجی

Result produced by the program is Hello World!

متن آدرس (Address Text)

عنصر <address>...</address> برای قرار دادن هرگونه آدرس استفاده می‌شود.

مثال

<!DOCTYPE html>
<html>
<body>
   <address>388A, Road No 22, Jubilee Hills - Hyderabad</address>
</body>
</html>

خروجی

388A, Road No 22, Jubilee Hills - Hyderabad