عناصر نقل قول و ارجاع در HTML

عناصر نقل‌قول و ارجاع در HTML

در این فصل با عناصر HTML زیر برای نقل‌قول و ارجاع آشنا می‌شویم:
<blockquote>، <q>، <abbr>، <address>، <cite> و <bdo>

✅ مثال (متن نقل‌شده):

در این‌جا نقل‌قولی از وب‌سایت WWF آورده شده:

«طی ۶۰ سال گذشته، WWF برای کمک به شکوفایی انسان و طبیعت تلاش کرده است. به‌عنوان پیشروترین سازمان حفاظت از محیط زیست در جهان، WWF در نزدیک به ۱۰۰ کشور فعالیت می‌کند. در هر سطحی، ما با مردم سراسر جهان همکاری می‌کنیم تا راه‌حل‌های نوآورانه‌ای را طراحی و اجرا کنیم که از جوامع، حیات‌وحش و زیستگاه‌های آن‌ها محافظت می‌کند.»

<blockquote> برای نقل‌قول‌های بلند

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

مرورگرها معمولاً عنصر <blockquote> را با تورفتگی (indent) نمایش می‌دهند.

کد:

<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 60 years, WWF has worked to help people and nature thrive. As the world's leading conservation organization, WWF works in nearly 100 countries. At every level, we collaborate with people around the world to develop and deliver innovative solutions that protect communities, wildlife, and the places in which they live.
</blockquote>

<q> برای نقل‌قول‌های کوتاه

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

مرورگرها معمولاً به‌صورت خودکار علامت نقل‌قول (" ") را در اطراف متن قرار می‌دهند.

کد:

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

<abbr> برای اختصارات

تگ <abbr> برای تعریف اختصارات یا سرواژه‌ها به‌کار می‌رود، مانند "HTML"، "CSS"، "Dr."، "ATM" و غیره.

نشانه‌گذاری اختصارات می‌تواند اطلاعات مفیدی به مرورگرها، موتورهای جستجو و سیستم‌های ترجمه ارائه دهد.

🔸 نکته: از ویژگی title برای نمایش توضیح کامل اختصار هنگام قرار دادن نشانگر ماوس روی آن استفاده کنید.

کد:

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

<address> برای اطلاعات تماس

تگ <address> برای نمایش اطلاعات تماس نویسنده یا مالک یک سند یا مقاله به‌کار می‌رود.

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

متن داخل <address> معمولاً به صورت مورب (italic) نمایش داده می‌شود و مرورگرها همیشه یک خط جدید قبل و بعد از آن ایجاد می‌کنند.

کد:

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

<cite> برای عنوان آثار هنری

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

 نکته: نام یک شخص عنوان اثر محسوب نمی‌شود.

متن داخل <cite> معمولاً به صورت مورب (italic) نمایش داده می‌شود.

کد:

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

<bdo> برای تغییر جهت متن (Bi-Directional Override)

BDO مخفف Bi-Directional Override (بازنویسی جهت متن) است.

تگ <bdo> برای تغییر جهت پیش‌فرض نمایش متن استفاده می‌شود.

کد:

<bdo dir="rtl">This text will be written from right to left</bdo>

 تمرین

کدام‌یک از گزینه‌های زیر عنصر HTML برای نقل‌قول نیست؟
(در واقع اصلاً عنصر HTML نیست!)

✅ <q>
❌ <quote> ⬅️ این یک عنصر HTML نیست
✅ <blockquote>

 خلاصه‌ی تگ‌های نقل‌قول و ارجاع: